How do I implement SSG in Next.js?

How do I implement SSG in Next.js?

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

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 json = await data.json();
  return { props: { json } };
}

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 specify which paths to pre-render.

Can you show me how to set that up?

Absolutely! Here's an example:

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/items');
  const items = await res.json();
  const paths = items.map(item => ({ params: { id: item.id.toString() } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/items/${params.id}`);
  const item = await res.json();
  return { props: { item } };
}

This will generate a static page for each item based on its ID.