GenerateStaticParams for static paths in NextJS - Mini Project: Build & Apply

GenerateStaticParams for Static Paths in Next.js

📖 Scenario: You are building a simple blog website using Next.js. You want to create static pages for each blog post so that the pages load fast and work offline.To do this, you will use the generateStaticParams function to tell Next.js which blog post pages to create ahead of time.

🎯 Goal: Build a Next.js component that uses generateStaticParams to generate static paths for blog posts with IDs 1, 2, and 3.This will create static pages for each blog post at build time.

📋 What You'll Learn

Create a list of blog post IDs as strings

Create a generateStaticParams function that returns an array of objects with id properties

Create a React component that receives params and displays the blog post ID

Export the component as default and export generateStaticParams

💡 Why This Matters

🌍 Real World

Static site generation improves performance and SEO by pre-building pages for known paths.

💼 Career

Understanding generateStaticParams is essential for Next.js developers building fast, scalable websites.

1

Create the blog post IDs array

Create a constant array called postIds with the string values '1', '2', and '3'.

NextJS

# Create the array postIds with '1', '2', '3'
# Your code here

Need a hint?

Use const postIds = ['1', '2', '3']; to create the array.

2

Create the generateStaticParams function

Create an async function called generateStaticParams that returns an array of objects. Each object should have an id property from the postIds array.

NextJS

const postIds = ['1', '2', '3'];

// Create async function generateStaticParams
// Your code here

Need a hint?

Use postIds.map(id => ({ id })) to create the array of objects.

3

Create the blog post page component

Create a React functional component called PostPage that takes { params } as a prop and returns a <div> showing the text Post ID: followed by params.id.

NextJS

const postIds = ['1', '2', '3'];

export async function generateStaticParams() {
  return postIds.map(id => ({ id }));
}

// Create PostPage component
// Your code here

Need a hint?

Use function PostPage({ params }) and return a div with the post ID.

4

Export the component and generateStaticParams

Ensure the PostPage component is exported as default and the generateStaticParams function is exported (already done). Confirm the full code includes the postIds array, the generateStaticParams function, and the PostPage component.

NextJS

const postIds = ['1', '2', '3'];

export async function generateStaticParams() {
  return postIds.map(id => ({ id }));
}

export default function PostPage({ params }) {
  return Post ID: {params.id};
}

// Confirm exports and full code

Need a hint?

Check that all parts are exported and included in the code.