Dynamic routes અને generateStaticParams કેવી રીતે કાર્ય કરે છે?

Question

Accepted Answer

**Dynamic routes** કૌંસવાળા ફોલ્ડર નામોનો ઉપયોગ કરે છે વેરિયેબલ URL સેગ્મેન્ટને મેળવવા માટે, અને **`generateStaticParams`** Next.js ને કહે છે કે બીલ્ડ સમયે કયા પૃષ્ઠોને પૂર્વ-રેન્ડર કરવા (SSG/ISR માટે). ## Dynamic સેગ્મેન્ટ ```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 બીલ્ડ સમયે દરેક પરત કરેલા પેરામ માટે એક સ્થિર પૃષ્ઠ પૂર્વ-જનરેટ કરે છે — તમને જાણીતા ડાયનામિક પૃષ્ઠોના સમૂહ માટે 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 કરવાનું મૂળ છે.