Ogiltigt parameterfel i NextJS

I tidigare lektioner har vi returnerat 404 fel i de fall där ingen rutt för den angivna URL:en hittades. Men för dynamiska rutter kan det uppstå en situation där rutten finns, men parametervärdet är felaktigt.

Låt oss titta på ett exempel. Antag att vi har en rutt med följande format: /user/:id.

Antag också att vi har ett objekt med användare:

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

Antag att vi vill visa användaren utifrån deras id:

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

Uppenbarligen kan id:t i URL:en inte vara vad som helst, utan bara en av nycklarna i vårt objekt. Ett försök att besöka en adress som inte finns, som /user/6, bör leda till att ett fel returneras. Låt oss rätta till koden i vår komponent och visa ett felmeddelande:

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

Detta är dock inte tillräckligt. För i det här fallet försöker vi komma åt en sidan som inte finns, vilket betyder att vi bör returnera HTTP-status 404. Detta görs med hjälp av en speciell funktion notFound, inbyggd i NextJS.

Låt oss importera denna funktion:

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

Och nu kommer vi att anropa den i de fall då parametervärdet är ogiltigt:

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

Den fullständiga koden för vår komponent kommer att se ut så här:

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