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 } ``` ఇది లేకుండా, డైనమిక్ రూట్ డిమాండ్ ఆన్-డిమాండ్ (SSR) లో రెండర్ చేయబడుతుంది. **దీనితో**, Next.js బిల్డ్‌లో ప్రతి రిటర్న్ చేసిన పరామితిக్కు స్టాటిక్ పేజీని ముందుగా రూపొందిస్తుంది — మీకు తెలిసిన డైనమిక్ పేజీల సమితికి 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" }]; } ``` ## ఇది ఎందుకు ముఖ్యమైనది ఈ జత డైనమిక్ పేజీల యొక్క పెద్ద సెట్‌లను స్టాటిక్‌గా రూపొందించడానికి ఎలా (బ్లాగ్‌లు, ఇ-కామర్స్ కేటలాగ్‌లు, డాక్స్) ఉన్నత పనితీరు మరియు SEO కోసం, అయితే `dynamicParams` ముందుగానే నిర్మించిన పేజీలకు ఫాల్‌బ్యాక్‌ను నియంత్రిస్తుంది. `generateStaticParams` (ముందుగా నిర్మించాల్సిన పేజీలు) ప్లస్ క్యాచింగ్/`revalidate` ఎంపికలను అర్థం చేసుకోవడం App Router లో డైనమిక్ కంటెంట్‌కు SSG/ISR చేయడం యొక్క ప్రధానమైనది.