Ошибка недопустимого параметра в NextJS

В предыдущих уроках мы отдавали 404 ошибку в том случае, когда роут для данного URL не был найден. Однако, в случае динамического роута может быть такая ситуация, когда роут существует, но значение параметра неправильное.

Давайте посмотрим на примере. Пусть у нас есть маршрут следующего вида: /user/:id.

Пусть у нас также есть объект с юзерами:

app/user/[id]/page.jsxlet users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

Пусть мы хотим показывать юзера по его айди:

app/user/[id]/page.jsxexport default function User({ params }) {
  return <p>
    { users[params.id] }
  </p>;
}

Очевидно, что айди в URL может быть не любым, а только одним из ключей нашего объекта. Попытка обратиться на несуществующий адрес /user/6 должна приводить к тому, что будет выдаваться ошибка. Давайте исправим код нашего компонента и выведем текст с ошибкой:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return <p>
      user not found
    </p>;
  }
}

Этого, однако, недостаточно. Ведь в данном случае мы обращаемся к несуществующей странице, а зачит должны отдать HTTP статус 404. Делается это с помощью специальной функции notFound, встроенной в NextJS.

Давайте импортируем эту функцию:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

А теперь будем вызывать ее в том случае, когда значение параметра некорректно:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return notFound();
  }
}

Полный код нашего компонента будет выглядеть следующим образом:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

let users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

export default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return notFound();
  }
}