Greška nevažećeg parametra u NextJS-u

U prethodnim lekcijama vraćali smo grešku 404 u slučaju kada ruta za dati URL nije pronađena. Međutim, u slučaju dinamičke rute može se javiti situacija kada ruta postoji, ali je vrednost parametra pogrešna.

Hajde da pogledamo primer. Neka imamo rutu sledećeg oblika: /user/:id.

Neka imamo takođe objekat sa korisnicima:

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

Recimo da želimo da prikažemo korisnika po njegovom ID-u:

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

Očigledno je da ID u URL-u ne može biti bilo koji, već samo jedan od ključeva našeg objekta. Pokušaj pristupa na nepostojeću adresu /user/6 trebalo bi da dovede do toga da se vrati greška. Hajde da ispravimo kod našeg komponenta i vratimo tekst sa greškom:

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

Ovo, međutim, nije dovoljno. Jer u ovom slučaju pristupamo stranici koja ne postoji, a to znači da moramo da vratimo HTTP status 404. To se radi pomoću specijalne funkcije notFound, ugrađene u NextJS.

Hajde da importujemo tu funkciju:

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

A sada ćemo je pozivati u slučaju kada vrednost parametra nije ispravna:

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

Pun kod našeg komponenta će izgledati na sledeći način:

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