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

Страница 404

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

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

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

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

pages/404.js

export default function Custom404() {
  return <h1>404 - Страница не найдена</h1>
}

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

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

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

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

pages/500.js

export default function Custom500() {
  return <h1>500 - Произошла ошибка на сервере</h1>
}

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

Расширенная настройка страницы ошибок

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

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `Произошла ошибка ${statusCode} на сервере`
        : 'Произошла ошибка на клиенте'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

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

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

Если вы хотите отобразить встроенную страницу ошибки, вы можете импортировать компонент 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.js: {stars}</div>
}

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

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

Ограничения

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