Ugyldig parameterfejl i NextJS

I tidligere lektioner udleverede vi 404 fejl i det tilfælde, hvor ruten for den givne URL ikke blev fundet. Men i tilfælde af en dynamisk rute kan der opstå en situation, hvor routen eksisterer, men parameterværdien er forkert.

Lad os se på et eksempel. Antag, at vi har en rute af følgende form: /user/:id.

Antag også, at vi har et objekt med brugere:

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

Antag, at vi ønsker at vise brugeren ud fra deres id:

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

Det er indlysende, at id'et i URL'en ikke kan være hvad som helst, men kun en af nøglerne i vores objekt. Et forsøg på at tilgå en ikke-eksisterende adresse /user/6 bør føre til, at der udløses en fejl. Lad os rette koden i vores komponent og udskrive en fejltekst:

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

Dette er imidlertid ikke tilstrækkeligt. For i dette tilfælde tilgår vi en ikke-eksisterende side, og bør derfor returnere HTTP-statuskoden 404. Dette gøres ved hjælp af en speciel funktion notFound, indbygget i NextJS.

Lad os importere denne funktion:

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

Og nu vil vi kalde den i det tilfælde, hvor parameterværdien er ugyldig:

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

Den fulde kode for vores komponent vil se ud som følger:

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