Памылка недапушчальнага параметра ў 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();
  }
}