Πώς λειτουργούν οι δυναμικές διαδρομές και το generateStaticParams;

Question

Accepted Answer

**Οι δυναμικές διαδρομές** χρησιμοποιούν ονόματα φακέλων σε αγκύλες για να ταιριάζουν μεταβλητά τμήματα 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 } ``` Χωρίς αυτό, μια δυναμική διαδρομή αποδίδεται κατά παραγγελία (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` (ποιες σελίδες πρέπει να προ-δημιουργηθούν) συν τις επιλογές αποθήκευσης/`revalidate` είναι το κέντρο της εκτέλεσης SSG/ISR για δυναμικό περιεχόμενο στο App Router.