Добавляем Not Found (404) страницу в Next.js приложение

Важным элементом SEO-оптимизации является правильная работа с ошибками. В этой статье вы узнаете, что такое ошибка 404, и как правильно работать с ней в приложении на Next.js.

Что такое Not Found или 404 страница?

Ошибка 404, также известная как «Not Found» или «Не найдено», является стандартным HTTP-статусным кодом, который указывает на отсутствие запрашиваемого ресурса на сервере.

Файл not-found.js | not-found.ts

В Next.js, начиная с 13 версии, для работы с отображением 404 ошибки используется файл not-found.js.

Вот так может выглядеть код файла:

import Link from "next/link";

export default function NotFound() {
  return (
    <div>
      <h2>Не найдено</h2>
      <p>Запрашиваемый ресурс не доступен</p>
      <Link href="/">Вернуться на главную</Link>
    </div>
  );
}

Для отображения 404 ошибки необходимо поместить данный файл в корень директории app/,

app/not-found.tsx

страница будет отображаться для всех ненайденных URL приложения.

По умолчанию, NotFound - серверный компонент, и если необходимо получить какие-то данные перед отрисовкой, то необходимо сделать его асинхронным (async).

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const authorization = (await headers()).get('authorization');
  const res = await fetch('...', {
    headers: { authorization },
  })
  const user = await res.json();
  return (
     <div>
      <h2>Ничего не найдено, {user.name}.</h2>
      <p>Но ты можешь попробовать снова, вдруг это просто ошибка?</p>
    </div>
  )
}

Если же необходимо получить какие-то данные уже на клиенте, то можно вынести часть содержимого страницы в клиентский компонент, и запросить данные из него.

Подробную информацию можно найти в официальной документации по странице.

Функция notFound()

Так же отрисовку файла not-found.js можно вызвать принудительно с помощью функции notFound().

Примерно вот так:

import { notFound } from "next/navigation";

export default async function Post({ params }: Params) {
  const post = getPostBySlug(params.slug);

  if (!post) {
    return notFound();
  }

  ...

}

Эта функция позволяет кинуть ошибку NEXT_NOT_FOUND, а затем вызвать рендер страницы not-found.js в пределах сегмента пути и отдать 404 код ошибки HTTP.

В дополнение к этому, функция вставит на страницу мета-тег robots, при её использовании в серверном компоненте.

<meta name="robots" content="noindex" />

Функцию notFound() можно использовать в серверных компонентах (Server Components), обработчиках пути (Route Handlers) и серверных действиях (Server Actions).

Подробную информацию можно найти в официальной документации по функции.

На этом всё! 🎉

Подписывайтесь на мой Youtube канал, Telegram и на сообщество Вконтакте 🙂