getStaticPaths in Next.js
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 },
};
};