NextJS में अमान्य पैरामीटर त्रुटि

पिछले पाठों में, हम 404 त्रुटि तब देते थे, जब उस URL के लिए रूट नहीं मिलता था। हालाँकि, डायनामिक रूट के मामले में ऐसी स्थिति हो सकती है जहाँ रूट मौजूद तो हो, लेकिन पैरामीटर का मान गलत हो।

आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास निम्नलिखित प्रकार का रूट है: /user/:id.

मान लीजिए कि हमारे पास उपयोगकर्ताओं की एक वस्तु भी है:

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

मान लीजिए कि हम उपयोगकर्ता को उसकी आईडी से दिखाना चाहते हैं:

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

जाहिर है, 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 देना चाहिए। यह NextJS में बनी एक विशेष फ़ंक्शन notFound के द्वारा किया जाता है।

आइए इस फ़ंक्शन को इम्पोर्ट करें:

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