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

Страница 404

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

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

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

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

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

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

Страница 500

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

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

Для настройки страницы 500 вы можете создать файл 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 используется только в продакшене. В режиме разработки вы получите ошибку с указанием места её возникновения.

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

Если вы хотите отобразить встроенную страницу ошибок, вы можете импортировать компонент 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 при прямом доступе через роутинг или рендеринг в пользовательском сервере.