Static Generation

What this module covers

4 steps · Next.js

1. Step 1. Static Generation (SSG)

   Pages are built at npm run build time and served as static HTML — ultra-fast, CDN-cacheable. // Server Component — async by default export default async function ProductsPage() { const res = await fetch('https://api.example.com/products', { next: { revalidate: 3600 } // ISR: rebuild hourly }); const products = await res.json(); return <ProductList items={products} />; } // app/blog/[slug]/page.jsx export async function generateStaticParams() { const posts = await getPosts(); return posts.map(p => ({ slug: p.slug })); } Since this fetches real data at build time on a real server, the live preview below shows a stand-in instead of executing the fetch — use Check Code to verify the structure.

   Next.js calls this function once at build time and pre-renders one static page per object it returns — this is how a single [slug]/page.jsx file becomes many real static pages. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does generateStaticParams return an array of param objects?

2. Step 2. Quiz: Static Generation (SSG)

   Answer these questions about static generation and ISR.

   SSG builds HTML once at build time; generateStaticParams tells Next.js which dynamic values to pre-render; revalidate enables ISR. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Answer the quiz below.

3. Step 3. Static Blog Post Params

   Build a statically generated blog that pre-renders 5 posts at build time using generateStaticParams, sourced from a local array.

   Mapping the local posts array directly keeps this fully static — no network call needed at build time, just a transform of data that's already available. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does generateStaticParams map all 5 posts to param objects?

4. Step 4. Mini project: Static Generation

   Build a statically generated blog that pre-renders 5 posts at build time using generateStaticParams, sourced from a local array. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   Mapping the local posts array directly keeps this fully static — no network call needed at build time, just a transform of data that's already available. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does generateStaticParams map all 5 posts to param objects?