How do I set up Static Site Generation in Next.js?

How do I set up Static Site Generation in Next.js?

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

Can you show me a code example?

Sure! Here's a simple example:

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

const Page = ({ data }) => {
  return <div>{data.title}</div>;
};

export default Page;

What if I need to generate multiple pages?

You can use getStaticPaths along with getStaticProps to generate multiple pages based on dynamic routes.

Can you explain how getStaticPaths works?

getStaticPaths allows you to specify which paths to pre-render at build time. It returns an object with a paths array and a fallback key.