Грешка недозвољеног параметра у NextJS

У претходним лекцијама враћали смо 404 грешку у случају када рута за дати URL није пронађена. Међутим, у случају динамичке руте може се десити ситуација да рута постоји, али је вредност параметра погрешна.

Погледајмо на примеру. Претпоставимо да имамо руту следећег облика: /user/:id.

Претпоставимо да такође имамо објекат са корисницима:

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

Претпоставимо да желимо да прикажемо корисника преко његовог id-ја:

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

Очигледно је да id у URL-у не може бити било који, већ само један од кључева нашег објекта. Покушај приступа на непостојећу адресу /user/6 треба да доведе до тога да се прикаже грешка. Исправимо код наше компоненте и прикажимо текст са грешком:

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

Међутим, ово није довољно. Јер у овом случају приступамо непостојећој страници, а затим треба да вратимо HTTP статус 404. Ово се ради помоћу специјалне функције notFound, уграђене у NextJS.

Импортујмо ову функцију:

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

А сада ћемо је позвати у том случају када вредност параметра није исправна:

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

Пуни код наше компоненте ће изгледати на следећи начин:

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