Part 23: Understanding Dynamic Routes and Static Site Generation in Next.js

[Pages] Loading Data

[Pages] Loading Data

In our journey to build a fully functional blog with Next.js, we've implemented dynamic routes that automatically generate static pages for each blog post. This post will delve into the process that occurs when we build our Next.js application, specifically focusing on dynamic routes and how they enable static site generation (SSG).

Building the Application

To see the magic of Next.js in action, we first need to build our application. This is done by running the following command in your terminal:

npm run build

This command generates a production-ready build of your website, converting it into static assets that can be easily deployed.

The Transition from Static to SSG

Initially, our Home page was a simple static page. However, with the introduction of the getStaticProps function, it has transformed into a Static Site Generation (SSG) page. This means it can now pre-render at build time using the props we provide.

Dynamic Routes with Static Site Generation

The most exciting part of our application build is the dynamic routing for our blog posts. In Next.js, dynamic routes are defined in the pages directory using square brackets. For instance, pages/posts/[slug].js creates a dynamic route.

Here's a simple structure of our dynamic post page:

// pages/posts/[slug].js

import { getPostData, getPostSlugs } from '../../lib/posts';

export async function getStaticPaths() {
  const slugs = await getPostSlugs();
  const paths = slugs.map(slug => ({
    params: { slug }
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.slug);

  return {
    props: {
      postData
    }
  };
}

function PostPage({ postData }) {
  return (
    <article>
      <h1>{postData.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </article>
  );
}

export default PostPage;

How It Works

1. getStaticPaths: This function is crucial for dynamic routes. It returns an array of possible paths based on the slugs of our posts. Each path includes a params object containing the slug.

2. getStaticProps: For each path returned by getStaticPaths, getStaticProps fetches the necessary data, allowing Next.js to pre-render the page with static content.

3. Static HTML Pages: During the build process, Next.js uses the data fetched by getStaticProps to generate static HTML files for each post. For example, if you have three posts, Next.js will create first-post.html, second-post.html, and third-post.html.

Build Output and Process

When you run npm run build, the console output reveals several key points:

• SSG Pages: The Home page is now an SSG page thanks to getStaticProps.

• Dynamic Route Pages: The dynamic route posts/[slug] generates separate HTML pages for each post, based on the paths provided by getStaticPaths.

• Static Nature: Despite being dynamic in routing, the generated pages are static HTML files because we set fallback: false in getStaticPaths.

Conclusion

The ability to generate static pages for dynamic routes is a powerful feature of Next.js. It ensures that your website is fast, secure, and can be deployed on any web server without the need for a dedicated server-side infrastructure. By understanding how getStaticPaths and getStaticProps work together, you can create a dynamic yet static site that scales effortlessly as your content grows.

Happy coding, and enjoy the benefits of a statically generated blog!