TypeScript で書く Next.js のページコンポーネント

はじめに

本記事では getStaticProps と getStaticPaths を使ったページコンポーネントを TypeScript で書くときのコード例を紹介します。

大部分は以下の記事を参考にさせてもらっています。

Next.js の InferGetStaticPropsType が便利

getStaticProps の引数の型を少し補足して現状のベストプラクティスっぽいものをお示しできたらなと考えています。

前提

Next.js 12

tldr

さっそく、コード例を紹介します。

//[slug].tsx
import { GetStaticPropsContext, InferGetStaticPropsType, NextPage } from 'next'

type Props = InferGetStaticPropsType<typeof getStaticProps>

const Page: NextPage<Props> = ({ post }) => {
    ...
}

export const getStaticPaths = async () => {
  const paths = getPostPaths().map((slug) => {
    return {
      params: {
        slug,
      },
    }
  })

  return {
    paths,
    fallback: false,
  }
}

export const getStaticProps = async (
  context: GetStaticPropsContext<{ slug: string }>
) => {
  const post = getPost(context.params.slug)

  return {
    props: { post },
  }
}

export default Page

簡単な解説

InferGetStaticPropsType については先ほど紹介した記事が詳しいです。さらに加えるなら GetStaticPropsContext<{ slug: string }> で params オブジェクトの型を定義できます。

これで any が入ることを防ぎ as でキャストする必要などもなくなります。が、まだ手で書く必要はあるので改良の余地はありそうです。

調べてみるとInferGetStaticPropsType という便利な型を追加する試みもあったようです。ただ、手で書くよりも冗長なためマージには至りませんでした。

Add InferGetStaticPathsType

context: GetStaticPropsContext<InferGetStaticPathsType<typeof getStaticPaths>>

参考

以下の記事では、InferGetStaticPropsType の型定義を自作しながら解説してくれています。

カタ柱じゃなくてもできる、TypeScript の呼吸玖ノ型：約束の地へ

おわりに

本記事では、Next.js のページコンポーネントを型でかっちり書く方法を紹介しました。

以上、お読みいただきありがとうございました。

Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！

求人応募してみる！

TechWatch