Next.js & Static Site Generation: A Beginner’s Guide

Written by

learnmodernwebdevelopment

in

In the ever-evolving world of web development, speed and performance are paramount. Users expect websites to load instantly, and search engines reward those that deliver. This is where static site generation (SSG) in Next.js shines. It’s a powerful technique that allows you to pre-render your website’s pages at build time, resulting in lightning-fast load times and improved SEO. This tutorial will guide you through the process of using SSG in Next.js, demystifying the concepts and providing practical examples to get you started.

Understanding Static Site Generation (SSG)

Before diving into the code, let’s clarify what SSG is and why it’s beneficial. Unlike traditional websites that generate pages on the fly (server-side rendering) or client-side rendering where the browser does all the work, SSG builds your website’s pages ahead of time. When a user requests a page, the server simply serves the pre-built HTML, CSS, and JavaScript files. This approach offers several advantages:

  • Blazing Fast Load Times: Since the content is pre-rendered, the server doesn’t need to process anything dynamically, resulting in incredibly quick load times.
  • Improved SEO: Search engines love fast websites. SSG makes your site highly optimized for search, boosting your rankings.
  • Enhanced Security: Static sites are less vulnerable to common security threats since there’s no server-side code to exploit.
  • Cost-Effective Hosting: Static sites can be hosted on simple, inexpensive platforms like Netlify, Vercel, or even GitHub Pages.

SSG is ideal for content-heavy websites such as blogs, documentation sites, and e-commerce product catalogs where the content doesn’t change frequently. If your content updates often, consider other rendering strategies like Server-Side Rendering (SSR) or Incremental Static Regeneration (ISR), which we won’t cover in this tutorial.

Setting Up Your Next.js Project

Let’s get our hands dirty and create a basic Next.js project. If you haven’t already, make sure you have Node.js and npm (or yarn) installed. Open your terminal and run the following command:

npx create-next-app my-ssg-blog

This command creates a new Next.js project named `my-ssg-blog`. Navigate into your project directory:

cd my-ssg-blog

Now, let’s start the development server:

npm run dev

This command starts the development server, and you should be able to see your basic Next.js app running on `http://localhost:3000`. Now, let’s create a simple blog post page to demonstrate SSG.

Creating a Blog Post Page with SSG

We’ll create a dynamic route for our blog posts. This means that each blog post will have its own unique URL, and the content will be fetched and rendered at build time. Create a folder named `posts` inside the `pages` directory. Inside the `posts` folder, create a file named `[slug].js`. The `[slug]` part is a dynamic route segment that will represent the unique identifier (e.g., the title) of each blog post.

Your directory structure should look like this:

my-ssg-blog/
├── pages/
│   └── posts/
│       └── [slug].js
└── ...

Now, let’s write the code for `[slug].js`. This file will handle the fetching of data and rendering of a single blog post. Here’s a basic example:

// pages/posts/[slug].js
import { useRouter } from 'next/router';

function Post({ post }) {
  const router = useRouter();

  // If the page is not yet generated, this will be displayed
  // until getStaticProps is finished running
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

// This function gets called at build time
export async function getStaticPaths() {
  // 1. Fetch the list of blog post slugs (identifiers)
  const posts = [  // Replace with actual data fetching
    { slug: 'first-post' },
    { slug: 'second-post' },
  ];

  // 2. Map the slugs to paths for Next.js to pre-render
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  // 3. Return an array of paths and a fallback option
  return {
    paths, // An array of possible paths (e.g., /posts/first-post, /posts/second-post)
    fallback: false, // If false, 404 if the path is not found.
  };
}

// This function gets called at build time
export async function getStaticProps({ params }) {
  // 1. Get the slug from the params
  const { slug } = params;

  // 2. Fetch the blog post data based on the slug
  // Replace with your data fetching logic (e.g., from a file, database, or API)
  const post = {
    title: `Post ${slug.replace('-', ' ').toUpperCase()}`,
    content: `This is the content for ${slug}.`, 
  };

  // 3. Return the props to the component
  return {
    props: { post },
  };
}

export default Post;

Let’s break down this code:

  • `getStaticPaths()`: This function is crucial for SSG. It tells Next.js which paths to pre-render.
  • It fetches a list of possible slugs. In a real-world scenario, you’d fetch this from a data source like a database or a file system.
  • It maps these slugs to an array of paths that Next.js will use to generate the static pages. Each path object includes a `params` object containing the `slug`.
  • The `fallback: false` option means that if a user tries to access a path that wasn’t generated at build time, they’ll get a 404 error.
  • `getStaticProps({ params })` : This function fetches the data for each individual blog post at build time.
  • It receives the `params` object, which contains the `slug` from the URL.
  • It uses the `slug` to fetch the corresponding blog post data. Again, replace the placeholder with your actual data fetching logic.
  • It returns the data as `props` that will be passed to the `Post` component.
  • `Post({ post })` Component: This component receives the `post` data as props and renders the title and content.

Important: The example uses a hardcoded array of posts inside `getStaticPaths()` and a hardcoded post object inside `getStaticProps()`. You’ll need to replace these with your actual data fetching logic. For instance, you might fetch data from a local JSON file, a Markdown file, a CMS (like Contentful or Strapi), or a database.

Adding a Link to the Blog Posts

To make our blog posts accessible, we need to add links to them. Let’s modify the `pages/index.js` file (the homepage) to include links to the blog posts. Here’s how you can do it:

// pages/index.js
import Link from 'next/link';

function HomePage() {
  const posts = [
    { slug: 'first-post', title: 'First Post' },
    { slug: 'second-post', title: 'Second Post' },
  ];

  return (
    <div>
      <h1>My Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/posts/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

In this code:

  • We import the `Link` component from `next/link`.
  • We define an array of `posts` with their `slug` and `title`. In a real application, you’d fetch these from your data source.
  • We use the `map` function to iterate over the posts and create a list of links.
  • The `Link` component creates a client-side navigation link. When the user clicks on a link, Next.js will fetch the content for the corresponding page without a full page reload, making the navigation very fast.
  • The `href` prop of the `Link` component specifies the URL path to the blog post, using a template literal to construct the URL based on the `slug`.
  • The `a` tag inside the `Link` creates the actual clickable link with the post title.

Now, when you visit your homepage, you should see links to your blog posts. Clicking on these links will take you to the pre-rendered blog post pages.

Deploying Your SSG Website

Once you’ve built your SSG website, deploying it is straightforward. You can deploy it on various platforms, including:

  • Vercel: Vercel is the recommended platform for Next.js. It offers seamless deployment and automatic builds.
  • Netlify: Netlify is another excellent option, known for its ease of use and global CDN.
  • AWS Amplify: A good choice for those already using AWS services.
  • GitHub Pages: A simple and free option, suitable for basic websites.

The deployment process typically involves the following steps:

  1. Build Your Project: Run `npm run build` or `yarn build` to build your Next.js application. This will generate the static HTML, CSS, and JavaScript files.
  2. Deploy to Your Hosting Platform: Follow the instructions provided by your chosen hosting platform to deploy the build output. This usually involves connecting your Git repository and configuring the build settings.
  3. Configure Your Domain (Optional): If you want to use a custom domain, you’ll need to configure the DNS settings with your domain registrar.

For example, deploying to Vercel is as simple as connecting your GitHub repository and Vercel automatically handles the build and deployment process. Netlify also offers similar ease of use with its Git integration.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when working with SSG in Next.js, along with solutions:

  • Incorrect Data Fetching in `getStaticPaths()`: Make sure you’re fetching the correct data to generate the paths. Double-check your API endpoints, file paths, or database queries.
  • Missing or Incorrect `fallback` Option: If you set `fallback: false` and a user tries to access a non-existent path, they will get a 404 error. If you set `fallback: true`, Next.js will show a loading state while generating the page on the server. If you set `fallback: ‘blocking’`, the user will wait for the page to be generated.
  • Not Using the Correct Data in `getStaticProps()`: Ensure that the data you fetch in `getStaticProps()` matches the expected structure in your component. Check for typos and errors in your data fetching logic.
  • Confusing `getStaticProps()` with `getServerSideProps()`: Remember that `getStaticProps()` runs at build time, while `getServerSideProps()` runs on each request. Use `getStaticProps()` for content that doesn’t change often and `getServerSideProps()` for content that needs to be updated frequently.
  • Performance Issues with Large Datasets: If you’re dealing with a large number of blog posts, consider using pagination or other techniques to improve performance.

Key Takeaways

  • SSG is a powerful technique for building fast and SEO-friendly websites.
  • `getStaticPaths()` and `getStaticProps()` are the core functions for SSG in Next.js.
  • SSG is best suited for content that doesn’t change frequently.
  • Deploying an SSG website is typically straightforward.
  • Always test your implementation to ensure everything works as expected.

FAQ

  1. What are the main differences between SSG, SSR, and CSR?
    • SSG (Static Site Generation): Pages are pre-rendered at build time. Fast load times, good for SEO.
    • SSR (Server-Side Rendering): Pages are rendered on the server for each request. Good for dynamic content, but slower than SSG.
    • CSR (Client-Side Rendering): Pages are rendered in the browser using JavaScript. Flexible, but can be slower initially.
  2. When should I use SSG over SSR?
    Use SSG when your content doesn’t change often and you prioritize fast load times and SEO. Use SSR when your content is highly dynamic and needs to be updated frequently.
  3. Can I use SSG with a database?
    Yes, you can use SSG with a database. Fetch data from your database within `getStaticProps()` to generate static pages.
  4. How do I update the content of an SSG website?
    You need to rebuild and redeploy your website whenever you update the content. For more dynamic content, consider using Incremental Static Regeneration (ISR) or Server-Side Rendering (SSR).
  5. Is SSG suitable for e-commerce websites?
    Yes, SSG can be used for e-commerce websites, especially for product catalogs. However, for features like shopping carts and user accounts, you’ll need to incorporate client-side rendering or server-side rendering for those specific parts of your site.

Mastering SSG in Next.js opens up a world of possibilities for building high-performance websites. By pre-rendering your pages at build time, you can achieve lightning-fast load times, improve SEO, and create a better user experience. Remember to experiment, iterate, and adapt these techniques to your specific project needs. Explore the Next.js documentation, practice with different data sources, and deploy your projects to see the benefits of SSG firsthand. The journey to building performant and user-friendly websites is an ongoing one, and SSG is a valuable tool in your arsenal.

More posts