✅ はじめに

この記事では、Next.js に ORM である Prisma の最新バージョン「Prisma 7」をインストール＆セットアップする手順ガイドです 📝

基本的には、Prisma 公式サイトで公開されている記事 (https://www.prisma.io/docs/guides/nextjs) をベースに記事にしています。

本記事では、DB に Postgres (Neon) を使用して、簡単な記事投稿アプリを作成します。SQLite や MySQL 等の DB を使用する設定は、各々の設定方法がありますので各自 Prisma 公式サイトをご覧ください。

1. まずは、Next.js のインストール

Next.js のインストールをしましょう。インストール後、プロジェクトフォルダに移動してください。移動したら code . コマンド等でプロジェクトフォルダをエディタで開いておきましょう。

Next.js のインストール → プロジェクトフォルダ移動 → エディタ起動

npx create-next-app@latest project-name
cd project-name

code .

2. Prisma 関連のインストール

次に、Prisma 関連パッケージのインストールをします。

npm install prisma tsx @types/pg --save-dev
npm install @prisma/client @prisma/adapter-pg dotenv pg

3. Prisma の初期化設定

以下のコマンドを実行して Prisma を初期化します。

npx prisma init

上記のコマンドを実行したら、以下の３つのファイルがプロフェクトフォルダに生成されます。

prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

generator client {
  provider = "prisma-client"
  output   = "../app/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

prisma.config.ts

// This file was generated by Prisma and assumes you have installed the following:
// npm install --save-dev prisma dotenv
import "dotenv/config";
import { defineConfig, env } from "prisma/config";

export default defineConfig({
  schema: "prisma/schema.prisma",
  migrations: {
    path: "prisma/migrations",
  },
  datasource: {
    url: env("DATABASE_URL"),
  },
});

.env

// （説明文省略）

DATABASE_URL="..."

4. データベースの接続情報を `.env` に貼り付ける

次に、データベースの接続情報を .env ファイルに貼り付けましょう。今回の記事では、Neon を使用して Postgres のデータベース接続情報を .env に貼り付けている前提で進めています。

.env

DATABASE_URL=postgresql://...

5. スキーマ情報の追加

prisma/schema.prisma にデータベース構造の情報を追記しましょう。例として、以下のように「Post モデル」の情報をファイルに追記します。

prisma/schema.prisma

    // ...
    
    generator client {
      provider = "prisma-client"
      output   = "../app/generated/prisma"
    }
    
    datasource db {
      provider = "postgresql"
    }
    
+   model Post {
+     id      Int    @id @default(autoincrement())
+     title   String
+     content String
+     published Boolean @default(false)
+   }

6. Prisma Client の生成

Prisma Client を生成します。これは、Prisma のスキーマ内容を読み込んで、型安全にデータベースを操作するための専用ドライバを作成する、みたいな感じです。以下のコマンドを実行してください。

npx prisma generate

すると、app/generated フォルダが作成されて、そのフォルダ以下に Prisma Client 関連のファイルがいろいろ生成されます。

7. データベースにスキーマ情報を反映

データベースに prisma/schema.prisma ファイルのスキーマ情報を反映させます。以下のコマンドを実行してください。

npx prisma db push

実行後、ご自身のデータベースを確認してみてください。スキーマに記述された内容がデータベースに反映されていると思います。

8. Prisma Client のセットアップ

次に、Prisma Client をセットアップしてデータベースに接続できるようにしましょう。lib/prisma.ts ファイルを作成して、以下のコードを記述してください。

lib/prisma.ts

import { PrismaClient } from '../app/generated/prisma/client'
import { PrismaPg } from '@prisma/adapter-pg'

const globalForPrisma = global as unknown as {
    prisma: PrismaClient
}

const adapter = new PrismaPg({
  connectionString: process.env.DATABASE_URL,
})

const prisma = globalForPrisma.prisma || new PrismaClient({
  adapter,
})

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

export default prisma

上記のコードは、Prisma Client をグローバルオブジェクトにアタッチさせるためのファイルです。これにより、アプリケーション内でクライアントのインスタンスが１つだけ作成されます。

開発モードで Prisma ORM を Next.js と併用する際のホットリロード対策をするためのコード ... なのですが、詳しく理解できなくても、Next.js と Prisma を一緒に使用するときに必要になるファイル、と思っていただけると良いなと思います。

9. DB から記事情報を取得して表示

早速、DB から情報を取得して記事情報をブラウザに表示させましょう。まず DB には、まだ記事情報が登録されていないので、DB に記事情報をインサートしてみましょう。

Neon の場合は、ブラウザ上から DB のインサートを行えますので記事の登録をしてみましょう。

DB に記事情報を登録できたら、app/page.tsx を以下のように編集しましょう。const posts = await prisma.post.findMany(); で記事情報を取得し return 内で展開して記事情報を表示しています。

app/page.tsx

import prisma from "@/lib/prisma";

export default async function Home() {
  const posts = await prisma.post.findMany();
  
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8 text-[#333333]">Blog</h1>
      <ol className="list-decimal list-inside">
        {posts.map((post) => (
          <li key={post.id} className="mb-2">
            {post.title} : {post.content}
          </li>
        ))}
      </ol>
    </div>
  );
}

✅ まとめ

以上、Next.js と Prisma 7 のセットアップをしてみました。以前の Prisma セットアップと比較すると、インストールする必要のあるパッケージが多くなった感じだと思いますが、最新の Prisma としてのメリットもありますので、是非公式サイトも参考にして Prisma を試していただければ思います。

それでは！(=ﾟωﾟ)ﾉ