Next.jsのAPI RoutesとPrismaで小さなアプリを完結させる
「Next.jsってフロントエンドのフレームワークでしょ？」
多くの人がそう思っているはずです。確かに、ReactをベースにしたUI構築が中心であり、SSRやSSGといったレンダリング戦略でSEOを強化できるのが大きな魅力です。一方、実はNext.jsには API Routes という仕組みがあり、フロントエンドだけでなく簡易的なバックエンド を持てることをご存じでしょうか？
さらに、ORMの定番である Prisma を組み合わせれば、データベース操作までNext.jsのプロジェクト内で完結させることができます。小規模なアプリやプロトタイプであれば「Next.jsだけでフロントもバックも作れる」というのは大きな強みです。今回はその概要を紹介します。
目次
API Routesとは？
Next.jsのAPI Routesは、簡単にいうと「Next.jsの中にサーバーサイドのエンドポイントを生やせる仕組み」です。
たとえば pages/api/hello.ts に以下のようなコードを書くだけで、/api/hello というエンドポイントが利用できるようになります。
// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from ‘next’;
export default function handler(req: NextApiRequest, res: NextApiResponse) {
res.status(200).json({ message: ‘Hello from API Route!’ });
}
ブラウザでアクセスすると {“message”:”Hello from API Route!”} と返ってきます。
フロントエンドからも fetch(“/api/hello”) で呼び出せるので、外部サーバーを用意しなくても「バックエンドっぽい処理」をNext.js内で書けるわけです。
App Router（app ディレクトリ）を使う場合は、次のように route.ts を配置します。
// app/api/hello/route.ts
import { NextResponse } from ‘next/server’;
export async function GET() {
return NextResponse.json({ message: ‘Hello from App Router API!’ });
}
これで http://localhost:3000/api/hello にアクセスすればOKです。
Prismaを組み合わせる
API Routesだけでも便利ですが、実際のアプリではデータベースとやり取りしたい場面が多いですよね。そこで活躍するのが Prisma です。
Prismaは型安全なORMで、スキーマファイルを元にDB構造を管理できます。たとえば schema.prisma に以下のように書くとします。
model User {
id Int @id @default(autoincrement())
name String
email String @unique
}
マイグレーションを実行すればDBにテーブルが作成されます。
あとはAPI Routeの中でPrismaクライアントを使って操作すればOKです。
// app/api/users/route.ts
import { NextResponse } from ‘next/server’;
import { prisma } from ‘@/lib/prisma’;
export async function GET() {
const users = await prisma.user.findMany();
return NextResponse.json(users);
}
これで /api/users を叩けば、データベースのユーザー一覧がJSONで返ってきます。
フロントからは useEffect でfetchして画面に表示するだけでOKです。
小さなアプリならこれで十分
Next.jsのAPI RoutesとPrismaを使えば、フロント・バック・DB操作が1つのリポジトリで完結します。
・プロトタイプを素早く作りたい
・管理画面や小規模なツールを社内利用する
・外部APIと少しだけDBを組み合わせたい
こういったケースでは「Next.js単体」で完結できるのは大きなメリットです。サーバーやバックエンドの環境を別で立てる必要もなく、デプロイもVercelなどを使えばスムーズに済みます。
ただし規模が大きい場合は注意
もちろん、すべてのケースに万能というわけではありません。
ユーザー数が増えたり、複雑なドメインロジックを扱ったり、大規模なAPI設計が必要になったりする場合は、普段のように別にバックエンド側を用意したほうがスムーズだと思います。
まとめ
Next.jsは「フロント専用のフレームワーク」ではなく、API RoutesとPrismaを組み合わせれば小さなバックエンドを内包できるというのが大きな魅力です。
・フロントとバックが同じコードベースに収まる
・Prismaで型安全なDB操作ができる
・プロトタイプや小規模アプリならこれだけで十分
そんな手軽さこそ、Next.jsの強みのひとつだと感じます。
小さなアプリを試しに作ってみたいときには、ぜひ「Next.js + Prisma」の組み合わせを試してみてください。
