Грешка за невалиден параметър в NextJS

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

Нека разгледаме пример. Да предположим, че имаме маршрут със следния вид: /user/:id.

Да предположим също, че имаме обект с потребители:

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

Да предположим, че искаме да показваме потребител по неговото id:

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

Очевидно е, че id в 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();
  }
}