Next.js Static Site Generation

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

Next.js, a popular React framework, has revolutionized the way we build modern web applications. One of its powerful features is Static Site Generation (SSG), which allows us to pre-render pages at build time, improving performance and providing a delightful user experience. So let's dive into the world of Next.js and explore its SSG capabilities!

What is Static Site Generation (SSG)?

Static Site Generation refers to the process of generating static HTML, CSS, and JavaScript files at build time, rather than sending requests to a server to fetch or generate content at runtime. SSG has gained popularity, as it provides fast load times, better SEO, and improved security.

How does Next.js implement SSG?

Next.js provides built-in support for SSG through two primary functions: getStaticProps and getStaticPaths. These functions enable developers to fetch data at build time and generate static pages based on that data.

getStaticProps

getStaticProps is an asynchronous function that fetches the data required to pre-render a page. This function runs only on the server-side during build time, and its result is passed as props to the page component.

Here's a simple example:

// pages/index.js
import { useState } from "react";

export default function Home({ posts }) {
    const [postList, setPostList] = useState(posts);

    return (
        <div>
            {postList.map((post) => (
                <div key={post.id}>{post.title}</div>
            ))}
        </div>
    );
}

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

    return {
        props: { posts },
    };
}

In this example, getStaticProps fetches a list of posts at build time, which is then passed as props to the Home component.

getStaticPaths

getStaticPaths is used for dynamic pages, where the page path depends on external data. This function defines a list of paths that should be pre-rendered as static pages. It is essential when using SSG with dynamic routes, such as /posts/[id].

Here's an example:

// pages/posts/[id].js
import { useRouter } from "next/router";

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

    if (router.isFallback) {
        return <div>Loading...</div>;
    }

    return <div>{post.title}</div>;
}

export async function getStaticPaths() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await res.json();
    const paths = posts.map((post) => `/posts/${post.id}`);

    return { paths, fallback: true };
}

export async function getStaticProps({ params }) {
    const res = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${params.id}`
    );
    const post = await res.json();

    return { props: { post } };
}

In this example, getStaticPaths fetches the list of posts and generates paths for each post. Then, getStaticProps fetches the data for a specific post based on the id parameter.

Benefits of using SSG with Next.js

Utilizing Next.js's SSG capabilities offers several advantages, including:

1. Improved performance: Static pages are served from a CDN, resulting in faster load times and a better user experience.
2. Better SEO: Pre-rendered pages ensure that all content is available to search engines, improving visibility and rankings.
3. Increased security: Since there's no direct connection to a database or server, the attack surface is significantly reduced.
4. Simplified deployment: Generated static files can be easily deployed to various hosting providers, such as Vercel, Netlify, or GitHub Pages.

In conclusion, Next.js's Static Site Generation feature is a powerful tool for building modern web applications. It offers improved performance, better SEO, enhanced security, and simplified deployment, making it an excellent choice for developers looking to create static sites and web applications.

FAQ

import React from "react";
export async function getStaticProps() {
  const data = await fetchData(); // Your data fetching logic here
  return {
    props: {
      data,
    },
  };
}
const MyPage = ({ data }) => {
  return (
    <div>
      {/* Render your data here */}
    </div>
  );
};
export default MyPage;

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: {
      data,
    },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

export async function getStaticPaths() {
  const paths = await fetchPaths(); // Your logic for fetching the paths
  return {
    paths,
    fallback: "blocking", // "blocking" ensures that new paths are generated on-demand with SSG
  };
}