Errore di parametro non valido in NextJS

Nelle lezioni precedenti abbiamo restituito 404 errore nel caso in cui la route per quell'URL non fosse stata trovata. Tuttavia, nel caso di una route dinamica, può verificarsi una situazione in cui la route esiste, ma il valore del parametro non è corretto.

Diamo un'occhiata a un esempio. Supponiamo di avere una route come la seguente: /user/:id.

Supponiamo inoltre di avere un oggetto con gli utenti:

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

Supponiamo di voler mostrare un utente in base al suo ID:

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

È ovvio che l'ID nell'URL non può essere qualsiasi, ma solo uno delle chiavi del nostro oggetto. Il tentativo di accedere a un indirizzo inesistente /user/6 dovrebbe comportare il rilascio di un errore. Correggiamo il codice del nostro componente e visualizziamo il testo di errore:

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

Tuttavia, questo non è sufficiente. In questo caso, infatti, stiamo accedendo a una pagina inesistente, e quindi dovremmo restituire lo stato HTTP 404. Ciò si fa utilizzando una funzione speciale notFound, integrata in NextJS.

Importiamo questa funzione:

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

E ora la chiameremo nel caso in cui il valore del parametro non sia valido:

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

Il codice completo del nostro componente sarà il seguente:

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