このブログはHeadless CMCであるContentfulで記事を作成し、Next.jsでデータを取得して表示しています。

今まで型定義を自前で用意していたのですが、自動で生成するライブラリを使うことにしました。

cf-content-types-generatorを試してみます。

contentful-typescript-codegenを使う方法を最初試していたのですが、メンテナンスがあまり活発でないことと、Contentfulのv10のアップデートに失敗してしまうことがわかりました。これから対応する方は注意してください。

型情報を含んだjsonを読み込んでTypeScriptの型を作るので、まずはそのjsonを作る準備をします。contentful-cliを使います。

1npm install -D contentful-cli

jsonを作るスクリプトをpackage.jsonに追加します。export-confing.jsonを別で作り、そこに設定値を入れます。この設定値には公開したくないアクセストークンをいれるので、gitignoreに入れてコミットしないようにします。

ちなみにｍanagementTokenはCMA tokensからPATを作成することで取得しました。

1{
2  // ...
3  "scripts": {
4    "contentful-export": "contentful space export --config export-config.json"
5  }
6}
7

1{
2  "spaceId": "XXXX",
3  "managementToken": "CFPAT-XXXX",
4  "contentFile": "contentful-export.json",
5  "skipContent": true,
6  "skipRoles": true,
7  "skipWebhooks": true,
8  "skipTags": true
9}

npm run contentful-exportを実行することで、型データのjson（contentful-export.json）が作られました。

次にこの型データjsonからTypeScriptの型を作ります。cf-content-types-generatorパッケージをインストールします。

1npm install -D cf-content-types-generator

package.jsonに以下のスクリプトを追加します

1{
2  // ...
3  "scripts": {
4    "contentful-generate-types": "cf-content-types-generator contentful-export.json -o ./@types --v10 --response"
5  }
6}

スクリプトを実行することで型が生成されます

1npm run contentful-generate-types

これで型が生成されました。これで安全に開発ができます。