getStaticPaths in Next.js

Jan 28, 2023·

1 min read

I made a video for this. And below the video, there is the code.

|pages/exp/[id].tsx|

import { GetStaticPaths, GetStaticProps } from 'next';

export default function ({ data }: { data: { title: string } }) {
  return <div>{data.title}</div>;
}

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // true -> error, false -> 404, blocking -> succeed
    fallback: true,
  };
};

export const getStaticProps: GetStaticProps = async (context) => {
  const { params } = context;

  if (!params) {
    return {
      props: {},
    };
  }

  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);

  const data = await response.json();

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