Gabim i parametrit të pavlefshëm në NextJS

Në mësimet e mëparshme ne kthyem 404 gabim në rastin kur rruga për këtë URL nuk u gjet. Megjithatë, në rastin e një rruge dinamike mund të ketë një situatë ku rruga ekziston, por vlera e parametrit është e gabuar.

Le ta shohim me një shembull. Le të themi se kemi një rrugë të formës së mëposhtme: /user/:id.

Le të themi gjithashtu se kemi një objekt me përdorues:

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

Le të themi se duam të shfaqim përdoruesin sipas ID-së së tij:

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

Është e qartë se ID-ja në URL mund të jetë jo çfarëdo, por vetëm një nga çelësat e objektit tonë. Përpjekja për të hyrë në një adresë që nuk ekziston /user/6 duhet të çojë në faktin që do të kthehet një gabim. Le të rregullojmë kodin e komponentit tonë dhe të kthejmë tekstin me gabim:

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

Kjo, megjithatë, nuk mjafton. Në fund të fundit, në këtë rast ne jemi duke u drejtuar në një faqe që nuk ekziston, prandaj duhet të kthejmë statusin HTTP 404. Kjo bëhet duke përdorur funksionin e veçantë notFound, të integruar në NextJS.

Le ta importojmë këtë funksion:

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

Dhe tani do ta thirrim atë në rastin kur vlera e parametrit është e pavlefshme:

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

Kodi i plotë i komponentit tonë do të duket si më poshtë:

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