Next.jsとPrisma：データベースアクセスの新しい標準

はじめに

このブログ記事では、Next.jsとPrismaを使用してデータベースアクセスを行う方法について詳しく説明します。Next.jsはReactベースのフレームワークであり、PrismaはデータベースクエリとORM（Object-Relational Mapping）のためのモダンなツールです。組み合わせることで、効率的で堅牢なデータベースアクセスが可能となります。

Next.jsとPrismaの導入

まず、Next.jsとPrismaをプロジェクトに導入します。

# Next.jsプロジェクトの作成
npx create-next-app my-nextjs-app

# Prisma CLIのインストール
npm install prisma --save-dev

プロジェクトの設定とPrismaの初期化については、公式ドキュメントとPrismaのドキュメントを参照してください。

データベースモデルの作成

Prismaを使用してデータベースモデルを定義します。例として、ユーザーモデルを作成します。

// schema.prisma

model User {
  id    Int      @id @default(autoincrement())
  name  String
  email String   @unique
}

データのクエリと操作

Prismaを使用してデータのクエリと操作を行います。例として、ユーザーの作成と取得を示します。

// ユーザーの作成
const newUser = await prisma.user.create({
  data: {
    name: "John Doe",
    email: "john@example.com",
  },
});

// ユーザーの取得
const users = await prisma.user.findMany();

APIルートの作成

Next.jsのAPIルートを使用して、データベース操作を公開します。APIルートをpages/apiディレクトリに作成できます。

// pages/api/users.js

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

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await prisma.user.findMany();
    res.status(200).json(users);
  } else if (req.method === 'POST') {
    const newUser = await prisma.user.create({
      data: req.body,
    });
    res.status(201).json(newUser);
  }
}

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

Next.jsを使用して、APIからデータを取得し、フロントエンドで表示します。例として、ユーザーリストの表示を示します。

// pages/index.js

import { useEffect, useState } from 'react';

function Home() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h1>ユーザーリスト</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

まとめ

Next.jsとPrismaを組み合わせることで、効率的なデータベースアクセスが可能になります。これにより、モダンなウェブアプリケーションの開発が容易になります。さまざまなプロジェクトでこの組み合わせを活用して、効率的で堅牢なデータベース操作を実現しましょう。

AIko Code Symphony