Discuss briefly getStaticPaths

Question

Accepted Answer

`getStaticPaths` is a special async function used alongside `getStaticProps` in the Next.js Pages Router (`pages` directory) for dynamic routes (like `pages/blog/[slug].js`). It specifies which path parameters should be pre-rendered as static HTML at build time. The function returns an array of possible parameter values, and Next.js then calls `getStaticProps` for each path to generate the corresponding static page. Like `getStaticProps`, this function is **not available in the App Router**, where it has been replaced by `generateStaticParams`. // pages/blog/[slug].js // This file handles dynamic routes like /blog/hello-world export default function BlogPost({ post }) { return (

{post.title}

{post.content}

); } // This runs at build time to determine which pages to generate export async function getStaticPaths() { // Fetch all blog posts from your CMS or API const res = await fetch('https://api.example.com/posts'); const posts = await res.json(); // Generate paths for each blog post const paths = posts.map((post) => ({ params: { slug: post.slug }, })); // Return paths and fallback behavior return { paths, fallback: false, // 404 for any paths not returned here }; } // This runs for each path returned by getStaticPaths export async function getStaticProps({ params }) { const res = await fetch(`https://api.example.com/posts/${params.slug}`); const post = await res.json(); return { props: { post }, }; } paths (required): An array of objects that define which paths to pre-render. Each object must have a `params` property containing the dynamic route parameters (e.g., `{ params: { slug: 'hello-world' } }`) . fallback (required): Controls what happens for paths not returned in `paths`. Can be `false`, `true`, or `'blocking'` . For catch-all routes like `pages/[...slug].js`, params should be an array: `{ params: { slug: ['a', 'b'] } }` for the path `/a/b` . The `fallback` option is crucial for balancing build time and user experience. With `fallback: false`, any paths not returned by `getStaticPaths` will result in a 404 page, ideal for sites with a fixed set of content. With `fallback: true`, a fallback version of the page is shown immediately while the full page is generated in the background, after which it's cached. With `fallback: 'blocking'`, users wait for the server to generate the page before seeing anything, useful for SEO where you don't want a loading state but need on-demand generation . // pages/products/[id].js export async function getStaticPaths() { const res = await fetch('https://api.example.com/products?popular=true'); const popularProducts = await res.json(); // Only pre-render popular products at build time const paths = popularProducts.map((product) => ({ params: { id: product.id }, })); return { paths, // Option 1: Show 404 for non-pre-rendered paths // fallback: false, // Option 2: Show loading state, then generate in background fallback: true, // Option 3: Wait for server to generate before showing page // fallback: 'blocking', }; } export async function getStaticProps({ params }) { const res = await fetch(`https://api.example.com/products/${params.id}`); const product = await res.json(); return { props: { product }, revalidate: 3600, // ISR: update every hour }; } Build Time Impact: The more paths you return, the longer your build takes. For large sites, use fallback strategies and pre-render only popular content . Context Parameter: `getStaticPaths` receives a `context` object with properties like `locale` for i18n routing, allowing you to generate paths for multiple locales . Not Available in Client: `getStaticPaths` runs only during build or on-demand generation, never in the browser . Required for SSG with Dynamic Routes: You must export `getStaticPaths` from a dynamic page if you're using `getStaticProps` . App Router Alternative: In the App Router, use `generateStaticParams` which returns an array of params objects without needing to specify fallback separately . In the App Router, `getStaticPaths` is replaced by `generateStaticParams`, which is simpler to use. Instead of returning a `paths` array with nested `params` objects, you return a flat array of parameter objects directly. Fallback behavior is handled separately with `dynamicParams` export. This makes the API more intuitive while providing the same functionality . // app/blog/[slug]/page.tsx (App Router version) export async function generateStaticParams() { const posts = await fetch('https://api.example.com/posts').then(res => res.json()); // Return flat array of params - no nested 'params' property return posts.map((post) => ({ slug: post.slug, })); } // Fallback behavior - equivalent to fallback: true export const dynamicParams = true; export default async function BlogPost({ params }: { params: { slug: s

Discuss briefly getStaticPaths

getStaticPaths is a Pages Router function that defines which dynamic routes should be pre-rendered as static pages at build time

Discuss briefly getStaticPaths

getStaticPaths is a Pages Router function that defines which dynamic routes should be pre-rendered as static pages at build time

Scenario Questions

Follow-up Questions