Как обработать несуществующие страницы в Next.js?

Question

Дарья

nextjs

Как обработать несуществующие страницы в Next.js?

Как можно избавиться от страниц, доступных через пагинацию и содержащих большие числа в URL (например, /page/34234234)? Что происходит, когда посещают такие страницы, и есть ли способ перенаправить их на 404 страницу без рендеринга контента несуществующей страницы?

25 сентября 2023 г. 8:57

Ответы на вопрос 2

Похожие вопросы

Answer 1

В Next.js можно обработать несуществующие страницы с помощью файла `404.js` или `404.tsx` в корневой директории проекта. При посещении несуществующей страницы Next.js автоматически рендерит этот файл.

Чтобы реализовать перенаправление на страницу с 404 ошибкой в случае доступа к страницам, содержащим большие числа в URL, можно использовать `getServerSideProps()` или `getStaticProps()` и `fallback: false` для предварительной генерации страниц. Например:

```jsx
// pages/page/[id].js

import { useRouter } from 'next/router';
import ErrorPage from 'next/error';

export default function Page({ data }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  if (!data) {
    return <ErrorPage statusCode={404} />;
  }

  return (
    <div>
      {/* Ваш контент */}
    </div>
  );
}

export async function getStaticPaths() {
  // Генерирует только страницы с числами от 1 до 100
  const paths = [...Array(100)].map((_, index) => ({
    params: { id: (index + 1).toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const { id } = params;

  // Пример: проверка существования данных для страницы
  const response = await fetch(`https://api.example.com/page/${id}`);
  const data = await response.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: { data },
  };
}
```

В данном примере для страницы `/page/[id]` генерируются только пути от `/page/1` до `/page/100`. При доступе к несуществующему пути, например `/page/34234234`, Next.js автоматически перенаправит на страницу с 404 ошибкой.

Если вы хотите обработать несуществующие страницы на сервере, то можете использовать `getServerSideProps()`. В этом случае нужно заменить `getStaticPaths()` на `getServerSideProps()`, а `fallback: false` на `fallback: true`.

Answer 2

Если условие выполняется, то возвращается объект с свойством "notFound" со значением "true".