Introduction

Static Generation is a method of pre-rendering pages in Next.js at build time. It generates HTML for each page and serves it to users on request, improving performance and SEO.

What is Static Generation?

Static Generation is a form of rendering that allows you to generate HTML pages at build time. This means that when you build your Next.js application, it generates static HTML files for each page defined in your application, which can be served quickly to users.

How to Implement Static Generation

To implement Static Generation in Next.js, you need to use the `getStaticProps` function. This function allows you to fetch data at build time and pass it to your page component as props.

Step-by-Step Process

1. Create a new Next.js page.
2. Export a `getStaticProps` function from your page.
3. Fetch your data inside `getStaticProps`.
4. Return the fetched data as props.
5. Access the props in your page component.

Example Code

import React from 'react';

export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();

    return {
        props: {
            data,
        },
    };
}

const MyPage = ({ data }) => {
    return (
        

            
Static Data
            
{JSON.stringify(data, null, 2)}
        
    );
};

export default MyPage;
                

Best Practices

• Use Static Generation for pages that can be pre-rendered and do not change often.
• Combine Static Generation with Incremental Static Regeneration for frequently updated data.
• Utilize static assets effectively, such as images and stylesheets, to enhance performance.

FAQ