Dynamic routes และ generateStaticParams ทำงานอย่างไร

Question

Accepted Answer

**Dynamic routes** ใช้ชื่อโฟลเดอร์ที่มีวงเล็บเพื่อจับคู่ส่วน URL ที่เปลี่ยนแปลง และ **`generateStaticParams`** บอก Next.js ว่าเพจใดที่จะต้องเรนเดอร์ล่วงหน้าในเวลาสร้าง (สำหรับ SSG/ISR) ## Dynamic segment ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default async function Post({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // params.slug is the URL value return

{post.title}

; } ``` ## generateStaticParams — เรนเดอร์เพจที่เฉพาะเจาะจงล่วงหน้า ```tsx // Tell Next.js the list of slugs to build statically export async function generateStaticParams() { const posts = await getAllPosts(); return posts.map(post => ({ slug: post.slug })); // → builds /blog/post-1, /blog/post-2, ... as static HTML at build time } ``` โดยไม่สิ่งนี้ dynamic route จะเรนเดอร์ตามความต้องการ (SSR) **ด้วย** สิ่งนี้ Next.js จะสร้างเพจแบบ static ล่วงหน้าสำหรับแต่ละพารามิเตอร์ที่ส่งกลับมาในเวลาสร้าง — ทำให้คุณได้ความเร็วของ SSG สำหรับชุดเพจ dynamic ที่รู้จัก (บทความ blog ทุกรายการ สินค้าทุกรายการ) ## การจัดการพารามิเตอร์ที่ไม่อยู่ในรายการ ```tsx // what happens for a slug NOT returned by generateStaticParams? export const dynamicParams = true; // (default) render unknown slugs on-demand (ISR-like) // export const dynamicParams = false; // return 404 for any slug not pre-built ``` สิ่งนี้ช่วยให้คุณสร้างเพจที่ใหญ่ที่สุด/ใช้บ่อยที่สุดล่วงหน้า และยังคงให้บริการ (หรือ 404) ส่วนหางยาว ## Catch-all และพารามิเตอร์ที่ซ้อนกัน ```text app/shop/[...categories]/page.tsx → /shop/a/b/c (params.categories = ['a','b','c']) app/[lang]/[slug]/page.tsx → multiple params: { lang, slug } ``` ```tsx export async function generateStaticParams() { return [{ lang: "en", slug: "about" }, { lang: "vi", slug: "about" }]; } ``` ## เหตุใดจึงมีความสำคัญ คู่นี้คือวิธีที่คุณสร้างชุดขนาดใหญ่ของเพจ dynamic แบบ static (บล็อก แคตตาล็อกอีคอมเมิร์ซ เอกสาร) เพื่อความเร็วและ SEO สูงสุด ขณะที่ `dynamicParams` ควบคุม fallback สำหรับเพจที่ไม่ได้สร้างไว้ล่วงหน้า การทำความเข้าใจ `generateStaticParams` (เพจใดที่จะสร้างล่วงหน้า) บวกกับตัวเลือกการแคช/`revalidate` เป็นหัวใจของการทำ SSG/ISR สำหรับเนื้อหา dynamic ใน App Router