Next.js の InferGetStaticPropsType が便利

DRANK

Next.jsのサンプルリポジトリを眺めていたらInferGetStaticPropsTypeというものを見つけました。これを使うと、getStaticPropsでreturnされた値をもとに、Pageに渡されるPropsの型を類推してくれます。↓ ドキュメントはこちらこれまではこんな感じで書いていたこれまではPropsの型宣言を自分で書いていました。import { GetStaticProps } from 'next'; type Props = { posts: Post[] }; export const getStaticProps: GetStaticProps<Props> = async () => { const { posts } = await getPosts(); return { props: { posts, }, revalidate: 1 }; }; const Page: NextPage<Props> = (props) => { ... } export default Page; InferGetStaticPropsTypeを使うと…InferGetStaticPropsType<typeof getStaticProps>のように書くことで、getStaticProps()の返り値をもとにPageに渡される型を類推してくれます。import { InferGetStaticPropsType } from 'next'; type Props = InferGetStaticPropsType<typeof getStaticProps>; export const getStaticProps = async () => { const { posts } = await getPosts(); return { props: { posts…