Next.js × PrismaでAPI経由の一覧表示を実装する

個人開発の中で、フロント側でクエリを作成し、絞り込み検索まで処理を作ろうとして詰まった ことがありました。
具体的には、フロントエンドで filterを組み込んだクエリを作成し、fetchを使ってバックエンドのAPIを叩く ことで、検索結果を取得しようとしました。

しかし、思うようにデータを取得できず、ご指摘を頂き、フロント側ではfetchを用いて適切にAPIを呼び出すべき という結論に至りました。
そこで今回は、Next.js × Prisma を使用して API 経由でデータを取得し、一覧表示を実装する方法 を記述したいと思います。

フロントエンドでは fetch を使用してバックエンドのAPIを叩き、バックエンドでは Prisma を用いてデータベースから情報を取得し、フロントにレスポンスを返します。

目次

1. フロントエンドの実装（データ取得と一覧表示）

2. バックエンドのAPI実装（Prismaでデータ取得）

3. フロントとバックを接続

4. まとめ

1. フロントエンドの実装（データ取得と一覧表示）

まず、Next.jsの useEffect と useState を使って、フロントエンドでデータを取得し、
一覧表示を行います。

1-1. APIからデータを取得する関数

import { useEffect, useState } from "react";

type Post = {
  id: number;
  title: string;
  content: string;
};

export default function PostList() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await fetch("/api/posts"); // APIエンドポイントを叩く
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        console.error("データ取得エラー:", error);
      }
    };

    fetchPosts();
  }, []);

  return (
    <div>
      <h1>記事一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

1-2. ポイント

• useEffect を使い、コンポーネントがマウントされたときに fetch でAPIを叩く

• useState で取得したデータを管理し、一覧表示

• 非同期処理 (async/await) を使ってデータを取得

2. バックエンドのAPI実装（Prismaでデータ取得）

続いて、Next.jsのAPIルート (app/api/posts/route.ts) を作成し、
Prismaを使ってデータを取得します。

2-1. Prismaクライアントのセットアップ

まず、Prismaをインストールしてセットアップしておきます。

npm install @prisma/client

2-2. APIエンドポイントの作成

/app/api/posts/route.ts

import { NextRequest, NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export const GET = async (req: NextRequest) => {
  try {
    const posts = await prisma.post.findMany(); // DBからデータを取得
    return NextResponse.json(posts, { status: 200 });
  } catch (error) {
    return NextResponse.json({ error: "データ取得に失敗しました" }, { status: 500 });
  }
};

2-3. Prismaのモデル定義

prisma/schema.prisma

model Post {
  id      Int    @id @default(autoincrement())
  title   String
  content String
}

データベースのセットアップ:

npx prisma migrate dev --name init

3. フロントとバックを接続

• フロント (PostList.tsx) で fetch('/api/posts') を実行

• バックエンド (api/posts/route.ts) でデータを取得し、JSONでレスポンス

• フロントで受け取ったデータを setPosts でステート管理し、一覧表示

4. まとめ

✅ Next.jsのAPIルート (app/api/posts/route.ts) を作成
✅ Prismaでデータを取得し、レスポンスを返す
✅ フロントで fetch を使いデータを取得し、一覧表示を実装

これで、API経由での一覧表示が完成🥇🐧

次はschema.prismaの書き方について書こうかな
@relation属性のところ難しいですよね、、笑

Zya👋