Пользовательские ошибки

Страница 404

К странице 404 могут обращаться очень часто. Рендеринг страницы ошибки на сервере для каждого посещения увеличивает нагрузку на сервер Next.js. Это может привести к увеличению затрат и замедлению работы.

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

Настройка страницы 404

Чтобы создать пользовательскую страницу 404, можно создать файл pages/404.js. Этот файл генерируется статически во время сборки.

export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

Важно знать: Вы можете использовать getStaticProps на этой странице, если вам нужно получить данные во время сборки.

Страница 500

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

Настройка страницы 500

Чтобы настроить страницу 500, можно создать файл pages/500.js. Этот файл генерируется статически во время сборки.

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

Важно знать: Вы можете использовать getStaticProps на этой странице, если вам нужно получить данные во время сборки.

Более продвинутая настройка страницы ошибок

Ошибки 500 обрабатываются как на стороне клиента, так и на стороне сервера компонентом Error. Если вы хотите его переопределить, определите файл pages/_error.js и добавьте следующий код:

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}
 
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}
 
export default Error

pages/_error.js используется только в продакшене. В режиме разработки вы получите ошибку со стеком вызовов, чтобы узнать, откуда произошла ошибка.

Использование встроенной страницы ошибок

Если вы хотите отобразить встроенную страницу ошибок, вы можете импортировать компонент Error.

import Error from 'next/error'
 
export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.status
  const json = await res.json()
 
  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}
 
export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }
 
  return <div>Next stars: {stars}</div>
}

Компонент Error также принимает title в качестве свойства, если вы хотите передать текстовое сообщение вместе с statusCode.

Если у вас есть пользовательский компонент Error, убедитесь, что импортирован именно он. next/error экспортирует компонент по умолчанию, используемый Next.js.

Ограничения

• Error в настоящее время не поддерживает методы извлечения данных Next.js, такие как методы извлечения данных, например, getStaticProps или getServerSideProps.
• _error, как и _app, является зарезервированным путём. _error используется для определения настраиваемых макетов и поведения страниц ошибок. /_error будет отображать 404 при прямом доступе через маршрутизацию или рендеринг в настраиваемом сервере.