Q10: What is generateStaticParams and how does it replace getStaticPaths?
In the App Router, generateStaticParams replaces the legacy getStaticPaths. Used inside dynamic routes ([id]), it returns an array of segment objects to pre-render routes at build time (SSG). Uncompiled routes fallback to dynamic on-demand rendering.
generateStaticParams Implementation
// app/posts/[id]/page.js
export async function generateStaticParams() {
const posts = await fetch('https://api.com/posts').then(res => res.json());
return posts.map(post => ({ id: String(post.id) }));
}
export default async function PostPage({ params }) {
const { id } = await params;
return <h1>Post ID: {id}</h1>;
}💡 generateStaticParams outputs route parameters pre-rendered statically during build time.
Key Takeaways
- Pre-renders dynamic routes (
[id]) statically during build time. - Combines with
export const dynamicParams = falseto return 404 for non-generated paths.
Knowledge Check
What is the App Router equivalent of the legacy Pages Router getStaticPaths function?