Napaka neveljavnega parametra v NextJS

V prejšnjih lekcijah smo vrnili 404 napako v primeru, ko pot za dani URL ni bila najdena. Vendar pa lahko pri dinamični poti pride do situacije, ko pot obstaja, vendar je vrednost parametra napačna.

Poglejmo si primer. Recimo, da imamo pot naslednje oblike: /user/:id.

Recimo, da imamo tudi objekt z uporabniki:

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

Recimo, da želimo prikazati uporabnika po njegovem ID-ju:

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

Očitno je, da ID v URL-ju ne more biti poljuben, ampak le eden od ključev našega objekta. Poskus dostopa na neobstoječi naslov /user/6 bi moral povzročiti, da se vrne napaka. Popravimo kodo našega komponenta in prikažimo besedilo z napako:

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

Toda to ni dovolj. Kajti v tem primeru dostopamo do neobstoječe strani, kar pomeni, da moramo vrniti HTTP status 404. To naredimo s posebno funkcijo notFound, ki je vgrajena v NextJS.

Uvažajmo to funkcijo:

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

In sedaj jo bomo klicali v tistem primeru, ko je vrednost parametra neveljavna:

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

Popolna koda našega komponenta bo videti takole:

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