NextJs — Static Paths with Dynamic Routes

When using dynamic routes with SSG, you must define paths to pre-render using getStaticPaths.

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

  const paths = posts.map(post => ({ params: { id: post.id.toString() } }));

  return { paths, fallback: false };
}

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

export default function Post({ post }) {
  return <h1>{post.title}</h1>;
}
← PreviousNext →