Next.js - getStaticPaths Function

In Next.js getStaticPaths() function is used fetch data in dynamic routes at the build time. In this chapter we will learn, what is getStaticPaths function, how to use it, syntax and example usage of getStaticPaths method.

Next.js getStaticPaths Method

In Next.js, getStaticPaths() is a data-fetching method used with getStaticProps() to generate dynamic routes at build time. This method is used in static site generation for creating HTML pages at the time of building application in the production.

Syntax

Following is syntax of getStaticPaths() function.

export async function getStaticPaths() {
    return {
      paths: [
        { params: { id: '1' } }, // Define a dynamic route like /posts/1
        { params: { id: '2' } }, 
      ],
      fallback: false, // Determines fallback behavior
    };
}

• Paths: An array of objects, where each object represents a dynamic route.
• fallback: Define what happen when user visit a route that is not defined.

Example of Using getStaticPaths in Next.js

In the below example code, we created a dynamic page using dynamic routes in Next.js. Then we used 'getStaticPaths' function to use dynamic id that are fetched form server. See the code below.

// page/product/[id]/index.tsx file

// This function gets called at build time
export async function getStaticPaths() {
    // Call an external API endpoint to get product ids
    const res = await fetch('https://link/to/api');
    const products = await res.json();

    // Get the paths we want to pre-render based on products
    const paths = products.map((product) => ({
        params: { id: product.id },
    }));

    // We'll pre-render only these paths at build time.
    return { paths, fallback: false };
}

// This also gets called at build time
export async function getStaticProps({ params }) {
    // params contains the product `id`.
    // If the route is like /product/1, then params.id is 1
    const res = await fetch(`https://.../product/${params.id}`);
    const product = await res.json();
    
    // Pass product data to the page via props
    return { props: { product } };
}

// Page component to display the product details
export default function ProductPage({ product }) {
  return (
    <div>
      <h1>Product {product.id}</h1>
      <p>This is the product page for item {product.id}</p>
      <p>Title: {product.title}</p>
    </div>
  );
}

Output

This is output for dynamic routing. You can see that the title of product changes based on product ID fetched from server.