Generate params from the bottom up

generateStaticParams:

The generateStaticParams function allows for the static generation of routes during the build process, when used alongside dynamic route segments, rather than dynamically generating them upon request.”...

Single Dynamic Segment

export function generateStaticParams() { return [{ id: 'a' }, { id: 'b' }, { id: 'c' }]} export default function Page({ params }: { params: { id: string } }) { const { id } = params}...

Multiple Dynamic Segments

export function generateStaticParams() { return [ { name: 'a', subject: 'english' }, { name: 'b', subject: 'hindi' }, { name: 'c', subject: 'maths' }, ]} export default function Page({ params,}: { params: { category: string; product: string }}) { const { category, product } = params // ...}...

Catch-all Dynamic Segment

export function generateStaticParams() { return [{ slug: ['a', 'english'] }, { slug: ['b', 'hindi] }, { slug: ['c', 'maths'] }]} export default function Page({ params }: { params: { slug: string[] } }) { const { slug } = params // ...}...

Generate params from the bottom up

export async function generateStaticParams() { const products = await fetch('https://.../products').then((res) => res.json()) return products.map((product) => ({ category: product.category.slug, product: product.id, }))} export default function Page({ params,}: { params: { category: string; product: string }}) { // ...}...

Generate params from the top down:

export async function generateStaticParams({ params: { category },}: { params: { category: string }}) { const products = await fetch( `https://.../products?category=${category}` ).then((res) => res.json()) return products.map((product) => ({ product: product.id, }))} export default function Page({ params,}: { params: { category: string; product: string }}) { // ...}...

Generate only a subset of params

export const dynamicParams = false export async function generateStaticParams() { const posts = await fetch('https://.../posts').then((res) => res.json()) const topPosts = posts.slice(0, 10) return topPosts.map((post) => ({ slug: post.slug, }))}...

What we are going to do

We’re going to build a Next.js application that implements dynamic routing for blog posts. Initially, we’ll fetch the blog post data dynamically from an external API (https://jsonplaceholder.typicode.com/posts). Each blog post will have a unique slug in the URL, such as /blog/[slug], where the slug represents the ID of the blog post. We’ll start by setting up dynamic routing to render the blog post content based on the slug parameter in the URL.After successfully implementing dynamic routing, we’ll optimize our application by using static parameter generation. This involves pre-generating the pages for all possible blog post slugs during the build process, improving performance by serving pre-rendered pages instead of fetching data dynamically on each request.To achieve this, we’ll use Next.js’s getStaticPaths and getStaticProps functions. We’ll modify our existing dynamic routing setup to use static parameter generation, ensuring that the blog post pages are pre-rendered at build time. This approach enhances the user experience by reducing loading times and server load, resulting in a faster and more responsive application....