Создание пользовательской страницы 404 в Next.js

В данной статье показан простой пример создания страницы 404 в NextJS.

Создание собственной страницы 404

Если вы когда-либо писали приложение на Next.js, вы, вероятно, знакомы с этой страницей ошибки:

Это хорошо спроектированная и простая страница, но что, если вы хотите добавить свой собственный брендинг и ссылку на нее? Сделать это проще простого. Необходимо просто добовить файл 404.js в ваш каталог pages/.

Вот небольшой пример того, как вы можете это сделать:

// 404.js
import Link from 'next/link'

export default function FourOhFour() {
  return (
    <>
        <h1>404 - Page Not Found</h1>
        <Link href="/">
            <a>
                 Go back home
             </a>
        </Link>
      </>
    )
}

Поскольку эта страница точно такая же, как и любая другая страница в Next.js, вы можете добавить любой стиль, ссылки, и все что захотите. Оформляйте как душе угодно.

Для других ошибок вы можете сделать то же самое с файлом _error.js в каталоге pages/! Ошибка 404 особенная, потому что она всегда генерируется статически, а остальные полагаются на сервер. Обратите внимание! На странице 404 нельзя использовать функции серверного рендеринга. Подробнее читайте в <a href="https://github.com/i18next/next-i18next/issues/677" target="_blank">этом</a> обсуждении.

Оригинал статьи: <a href="https://www.netlify.com/blog/2020/12/08/making-a-custom-404-page-in-next.js/" target="_blank">Making a custom 404 page in Next.js </a>