Błąd nieprawidłowego parametru w NextJS

W poprzednich lekcjach zwracaliśmy błąd 404 w przypadku, gdy trasa dla danego URL nie została znaleziona. Jednakże, w przypadku trasy dynamicznej może zaistnieć taka sytuacja, gdy trasa istnieje, ale wartość parametru jest nieprawidłowa.

Spójrzmy na przykład. Załóżmy, że mamy trasę następującego rodzaju: /user/:id.

Załóżmy również, że mamy obiekt z użytkownikami:

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

Załóżmy, że chcemy wyświetlać użytkownika po jego identyfikatorze:

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

Oczywiste jest, że identyfikator w URL może być nie dowolny, a tylko jednym z kluczy naszego obiektu. Próba odwołania się pod nieistniejący adres /user/6 powinna prowadzić do tego, że zostanie zwrócony błąd. Poprawmy kod naszego komponentu i wyświetlmy tekst z błędem:

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>;
  }
}

To jednak nie wystarczy. W końcu w tym przypadku odwołujemy się do nieistniejącej strony, a zatem powinniśmy zwrócić status HTTP 404. Robimy to za pomocą specjalnej funkcji notFound, wbudowanej w NextJS.

Zaimportujmy tę funkcję:

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

A teraz będziemy ją wywoływać w przypadku, gdy wartość parametru jest nieprawidłowa:

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

Pełny kod naszego komponentu będzie wyglądał następująco:

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();
  }
}