Dynamic routes மற்றும் generateStaticParams எவ்வாறு செயல்படுகிறது?

Question

Accepted Answer

**Dynamic routes** மாறிக்கூடிய URL பிரிவுகளுடன் பொருந்த அடைப்புப்புள்ளி கொண்ட கோப்புறை பெயர்களைப் பயன்படுத்துகிறது, மற்றும் **`generateStaticParams`** பிற்பாக (SSG/ISR) எந்த பக்கங்களை முன்-ஒளிபரப்ப வேண்டும் என்பதை Next.js க்கு கூறுகிறது. ## 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 பிற்பாக ஒவ்வொரு திரும்பிய பரிமாணத்திற்கும் ஒரு நிலையான பக்கத்தை உৎபாதித்து — உங்களுக்கு ஒரு அறியப்பட்ட dynamic பக்கங்களின் தொகுப்பிற்கு SSG இன் வேகத்தை வழங்குகிறது (ஒவ்வொரு வலைப்பதிவு பொস்ட், ஒவ்வொரு பொருள்). ## பட்டியலில் இல்லாத பரிமாணங்களைக் கையாளுதல் ```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 பக்கங்களின் தொகுப்புகளை (வலைப்பதிவுகள், ஈ-வர்த்தக பட்டியல்கள், ஆவணங்கள்) சிறந்த செயல்திறன் மற்றும் SEO க்கான நிலையான முறையில் உৎபாதிப்பது, அதே சமயம் `dynamicParams` முறையில் உৎபாதிக்கப்படாத பக்கங்களுக்கான fallback ஐ கட்டுப்படுத்துகிறது. `generateStaticParams` (முறையில் உৎபாதிக்க வேண்டிய பக்கங்கள்) மற்றும் caching/`revalidate` விருப்பங்களைப் புரிந்துகொள்வது App Router இல் dynamic விஷயத்திற்கான SSG/ISR செய்வதன் அடிப்படையாகும்.