როგორ მუშაობს დინამიური მარშrutები და generateStaticParams?

Question

Accepted Answer

**დინამიური მარშruტები** იყენებენ ფრჩხილებში ჩასმულ ფოლდერების სახელებს URL-ის ცვლადი სეგმენტების დასაკომპილებლად, ხოლო **`generateStaticParams`** ეუბნება Next.js-ს, რომელი ამ გვერდებიდან წინასწარ რენდერდეს 빌드დროს (SSG/ISR-ისთვის). ## დინამიური სეგმენტი ```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 } ``` ამის გარეშე, დინამიური მარშrutი რენდერდება მოთხოვნის მიხედვით (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` კონტროლირებს fallback-ს გვერდებისთვის, რომლებიც წინასწარ აგებული არ არის. `generateStaticParams`-ის გაგება (რომელი გვერდები წინასწარ აბილდეთ) პლუს caching/`revalidate` ვარიანტები არის App Router-ში დინამიური კონტენტის SSG/ISR-ის გაკეთების ქვესიტემა.