Érvénytelen paraméter hiba a NextJS-ben

Az előző leckékben akkor adtunk ki 404 hibát, amikor az adott URL-hez tartozó útvonal nem található. Azonban dinamikus útvonal esetén előfordulhat olyan helyzet, amikor az útvonal létezik, de a paraméter értéke helytelen.

Nézzük ezt egy példán. Tegyük fel, hogy van egy a következő alakú útvonalunk: /user/:id.

Tegyük fel továbbá, hogy van egy objektumunk a felhasználókkal:

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

Tegyük fel, hogy a felhasználót az azonosítója alapján szeretnénk megjeleníteni:

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

Nyilvánvaló, hogy az URL-ben lévő azonosító nem lehet tetszőleges, hanem csak az objektumunk kulcsai közül valamelyik. A nem létező /user/6 címre történő látogatás azzal kellene, hogy járjon, hogy hibaüzenet jelenik meg. Javítsuk a komponensünk kódját, és jelenítsünk meg egy hibaüzenetet:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return <p>
      a felhasználó nem található
    </p>;
  }
}

Ez azonban nem elég. Hiszen ebben az esetben egy nem létező oldalt töltünk be, ami azt jelenti, hogy a 404 HTTP állapotkódot kell visszaadnunk. Ezt a NextJS-be épített notFound speciális függvénnyel tehetjük meg.

Importáljuk ezt a függvényt:

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

Most pedig hívjuk meg akkor, amikor a paraméter értéke helytelen:

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

A komponensünk teljes kódja a következőképpen fog kinézni:

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