How do we generate static pages in a NextJS project with the app router?

Question

Accepted Answer

Next.js with the App Router offers two primary approaches for static page generation. You can either statically export your entire application as HTML files for deployment on any static hosting service, or you can use Static Site Generation (SSG) with `generateStaticParams` to pre-render dynamic routes at build time while keeping your application server-rendered. **The App Router automatically handles static optimization without requiring special data-fetching methods like `getStaticProps` from the Pages Router.** // next.config.js or next.config.ts import type { NextConfig } from 'next'; const nextConfig: NextConfig = { output: 'export', // This enables static HTML export // Optional: Configure trailing slashes // trailingSlash: true, // Optional: Change output directory (default is 'out') // distDir: 'dist', // Image optimization requires a custom loader in static export images: { unoptimized: true, // Or use a custom loader }, }; export default nextConfig; // After running `npm run build`, Next.js generates an 'out' folder // with HTML/CSS/JS assets ready for static hosting When you set `output: 'export'` in your Next.js configuration, running `next build` generates a complete static version of your site in an `out` folder. With this approach, Server Components are executed at build time, and their output is baked into static HTML files. **Client Components still hydrate in the browser.** This means you can deploy your Next.js app to any static hosting service like Nginx, Apache, or AWS S3 without needing a Node.js server. // app/page.tsx - This runs at build time with static export export default async function Page() { // This fetch runs during `next build`, not at request time const res = await fetch('https://api.example.com/data'); const data = await res.json(); // The HTML is generated once and saved to disk return (

Statically Generated Page

{JSON.stringify(data, null, 2)}

); } **Static export disables features that require a server:** API Routes (though Route Handlers with GET can be used), middleware, server actions, and on-demand ISR. **Dynamic routes without `generateStaticParams` will not work because there's no server to generate them at request time.** Image optimization also requires either setting `unoptimized: true` or providing a custom loader for a service like Cloudinary. // app/blog/[slug]/page.tsx // This creates static pages for each blog post at build time export async function generateStaticParams() { // Fetch all blog posts at build time const posts = await fetch('https://api.example.com/posts').then(res => res.json()); // Return an array of params - one object for each static page return posts.map((post) => ({ slug: post.slug, })); // Example output: [{ slug: 'hello-world' }, { slug: 'nextjs-guide' }] } export default async function BlogPost({ params }: { params: { slug: string } }) { // This page is pre-rendered at build time for each slug from generateStaticParams const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json()); return (

{post.title}

{post.content}

); } At build time, Next.js calls generateStaticParams to get an array of possible route parameters For each set of params returned, Next.js pre-renders the page by executing the Server Component Pages are generated as static HTML files (e.g., /blog/hello-world.html) that can be served instantly Any params not returned by generateStaticParams will result in a 404 or can be handled with fallback options This approach works with both static export and server-rendered applications **You can combine `generateStaticParams` with Incremental Static Regeneration (ISR) by setting a `revalidate` option** in your fetch requests or route segment config. This allows you to pre-render the most critical pages at build time while generating others on-demand when first requested. For pages not included in `generateStaticParams`, set `export const dynamicParams = true` to allow them to be generated at request time and cached for subsequent visits. // app/products/[id]/page.tsx // Static generation with fallback and revalidation export const revalidate = 3600; // Revalidate every hour // or use fetch with { next: { revalidate: 3600 } } export const dynamicParams = true; // Allow generating non-pre-rendered paths on-demand export async function generateStaticParams() { // Only pre-render the top 10 products at build time const products = await fetch('https://api.example.com/products?limit=10').then(res => res.json()); return products.map((product) => ({ id: product.id, })); } export default async function ProductPage({ params }: { params: { id: string } }) { // This page is static for pre-rendered IDs, and generated on-demand for others const product = await fetch(`https://api.example.com/p

How do we generate static pages in a NextJS project with the app router?

Generate static pages using 'output: export' for full-site export or 'generateStaticParams' with dynamic routes for pre-rendering specific pages at build time

How do we generate static pages in a NextJS project with the app router?

Generate static pages using 'output: export' for full-site export or 'generateStaticParams' with dynamic routes for pre-rendering specific pages at build time

Scenario Questions

Follow-up Questions