前回はサンプルのコードとして完結させるために、Typescript で利用する Type を手作業で作成をしました。今回は、定義しているフィールドに関しての Type を生成します。
タイプの生成
2025-08-04
Sanity TypeGen の利用
Sanity CLI のツールを利用することで、Studio で定義しているスキーマの定義を利用して、TypeScript で利用する type の定義ファイルを生成することができます。
この手順は、すべて apps/studio のディレクトリで実行していきます。
まず、schema の設定となる JSON ファイルを生成します。
sh
完了すると、JSON ファイルが作成されます。
このファイルを利用して type を定義しているファイルを作成しますが、ファイルを参照するのは今回は Next.js となるため、出力先を変更するために以下のファイルを追加します。
apps/studio/sanity-typegen.json
上記のファイルがあれば、 types.ts のファイルが Next.js の中に出力されるようになります。
準備が完了したので、以下のコマンドを実行します。
sh
上記のコマンドを実行すると、apps/web/src/sanity/types.ts というファイルが作成されます。
これにより、前回 apps/web/src/app/page.tsx のファイルで Event のインターフェイスを作成しましたが、sanityFetch が形を利用した形で返しているため不要になります。スキーマを追加すると以下のようにエラーが表示されるようになりました。
該当する Event の定義などを削除して、あらためて Visual Studio Code で event を確認すると以下のようにきちんと定義を参照できています。
Type を自動更新
スキーマを変更した際に自動的に上記の作業を実施できるように、以下の編集を進めます。
apps/studio/package.json
これにより、 apps/studio の直下で以下のコマンドを実行すると、type が更新されます。
sh
スキーマを更新した際には、この手続きで簡単に定義を更新することができます。
まとめ
今回は Sanity の機能を利用して、Studio で利用しているスキーマの定義から Next.js で利用する TypeScript の定義を作成しました。また、package.json に手順を追加することで、schema の変更があれば更新をするコマンドも追加しました。
ここまでのサンプルは、以下のリポジトリ/ブランチで参照できます。
