Chyba neplatného parametra v NextJS

V predchádzajúcich lekciách sme vracali 404 chybu v prípade, keď route pre danú URL nebol nájdený. Avšak, v prípade dynamického route môže nastať situácia, kedy route existuje, ale hodnota parametra je nesprávna.

Pozrime sa na príklad. Predpokladajme, že máme route nasledovného tvaru: /user/:id.

Predpokladajme tiež, že máme objekt s používateľmi:

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

Predpokladajme, že chceme zobraziť používateľa podľa jeho ID:

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

Je zrejmé, že ID v URL nemôže byť ľubovoľné, ale iba jedno z kľúčov nášho objektu. Pokus o prístup na neexistujúcu adresu /user/6 by mal viesť k tomu, že sa vráti chyba. Opravme kód nášho komponentu a vráťme text s chybou:

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 však nie je dostatočné. Veď v tomto prípade sa pokúšame o prístup k neexistujúcej stránke, a preto by sme mali vrátiť HTTP status 404. To sa vykonáva pomocou špeciálnej funkcie notFound, ktorá je vstavaná v NextJS.

Importujme túto funkciu:

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

A teraz ju zavolajme v prípade, keď je hodnota parametra nekorektná:

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

Úplný kód nášho komponentu bude vyzerať nasledovne:

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