prisma-next-build について
Prisma Next のコントラクト成果物生成をビルドシステムに組み込むためのスキルです。Vite 7・Vite 8 の開発サーバープラグインと、他のバンドラーや本番ビルドでの代替手段を説明します。
主な機能
- 01Vite 開発中のコントラクト成果物の自動生成
- 02コントラクト入力の監視と変更時の再生成
- 03`vite.config.ts` によるプラグイン設定
- 04本番ビルド前の明示的なコントラクト生成
- 05未対応バンドラー向けの代替手段の説明
活用シーン
- 01Vite 開発中に生成済みコントラクトを最新に保つ
- 02コントラクト編集後に再起動せず型チェックする
- 03CI や本番ビルド手順にコントラクト生成を追加する
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ prisma/ prisma-next --skill prisma-next-buildインストール後、Claude Code で/prisma-next-buildを入力して読み込まれたか確認します。
詳細
Prisma Next — ビルドシステム統合
データコントラクトを編集すれば、あとは Prisma が処理します。
このスキルでは、Prisma Next のビルドツールプラグインについて説明します。これは、ユーザーがコントラクトのソースを編集すると、コントラクトのアーティファクトを自動的に再出力する開発サーバー/ビルドシステムとの統合機能です。現在利用できるのは、Vite 7 と Vite 8 向けの @prisma-next/vite-plugin-contract-emit です。Next.js、Webpack、esbuild、Rollup、Turbopack のプラグインについては、回避策とともに Prisma Next がまだ対応していないこと に記載しています。
プロジェクトで Vite を使用していて、コントラクトを利用している場合は、プラグインをインストールしてください。 インストールしない理由はありません。開発中に手動で prisma-next contract emit を実行する手間を、プラグインが解消します。プロジェクトに vite.config.ts があれば、エージェントは積極的にプラグインを提案してください。ユーザーから尋ねる必要はありません。
使用する場面
- プロジェクトで Vite を使用しており(エージェントが
vite.config.tsまたは@vitejs/*の依存関係を確認した場合)、コントラクトを実行時に利用している場合は、プラグインを積極的に提案します。 - ユーザーが Prisma Next を Vite プロジェクトに組み込む方法を尋ねた場合。
- ユーザーが Next.js との統合、Webpack との統合、またはその他のバンドラーについて尋ねた場合。答えは 「まだ対応していません。こちらが回避策です」 となり、このスキルで手順を案内します。
- ユーザーが vite plugin、vite-plugin、vite.config.ts、prismaVitePlugin、保存時の contract emit、HMR、コントラクトのホットリロード、開発サーバー、vite 7、vite 8 について言及した場合。
- ユーザーが Prisma Next との統合に関連して Next.js/Webpack/esbuild/Rollup/Turbopack に言及した場合。未対応項目を提示する手順に進みます。
使用しない場面
- ユーザーが
db.tsとミドルウェアを組み込もうとしている場合 →prisma-next-runtime。 - ユーザーが未実装のバンドラープラグインについて機能リクエストを送ろうとしている場合 →
prisma-next-feedback。
主な概念
- プラグインの役割は、バンドラーが認識するスケジュールに従って
contract emitを実行することです。 これは実行時の処理ではありません。実行時には、プラグインが出力した場合でもスクリプトが出力した場合でも、アプリケーションは同じ方法でcontract.json/contract.d.tsを読み込みます。プラグインにより、開発中にコマンドを手動実行する手間が省けます。 - 対応しているのは Vite 7 と Vite 8 のみです。 ピア依存関係の範囲は
^7.0.0 || ^8.0.0です。Vite 6 はサポート対象ではありません。 executeContractEmitが正式な公開パスです。 他のバンドラー向けにカスタムプラグインを作る場合も、必ずこれを呼び出してください。読み込み → 出力 → 公開の一連の処理を再実装してはいけません。アトミックなリネームの不変条件(contract.d.tsをcontract.jsonより先にリネームすること)と、出力先ごとの FIFO キューは@prisma-next/cli/control-apiにあります。- ビルド時/本番環境での出力は行いません。 Vite プラグインは
vite devでのみ実行されます。vite build/本番環境では、prebuildスクリプトからprisma-next contract emitを実行してください。
ワークフロー — Vite(対応済みの方法)
1. プラグインをインストールする
pnpm add -D @prisma-next/vite-plugin-contract-emit
(または npm install --save-dev、yarn add -D、bun add -d を使用してください。プロジェクトのパッケージマネージャーに合わせて選択します。)
2. vite.config.ts を設定する
// vite.config.ts
import { defineConfig } from 'vite';
import { prismaVitePlugin } from '@prisma-next/vite-plugin-contract-emit';
export default defineConfig({
plugins: [prismaVitePlugin('prisma-next.config.ts')],
});
引数には、Vite のルートからの相対パスで prisma-next.config.ts を指定します。schema.psl や contract.ts のパスではありません。プラグインは設定ファイルを読み込み、コントラクトのソースを特定します。
3. 設定する(任意)
plugins: [
prismaVitePlugin('prisma-next.config.ts', {
debounceMs: 150, // delay before re-emitting (default 150)
logLevel: 'info', // 'silent' | 'info' | 'debug' (default 'info')
}),
],
logLevel: 'debug' はトラブルシューティング中のみ設定してください。コミットする設定ではデフォルトの 'info' を使用し、開発サーバーのログが過剰にならないようにします。
4. 開発ループを確認する
vite devを起動します。- 成功ログ
[prisma-next] emitted contract.d.ts + contract.jsonが出力されることを確認します。 prisma/schema.pslを編集します(例:モデルにフィールドを追加します)。- 約 150ms(デバウンス時間)以内に、再出力を示すログ行が出力されることを確認します。
- 新しいフィールドを使用するアプリケーションコードの型チェックを行います。開発サーバーを再起動しなくても成功するはずです。
プラグインが 設定ファイルのみを監視している という警告を出す場合は、よくある落とし穴を参照してください。
5. CI/本番ビルド
プラグインは vite build の実行時には動作しません。CI と本番環境へのデプロイでは、ビルド前の手順として prisma-next contract emit を実行してください。
// package.json
{
"scripts": {
"prebuild": "prisma-next contract emit",
"build": "vite build"
}
}
pnpm build を実行すると、build の前に prebuild が自動的に実行されます。
ワークフロー — React Router v7 フレームワークモード
Vite プラグインは @react-router/dev/vite と互換性があります。両方のプラグインは vite.config.ts に記述します。現時点では順序に制約はなく、Prisma Next プラグインによる再出力は、React Router 独自の SSR 再読み込みと並行して実行されます。
import { reactRouter } from '@react-router/dev/vite';
import { prismaVitePlugin } from '@prisma-next/vite-plugin-contract-emit';
export default defineConfig({
plugins: [
reactRouter(),
prismaVitePlugin('prisma-next.config.ts'),
],
});
標準的な設定と、開発ループを検証するスモークテストについては、examples/react-router-demo を参照してください。
よくある落とし穴
- プラグインの指定先を
prisma-next.config.tsではなくschema.pslにする。 引数に指定するのは設定ファイルのパスです。プラグインは設定ファイルを読み込み、コントラクトのソースを特定します。 - Vite 6 以前を使う。 サポート対象外です。Vite 7 または 8 にアップグレードしてください。
- プラグインが 「設定ファイルのみを監視しています。ローダーで解決された入力を利用できません。」 と警告する。 プラグインがローダーから
contract.source.inputsを解決できませんでした。フォールバックではprisma-next.config.ts自体のみを監視するため、コントラクトを編集しても再出力されません。原因として、読み込み中に設定ファイルでエラーが発生している、またはコントラクトのソースパスが Vite のルート外に解決されることが考えられます。まず設定エラーを修正し、次に設定内のコントラクトソースパスが Vite のルートからの相対パスであるか、ルート内にあることを確認してください。 vite buildが再出力すると期待する。 再出力されません。prebuildスクリプトを追加してください。- 開発中に出力エラーが発生する。 プラグインは Vite のエラーオーバーレイにエラーを表示します。オーバーレイを確認してください。根本的な原因はコントラクトの記述に関する問題です。解決には
prisma-next-debugに引き継いでください(PSL の構文、名前空間の欠落、拡張機能の競合など)。 - プラグインのピア依存範囲の変更を反映せずに依存関係を再インストールする。 PN がプラグインのピア依存範囲を更新したら、新しい範囲がロックファイルに反映されるよう、
pnpm installを再実行する必要があります。古いロックファイルを使い続けると、古いプラグインが残り、バージョン不一致に関する分かりにくい警告が表示されます。
Prisma Next でまだできないこと
- Next.js プラグイン。 ファーストパーティの
@prisma-next/next-plugin-*はありません。回避策:package.jsonのprebuildスクリプトからprisma-next contract emitを実行し、コントラクトが変更されたときは開発中に手動で実行してください。多くの Next.js プロジェクトでは、コントラクトソースの変更時に CLI を呼び出す小さなスクリプトをtsx --watchで開発時に実行しています。ファーストパーティの Next.js プラグインを希望する場合は、prisma-next-feedbackスキルを通じて機能リクエストを提出してください。 - Webpack、esbuild、Rollup、Turbopack のプラグイン。 ファーストパーティのものはまだありません。回避策:標準の
executeContractEmitインターフェースは@prisma-next/cli/control-apiにあります。バンドラーごとの小さなプラグインから、バンドラーの prebuild フックでこれを呼び出せますが、PN が代わりに提供することはありません。独自に作成する場合は、vite-plugin-contract-emitのソースが参考になります。お使いのバンドラー向けのファーストパーティプラグインを希望する場合は、prisma-next-feedbackスキルを通じて機能リクエストを提出してください。 vite buildとの統合。 プラグインが実行されるのはvite devのみです。回避策:prisma-next contract emitを実行するprebuildスクリプトを使用してください。vite build中にもプラグインを実行することを希望する場合は、prisma-next-feedbackスキルを通じて機能リクエストを提出してください。- Vite 6 以前。 サポート対象の一覧に含まれていません。回避策:Vite 7 または 8 にアップグレードしてください。Vite 6 を使い続ける必要がある場合は、
prisma-next-feedbackスキルを通じて機能リクエストを提出してください。
参考ファイル
- プラグイン自体の README:https://github.com/prisma/prisma-next/blob/main/packages/1-framework/3-tooling/vite-plugin-contract-emit/README.md — サポート対象の一覧、完全な API、アーキテクチャ図、カスタムプラグイン作成者向けの 標準の公開パス に関する警告を掲載しています。
- ADR 008(開発時の自動出力、CI での明示的な出力)— 開発時の自動出力と明示的な CI/ビルド手順を分ける理由を説明しています。
- ADR 032(開発時の自動出力統合)— プラグインと CLI コントロール API の統合仕様を説明しています。
チェックリスト
- プラグインの参照先がコントラクトのソースではなく、
prisma-next.config.tsになっている。 - Vite のバージョンが 7 または 8 である(
pnpm ls vite)。 -
vite devのログに、サーバー起動時の初回出力が表示される。 - コントラクトのソースを編集すると、再出力を示すログ行が表示される。
- CI/本番ビルド用の
prebuildスクリプト(または同等のもの)でprisma-next contract emitが実行される。 - プラグインが実行されることを
vite buildに期待していない。 - Vite 以外のバンドラーの場合は、PN がまだ対応していないことの項目を提示し、公式サポートを希望するユーザーを
prisma-next-feedbackに案内している。 - 存在しない
@prisma-next/next-plugin-contract-emitパッケージや、その他のバンドラー固有プラグインを捏造していない。