Chyba neplatného parametru v NextJS

V předchozích lekcích jsme vraceli 404 chybu v případě, kdy route pro danou URL nebyl nalezen. Avšak v případě dynamické route může nastat situace, kdy route existuje, ale hodnota parametru je nesprávná.

Podívejme se na příklad. Předpokládejme, že máme route následujícího typu: /user/:id.

Předpokládejme také, že máme objekt s uživateli:

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

Předpokládejme, že chceme zobrazit uživatele podle jeho id:

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

Je zřejmé, že id v URL nemůže být libovolné, ale pouze jedno z klíčů našeho objektu. Pokus o přístup na neexistující adresu /user/6 by měl vést k tomu, že bude vrácena chyba. Pojďme opravit kód naší komponenty a vrátit 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 nestačí. V tomto případě se totiž jedná o neexistující stránku, a tedy bychom měli vrátit HTTP status 404. To se provádí pomocí speciální funkce notFound, vestavěné v NextJS.

Pojďme importovat tuto funkci:

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

A nyní ji budeme volat v případě, kdy je hodnota parametru 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 naší komponenty bude vypadat následovně:

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