Static Site Generation with Next.js React

What You’ll Learn 📚

• Understanding Static Site Generation (SSG)
• Key terminology in Next.js and SSG
• Creating your first static site with Next.js
• Progressively complex examples
• Common questions and troubleshooting

Introduction to Static Site Generation

Static Site Generation (SSG) is a method of pre-rendering web pages into static HTML files. This means the pages are generated at build time, not on each request. The result? Super-fast load times and improved performance! 🚀

Why Use Static Site Generation?

• Speed: Static sites load faster because they don’t require server-side rendering on each request.
• Scalability: Serve static files directly from a CDN, reducing server load.
• SEO Benefits: Pre-rendered pages improve search engine indexing.

Key Terminology

• Next.js: A popular React framework that enables SSG, SSR (Server-Side Rendering), and more.
• Build Time: The time during which your site is compiled into static files.
• Pre-rendering: Generating HTML at build time.

Getting Started with Next.js

Setup Instructions

Let’s start by setting up a new Next.js project. You’ll need Node.js and npm installed on your computer. If you haven’t installed them yet, you can download them from Node.js official site.

# Create a new Next.js project
npx create-next-app my-static-site

# Navigate into the project directory
cd my-static-site

# Start the development server
npm run dev

Creating Your First Static Page

// pages/index.js
import React from 'react';

const HomePage = () => {
  return (
    

      
Welcome to My Static Site!
      
This is a static page generated with Next.js.
    
  );
};

export default HomePage;

Progressively Complex Examples

Example 1: Adding Static Props

// pages/index.js
import React from 'react';

export async function getStaticProps() {
  return {
    props: {
      message: 'Hello, static world!'
    }
  };
}

const HomePage = ({ message }) => {
  return (
    

      
{message}
    
  );
};

export default HomePage;

Example 2: Dynamic Routes with Static Generation

// pages/posts/[id].js
import React from 'react';

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  return {
    props: {
      postId: params.id
    }
  };
}

const PostPage = ({ postId }) => {
  return (
    

      
Post {postId}
    
  );
};

export default PostPage;

Example 3: Fetching Data from an API

// pages/index.js
import React from 'react';

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();

  return {
    props: {
      post
    }
  };
}

const HomePage = ({ post }) => {
  return (
    

      
{post.title}
      
{post.body}
    
  );
};

export default HomePage;

Common Questions and Troubleshooting

1. What is the difference between SSG and SSR?

   SSG generates HTML at build time, while SSR generates HTML on each request.

2. Why is my page not updating?

   Remember that static pages are generated at build time. You’ll need to rebuild your app to see changes.

3. How can I handle dynamic content?

   Use getStaticPaths and getStaticProps to pre-render dynamic routes.

4. What if I get a 404 error?

   Ensure your paths are correctly defined in getStaticPaths.

Troubleshooting Common Issues

If you encounter errors, check your terminal for detailed error messages. They often provide clues on what went wrong.

Lightbulb Moment: If your data changes frequently, consider using Incremental Static Regeneration (ISR) to update static pages after the initial build.

Practice Exercises and Challenges

• Create a new page that displays a list of items fetched from an API.
• Implement dynamic routes for a blog site using static generation.
• Experiment with different data fetching methods in Next.js.

Remember, practice makes perfect! Keep experimenting and building. You’ve got this! 💪

Additional Resources

• Next.js Pages Documentation
• Next.js Data Fetching