Static Site Generation (SSG) is a method of pre-rendering pages at build time, which can significantly improve the performance and SEO of your web application. Next.js, a popular React framework, provides robust support for SSG, making it easier to build static websites.

1. Static Site Generation (SSG):

   • Pre-renders pages at build time.
   • Generates HTML for each page and serves it on request.
   • Ideal for pages that do not change frequently.

2. Next.js:

   • A React framework for building server-side rendered (SSR) and statically generated (SSG) applications.
   • Provides features like file-based routing, API routes, and more.

3. getStaticProps:

   • A Next.js function used to fetch data at build time.
   • Returns an object with props that are passed to the page component.

4. getStaticPaths:

   • A Next.js function used to specify dynamic routes to be pre-rendered based on data.
   • Returns an object with paths and fallback options.

1. Install Next.js:

   npx create-next-app my-nextjs-app
   cd my-nextjs-app
   npm run dev
   

2. Project Structure:

   • pages/: Contains all the page components.
   • public/: Static assets like images.
   • styles/: CSS files.

1. Create a new file pages/blog.js:

   import React from 'react';
   
   const Blog = ({ posts }) => {
     return (
       <div>
         <h1>Blog</h1>
         <ul>
           {posts.map((post) => (
             <li key={post.id}>{post.title}</li>
           ))}
         </ul>
       </div>
     );
   };
   
   export async function getStaticProps() {
     const res = await fetch('https://jsonplaceholder.typicode.com/posts');
     const posts = await res.json();
   
     return {
       props: {
         posts,
       },
     };
   }
   
   export default Blog;
   

1. Create a new file pages/blog/[id].js:

   import React from 'react';
   
   const Post = ({ post }) => {
     return (
       <div>
         <h1>{post.title}</h1>
         <p>{post.body}</p>
       </div>
     );
   };
   
   export async function getStaticPaths() {
     const res = await fetch('https://jsonplaceholder.typicode.com/posts');
     const posts = await res.json();
   
     const paths = posts.map((post) => ({
       params: { id: post.id.toString() },
     }));
   
     return { paths, fallback: false };
   }
   
   export async function getStaticProps({ params }) {
     const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
     const post = await res.json();
   
     return {
       props: {
         post,
       },
     };
   }
   
   export default Post;
   

1. Start the development server:

   npm run dev
   

2. Navigate to http://localhost:3000/blog to see the list of blog posts.

3. Click on a blog post to see the detailed view.

In this section, you learned about Static Site Generation (SSG) with Next.js. You explored key concepts such as getStaticProps and getStaticPaths, and saw a practical example of building a blog with SSG. By pre-rendering pages at build time, you can significantly improve the performance and SEO of your web application. Next.js makes it easy to implement SSG, allowing you to build fast and efficient static websites.