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

<figure><img src="https://159896965-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3LclXKUpANLoSt8DPdYV%2Fuploads%2FJK8G3Yjm1qHwjGSqwUcV%2F1675674296261.jpeg?alt=media&#x26;token=989182c4-9098-4bba-8dd9-52aeb4b0f941" alt=""><figcaption><p>[Pages] Loading Data</p></figcaption></figure>

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:

```bash
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:

```javascript
// 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!
