В данной статье показан простой пример создания страницы 404 в NextJS.
Если вы когда-либо писали приложение на Next.js, вы, вероятно, знакомы с этой страницей ошибки:
<img src="https://d33wubrfki0l68.cloudfront.net/1c9c8c01b0e5efecef2bfa5c1d72e1fbf57aaf38/e8af8/v3/img/blog/the404.png" />Это хорошо спроектированная и простая страница, но что, если вы хотите добавить свой собственный брендинг и ссылку на нее? Сделать это проще простого. Необходимо просто добовить файл 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>