ข้อผิดพลาดพารามิเตอร์ไม่ถูกต้องใน NextJS

ในบทเรียนก่อนหน้านี้เราได้ส่งคืน ข้อผิดพลาด 404 ในกรณีที่ ไม่พบเส้นทาง (route) สำหรับ 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>
      ไม่พบผู้ใช้
    </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();
  }
}