getStaticPaths

    When you export a function called getStaticPaths (Static Site Generation) from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by getStaticPaths.

    The getStaticPaths API reference covers all parameters and props that can be used with getStaticPaths.

    • The data comes from a headless CMS
    • The data comes from a database
    • The data comes from the filesystem
    • The data can be publicly cached (not user-specific)
    • The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance

    getStaticPaths will only run during build in production, it will not be called during runtime. You can validate code written inside getStaticPaths is removed from the client-side bundle with this tool.

    • getStaticProps runs during next build for any paths returned during build
    • getStaticProps runs in the background when using fallback: true
    • getStaticProps is called before initial render when using fallback: blocking
    • You cannot use getStaticPaths with
    • You can export getStaticPaths from a Dynamic Route that also uses getStaticProps
    • You cannot export getStaticPaths from non-page file (e.g. your components folder)
    • You must export getStaticPaths as a standalone function, and not a property of the page component

    Runs on every request in development

    In development (next dev), getStaticPaths will be called on every request.

    You can defer generating all pages on-demand by returning an empty array for paths. This can be especially helpful when deploying your Next.js application to multiple environments. For example, you can have faster builds by generating all pages on-demand for previews (but not production builds). This is helpful for sites with hundreds/thousands of static pages.

    1. // pages/posts/[id].js
    3. export async function getStaticPaths() {
    4.   // When this is true (in preview environments) don't
    5.   // prerender any static pages
    6.   // (faster builds, but slower initial page load)
    7.   if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    9.       paths: [],
    10.       fallback: 'blocking',
    11.     }
    13.   // Call an external API endpoint to get posts
    14.   const res = await fetch('https://.../posts')
    15.   const posts = await res.json()
    17.   // Get the paths we want to prerender based on posts
    18.   // In production environments, prerender all pages
    19.   // (slower builds, but faster initial page load)
    20.   const paths = posts.map((post) => ({
    21.     params: { id: post.id },
    22.   }))
    24.   // { fallback: false } means other routes should 404
    26. }

    For more information on what to do next, we recommend the following sections: