Prismaとは？

Prismaは、Next.jsアプリケーションにおけるデータベース操作を効率化する次世代のORM（Object-Relational Mapping）ツールです。Prismaを利用すると、データベースのスキーマ管理、クエリ作成、データベースマイグレーションなどを型安全に行うことができ、TypeScriptとの高い親和性があります。この記事では、Prismaの導入方法から、Next.jsでの実践的なデータ操作までの手順を解説します。

Prismaのセットアップ

Next.jsプロジェクトにPrismaを導入する最初のステップは、Prisma Clientのインストールです。以下のコマンドを使用してインストールします。

npm install @prisma/client
npx prisma init

このコマンドにより、prismaディレクトリが作成され、schema.prismaというファイルでデータベースのスキーマを定義します。初期設定ではSQLiteデータベースが指定されていますが、PostgreSQLやMySQLなど他のデータベースも利用可能です。 次に、Prismaのスキーマを定義します。例えば、ブログアプリケーションで使用されるPostモデルを次のように設定します。

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  createdAt DateTime @default(now())
}

Prisma Clientの生成とデータベースマイグレーション

スキーマを定義したら、以下のコマンドでPrisma Clientを生成し、データベースにスキーマを反映させます。

npx prisma generate
npx prisma migrate dev --name init

これにより、データベースに必要なテーブルが作成され、Prisma Clientを使用してアプリケーションからデータベースにアクセスできるようになります。

Next.jsでPrismaを使ったデータ取得

Next.jsでは、Prisma Clientを使用してデータベースからデータを取得できます。たとえば、ブログの投稿を取得するAPIエンドポイントを作成するには、pages/api/posts.jsに以下のコードを追加します。

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const posts = await prisma.post.findMany();
    res.status(200).json(posts);
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

このエンドポイントを利用して、/api/postsにアクセスすると、データベースの投稿データが取得できます。

フロントエンドでのデータ表示

APIエンドポイントからデータを取得して表示するために、Next.jsのページコンポーネントでfetch関数を使用します。

import { useEffect, useState } from 'react';
export default function Posts() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch('/api/posts')
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);
  return (
    <div>
      <h1>All Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

これにより、フロントエンドでデータベースから取得した投稿が表示されるようになります。

サーバーサイドレンダリング（SSR）でのPrisma利用

Prismaは、Next.jsのgetServerSidePropsやgetStaticPropsを使用して、サーバーサイドレンダリングや静的サイト生成のためのデータフェッチにも対応しています。getServerSidePropsでのデータ取得例は以下の通りです。

export async function getServerSideProps() {
  const posts = await prisma.post.findMany();
  return { props: { posts } };
}

このようにして、ビルド時やリクエスト時にサーバー側でデータを取得し、クライアントに提供することができます。

まとめ

Prismaは、Next.jsと組み合わせることで、型安全なデータベース操作と効率的な開発環境を提供します。API Routesを使ったデータ取得やサーバーサイドレンダリングでの活用など、多くの場面で柔軟に対応できるため、データベースを活用したフルスタックアプリケーションの構築に最適です。 Prismaを導入して、Next.jsでのデータ操作を強化しましょう。