How do I set up SSG in Next.js?

How do I set up SSG in Next.js?

To set up Static Site Generation (SSG) in Next.js, you can use the getStaticProps function in your page components.

Can you give me an example of how to use getStaticProps?

Sure! Here's a simple example:

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

This fetches data at build time and passes it as props to your component.

What about dynamic routes with SSG?

For dynamic routes, you can use getStaticPaths along with getStaticProps. This allows you to generate pages for dynamic routes at build time.

Can you explain how getStaticPaths works?

Certainly! getStaticPaths returns an object with a paths array and a fallback key. The paths array contains the dynamic routes you want to pre-render.