Eroare de parametru invalid în NextJS

În lecțiile anterioare am returnat 404 eroare în cazul în care ruta pentru URL-ul dat nu a fost găsită. Cu toate acestea, în cazul unei rute dinamice poate exista o situație în care ruta există, dar valoarea parametrului este incorectă.

Să ne uităm la un exemplu. Să presupunem că avem o rută de următoarea formă: /user/:id.

Să presupunem că avem și un obiect cu utilizatori:

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

Să presupunem că vrem să afișăm utilizatorul după id-ul său:

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

Evident, id-ul din URL poate fi nu oricare, ci doar unul dintre cheile obiectului nostru. Încercarea de a accesa o adresă inexistentă /user/6 ar trebui să conducă la faptul că va fi returnată o eroare. Să corectăm codul componentelor noastre și să afișăm textul cu eroarea:

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

Acest lucru, totuși, nu este suficient. La urma urmei, în acest caz accesăm o pagină inexistentă, ceea ce înseamnă că trebuie să returnăm statusul HTTP 404. Acest lucru se face folosind o funcție specială notFound, încorporată în NextJS.

Să importăm această funcție:

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

Și acum o vom apela în cazul în care valoarea parametrului este incorectă:

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

Codul complet al componentei noastre va arăta în felul următor:

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