Next.js(Typescript)でPrismaのseedデータを保存する

はじめに

個人開発中にseedファイルを作成して、データベースに初期データを投入したいと考えました。

過去にRailsでseedファイルを作成してデータベースに反映させた経験はあるものの、Next.js × Prismaの組み合わせで実装するのは初めてだったため、備忘録として実施方法を残します。

環境

• React 18.3.1
• Next.js 14.2.16
• Prisma 5.21.1
• TypeScript 5.6.3

実装手順

1.seedファイルを作成する

私は個人開発で犬の情報を登録する実装を行なっていたため、犬種リストをseedファイルで管理するようにしました。
以下はbreedsテーブルに対して、配列dogBreedsの要素を挿入するseedです。

prismaディレクトリ内にseed.tsファイルを作成して以下のように記述をします。

prisma/seed.ts

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  // 初期データとして投入したいリストを配列で作成
  const dogBreeds = [
      "秋田犬",
      "アメリカンコッカー・スパニエル",
      "イタリアングレーハウンド",
      "ウェルシュ・コーギー",
      ~ 省略 ~
      "ヨークシャーテリア", 
      "ラブラドールレトリバー",
  ]

  try {
    // 配列から1つずつ要素を取得し、breedテーブルに保存する
    for (const breed of dogBreeds) {
      await prisma.breed.upsert({
        where: { name: breed },   // nameの値がbreedに一致するレコードがあれば
        update: { name: breed },  // nameの値を更新
        create: { name: breed },　// 一致するレコードがなければ新規作成する
      });
    }
  } catch (error) {
    console.log(error)
    process.exit(1)  // スクリプト実行時にエラー発生したら、異常終了としてプロセス終了をする
  } finally {
    await prisma.$disconnect(); //prismaとの接続を遮断
  }
}

2. ライブラリの導入

TypeScriptのseedファイルを実行できるように、ライブラリを導入します。
ターミナルで以下のコマンドを追加してください。

npm install -D typescript ts-node @types/node

3. package.jsonへコマンドを追加

package.json内にseedコマンドを追加します。以下のように追加してください。

package.json

  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint"
  },
  
  // 以下を追加
  "prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
  },

このコマンドを追加することで、npx prisma db seedコマンドでseedファイルの実行をすることができます。

Next.jsの場合はコンパイルをする際にオプション設定が必要です。"ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.tsのように記載しましょう。

オプションを設定せずに、"seed": "ts-node prisma/seed.ts"と記載すると、以下のようなエラーが発生するので注意です。

エラーメッセージ

An error occurred while running the seed command:
Error: Command failed with exit code 1: ts-node prisma/seed.ts

4. seedコマンドを実行

npx prisma db seed

これでデータベースに対してseedファイル内の情報が保存されたはずです！

最後に

私はpackage.json内のseedコマンドにオプションをつけておらず、暫くエラーにハマりました。
Prismaの公式ドキュメントにも記載しているのですが、下部に書かれていて見逃してしまっていました...!

ぜひ今後Next.jsでseedファイルを作成されたい方は、参考にしてみてください。