Как работать с ошибками в Next.js в контексте SSR и маршрутизации

1️⃣ Как кратко ответить

В Next.js для обработки ошибок в SSR и маршрутизации используются специальные страницы ошибок, такие как pages/_error.js для кастомизации ошибок 404 и 500. Для SSR можно использовать блоки try-catch в методах getServerSideProps и getInitialProps, чтобы перехватывать и обрабатывать ошибки. Для маршрутизации можно использовать next/router для управления переходами и обработки ошибок при навигации.

2️⃣ Подробное объяснение темы

В Next.js работа с ошибками в контексте серверного рендеринга (SSR) и маршрутизации является важной частью создания надежных и устойчивых приложений. Рассмотрим, как это можно сделать.

Обработка ошибок в SSR

Когда мы говорим о SSR в Next.js, мы имеем в виду рендеринг страниц на сервере перед отправкой их клиенту. Это позволяет улучшить SEO и время загрузки страницы. Однако, при выполнении серверного кода могут возникать ошибки, которые нужно корректно обрабатывать.

Использование getServerSideProps

getServerSideProps — это функция, которая позволяет извлекать данные на сервере перед рендерингом страницы. Если в этой функции возникает ошибка, её можно обработать с помощью блока try-catch.

export async function getServerSideProps(context) {
  try {
    // Попытка получить данные с API
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
​
    // Возвращаем данные в качестве пропсов
    return { props: { data } };
  } catch (error) {
    // Обработка ошибки: можно вернуть специальный объект с ошибкой
    return { props: { error: 'Failed to fetch data' } };
  }
}

• fetch — выполняет запрос к API.
• try-catch — перехватывает ошибки, возникающие при выполнении запроса.
• return { props: { error: 'Failed to fetch data' } } — возвращает объект с ошибкой, который можно использовать в компоненте для отображения сообщения об ошибке.

Использование getInitialProps

Для классовых компонентов или страниц, которые используют getInitialProps, обработка ошибок также может быть выполнена с помощью try-catch.

MyPage.getInitialProps = async (context) => {
  try {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    return { data };
  } catch (error) {
    return { error: 'Failed to fetch data' };
  }
};

Обработка ошибок маршрутизации

Next.js предоставляет мощные инструменты для маршрутизации, и иногда при навигации могут возникать ошибки. Для управления маршрутизацией и обработки ошибок можно использовать next/router.

Использование next/router

next/router позволяет программно управлять маршрутизацией и обрабатывать ошибки, которые могут возникнуть при навигации.

import { useRouter } from 'next/router';
​
function MyComponent() {
  const router = useRouter();
​
  const handleNavigation = async () => {
    try {
      // Программная навигация
      await router.push('/another-page');
    } catch (error) {
      console.error('Failed to navigate:', error);
    }
  };
​
  return (
    <button onClick={handleNavigation}>
      Go to another page
    </button>
  );
}

• useRouter — хук для доступа к объекту маршрутизатора.
• router.push('/another-page') — инициирует переход на другую страницу.
• try-catch — обрабатывает ошибки, которые могут возникнуть при навигации.

Кастомизация страниц ошибок

Next.js позволяет создавать кастомные страницы ошибок, такие как pages/_error.js, для обработки ошибок 404 и 500.

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;

• Error — компонент, отображающий сообщение об ошибке.
• getInitialProps — определяет статус ошибки (например, 404 или 500) и передает его в компонент.

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