GenerateStaticParams for static paths in NextJS

Introduction

GenerateStaticParams helps Next.js know which pages to build ahead of time. It makes your site faster by creating pages before users visit.

You have a blog with fixed posts and want to build each post page before users visit.

You want to create product pages for an online store with known product IDs.

You have a list of user profiles that rarely change and want fast loading pages.

You want to improve SEO by pre-building pages with static content.

Syntax

NextJS

export async function generateStaticParams() {
  return [
    { id: '1' },
    { id: '2' },
    { id: '3' }
  ];
}

This function returns an array of objects. Each object represents a path parameter.

Next.js uses these to build static pages at build time.

Examples

Generates static paths for pages with slugs 'welcome' and 'about'.

NextJS

export async function generateStaticParams() {
  return [
    { slug: 'welcome' },
    { slug: 'about' }
  ];
}

Uses an array and maps it to create static params dynamically.

NextJS

export async function generateStaticParams() {
  const ids = ['a', 'b', 'c'];
  return ids.map(id => ({ id }));
}

Sample Program

This Next.js page uses generateStaticParams to pre-build pages for post IDs 1 and 2. When you visit /post/1 or /post/2, the page shows the post ID.

NextJS

import React from 'react';

export async function generateStaticParams() {
  return [
    { id: '1' },
    { id: '2' }
  ];
}

export default function Page({ params }) {
  return <h1>Post ID: {params.id}</h1>;
}

Important Notes

Make sure the keys in the returned objects match your dynamic route segment names.

generateStaticParams runs only at build time, so it cannot use request-specific data.

Summary

generateStaticParams tells Next.js which pages to build before users visit.

It returns an array of objects with route parameters.

This improves page speed and SEO for static content.