Next.js API開発の全手順？App Routerでの作り方【完全網羅】

モダンWeb開発2026.04.152026.04.15

執筆者編集部

MT Templates 編集部

監修者MT Templates 代表/編集長

大野浩史

この記事のポイント

Next.js APIはApp RouterのRoute HandlersをアプリのAPIフォルダに配置し、GETやPOSTを関数名でエクスポートするだけで外部サーバー不要のフルスタック開発が実現できる。

Next.jsでAPIを実装する具体的な手順を理解して、外部サーバーを使わずに安全で効率的なフルスタック開発を実現したいと考えていませんか。フロントエンドとバックエンドをシームレスに繋ぐ機能は、現代のWeb開発において欠かせない要素です。

こうした悩みや疑問を解決するために、本記事では以下の内容を分かりやすく解説します。

本記事の内容

App RouterとPages Routerに対応したAPIの作成手順
動的ルーティングやデータベース接続の実践的な実装方法
CORS対策や認証機能を含むセキュリティのベストプラクティス

Next.jsのRoute HandlersやAPI Routesを最大限に活用すれば、複雑な連携もひとつのフレームワークで完結可能です。

開発工数を最小限に抑えつつ、本番環境でも通用する堅牢なAPI設計を習得しましょう。効率的な開発スタイルを身につけるためにも、ぜひ最後まで一読ください。

Next.jsにおけるAPIの基礎知識

Next.jsのAPI連携を象徴するターコイズ色の光るネットワークグリッドの抽象イメージ

Next.jsとはReactベースのフルスタックフレームワークで、フロントエンドだけでなくサーバーサイドのロジックも実装できます。外部サーバーを介さずNext.js APIを活用すれば、単体でフルスタック開発が可能です。

実装方法はApp RouterとPages Routerで異なります。開発を効率化するために、まずは各システムの特性を学びましょう。

Route Handlersの全体像

Route Handlersは、Next.js App Routerの使い方で使われる新しいNext.js APIの実装方式です。Web標準のAPIをベースにしており、モダンで柔軟な記述を実現します。

appディレクトリ内のroute.jsやroute.tsで定義する
GETやPOSTなどHTTPメソッドごとに個別の関数をエクスポートする
Response.jsonでレスポンスを返却する

特定のルートに対してサーバー処理を直接書けるのが魅力です。例えばapp/api/user/route.tsを作れば、即座にエンドポイントが完成します。

API Routesの仕組み

API Routesは、従来のPages Routerで利用されるNext.js APIの実装方式です。Node.jsのハンドラーに近い形式で、直感的に記述できます。

項目	Route Handlers (App Router)	API Routes (Pages Router)
配置場所	app/api/パス/route.ts	pages/api/パス.ts
定義方法	各HTTPメソッドの関数をエクスポート	1つの関数内でメソッド判定
ベースAPI	Web Standard Request / Response	Node.js Http IncomingMessage
応答方法	return Response.json(data)	res.status(200).json(data)

pages/api内のファイル名がそのままエンドポイントのパスになります。現在は新しいApp Routerへの移行が推奨されている状況です。

ルーター移行時の注意点

App Routerへ移行する際は、Next.js APIの実装を大幅に変える必要があります。従来の書き方はそのまま使えないため、構造の再設計が必要です。

ディレクトリ構造とファイル名ルールをApp Router形式へ変更する
GETやPOSTを個別の非同期関数としてエクスポートする
cookiesやheadersなどの非同期APIを活用する

最新のNext.js 16以降は大半のAPIが非同期に対応しました。型安全性やビルド速度を向上させるためにも、最新機能の導入を推奨します。

Next.jsでのAPIの基本的な作り方

Next.jsでAPIエンドポイントを構築する際はApp RouterのRoute Handlersを使うのが標準的です。Web標準のAPIをベースにしており、型安全で柔軟なNext.js API開発を実現できます。

バックエンド処理をNext.js内で完結させれば、外部サーバー構築の手間を省き開発効率が劇的に向上します。ここでは最新のNext.jsを用いたAPI作成手順を5つのステップで解説します。

① 対象ディレクトリを作成する

APIのURLパスに対応するディレクトリをappディレクトリ内に作成します。一般的には他のページと区別するためapp/api/という構造にすることが多いでしょう。

例えば「/api/items」というエンドポイントならapp/api/items/ディレクトリを準備します。前提としてNext.js環境構築が完了している必要があります。作成時のポイントは以下の通りです。

ディレクトリ名がそのままURLパスになる
動的なパスを作る場合はディレクトリ名をブラケットで囲む

② ルーティング用ファイルを配置する

作成したディレクトリ内にroute.tsファイルを配置します。App RouterにおいてAPIの処理を記述するファイル名は、必ずこの名称でなければなりません。

Next.jsのファイルシステムに基づき、このファイルがある階層がAPIエンドポイントとして機能します。App RouterとPages Routerの主な違いを以下に示します。

配置場所：App Routerはapp/api/[リソース名]/route.ts、Pages Routerはpages/api/[リソース名].tsに配置します。
標準API：App RouterはWeb標準のRequest/Responseを使用し、Pages RouterはNode.jsのhttp.IncomingMessageを使用します。
実行環境：いずれもサーバーサイド専用ですが、App RouterはEdge Runtimeにも対応しています。

③ GETリクエスト処理を実装する

データの取得を行うGETリクエストは、HTTPメソッド名を関数名としてexportして実装します。データベースからの情報取得や外部API呼び出しにこのメソッドを活用しましょう。

// app/api/items/route.ts
export async function GET() {
  const data = [
    { id: 1, name: "Next.js入門書" },
    { id: 2, name: "TypeScript実践ガイド" }
  ];

  return Response.json(data);
}

Next.jsが関数名とメソッドを自動で紐付けるため、実装が非常にシンプルです。メソッドごとに定義を分けることで、可読性の高いコードが維持できます。

④ POSTリクエスト処理を実装する

データ保存やフォーム送信を扱う場合はPOSTリクエストの処理を記述します。最新のNext.js APIではNextRequestオブジェクトを用いてリクエストボディを解析可能です。

import { NextRequest } from 'next/server';

export async function POST(req: NextRequest) {
  const body = await req.json();
  console.log("受信データ", body);

  return Response.json({ message: "登録完了", data: body }, { status: 201 });
}

非同期処理でreq.jsonを呼び出すことで、型安全にデータを取り扱えます。バックエンド専用サーバーを立てずに複雑な処理を実装できるのが利点です。

⑤ 適切なレスポンスを返す

最後にクライアントへ適切なレスポンスとステータスコードを返します。処理が成功したか失敗したかを伝えることは、フロントエンドのエラーハンドリングに不可欠です。

基本的にはResponse.jsonやNextResponse.jsonを使用してデータを返却します。レスポンス時に活用する主要なステータスコードは以下の通りです。

200：リクエスト成功
201：新規作成成功
400：クライアント側の入力エラー
401：認証エラー
404：リソース未検出
500：サーバー側の不具合

正常系だけでなくtry-catch文によるエラー時のレスポンスも必ず実装してください。レスポンスや引数の型を厳密に扱う際は、Next.js TypeScript環境構築を併用すると本番環境でも安全に運用できる堅牢なAPIを構築できます。

Next.jsのAPIにおける動的ルーティングの実装手順

Next.jsロゴを中心に配置したターコイズカラーの近未来的なAPIネットワーク回路のイメージ

Next.js APIで特定のIDに基づいたデータを取得するには、動的ルーティングの実装が不可欠です。現在はApp RouterのRoute Handlersを用いて、効率的にAPIエンドポイントを構築する手法が主流となっています。

従来の方式と最新方式では、パラメータの取得方法やファイル構成に大きな違いがあります。Pages RouterとApp Routerにおける動的ルーティングの相違点を以下に整理します。

ファイル構成：Pages Routerはpages/api/posts/[id].js、App Routerはapp/api/posts/[id]/route.tsに配置します。
パラメータ取得：Pages RouterではreqQuery経由で取得しますが、App RouterではPromise型のparams引数をawaitして取り出します。
メソッド定義：Pages Routerはswitch文などで条件分岐するのに対し、App Routerは関数名をexportするだけで完結します。

① 動的なパスを設計する

まずはURL構造を決定し、どの部分を可変にするか設計を行います。Next.js APIではディレクトリ名にブラケットを使うことで、特定の値を変数として受け取ることが可能です。

リソースごとにファイルを作る手間が省けるため、柔軟なデータ操作が実現します。商品情報を扱う場合は、以下のようなパス設計が一般的です。

基本のパス：/api/items
動的なパス：/api/items/[slug]

② 専用フォルダを作成する

設計したパスに従い、プロジェクト内にディレクトリを作成します。App Routerでは、ディレクトリの構造がそのままAPIのURLパスとして反映される仕組みです。

具体例として「/api/items/[slug]」を作成する際の手順を紹介します。まずapp/apiの中にitemsフォルダを作り、その中に[slug]というフォルダを配置してください。

最後に[slug]フォルダ内へroute.tsを作成すれば、エンドポイントの準備は完了です。この構造により、APIのロジックを整理しやすくなるメリットがあります。

③ パラメータを取得するコードを書く

route.tsファイルにリクエスト処理を記述し、パスに含まれるパラメータを取り出します。最新のNext.jsではparamsの扱いが非同期に変更されたため、適切な記述が必要です。

実装コードの例を以下に記載します。

import { NextResponse } from 'next/server';

export async function GET(
  request: Request,
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;

  return NextResponse.json({
    message: `取得したIDは ${slug} です`,
    id: slug
  });
}

paramsの取得には必ずawaitを使用してください。レンダリング最適化のために非同期API化されたことが理由です。

④ 対象エンドポイントの動作を確認する

作成したNext.js APIが正しく動くか、ブラウザやツールを使ってテストします。ローカルサーバーを起動し、設定したURLへリクエストを送信しましょう。

確認手順は以下の通りです。

ローカルサーバーを起動する
ブラウザで http://localhost:3000/api/items/apple にアクセスする
指定したIDを含むJSONが表示されるか確認する

エラーが出る場合は、フォルダ名やファイル名が命名規則通りかチェックしてください。この機能を活用すれば、外部サーバーなしでフルスタックな開発が可能になります。

Next.jsのAPIを活用したバックエンド処理の実装

App Routerの導入により、Next.js APIの実装方法は大きく進化を遂げました。Route Handlersを活用すれば、フロントエンドと同じプロジェクト内でバックエンド処理を完結できます。

Next.js 16.2以降は型安全な開発が標準となり、より堅牢なシステム構築が可能です。以下では、Route Handlersを用いた具体的なバックエンド処理の実装パターンを紹介します。

Prismaによるデータベース接続

Next.js APIでデータベースを操作する際は、型安全なORMであるPrismaが最も適しています。TypeScriptと親和性が高く、スキーマ定義から型を自動生成できるため開発効率が劇的に向上します。

Route Handlers内でPrismaを利用し、安全にデータを扱うための基本的な流れは以下の通りです。

Prismaクライアントをシングルトンパターンで初期化する
route.tsファイル内でクライアントをインポートする
GETやPOSTなどの各メソッド内で非同期クエリを実行する
Response.jsonを用いて処理結果を返却する

最新のNext.jsでは、improved Caching APIsとPrismaを組み合わせて利用できます。データベースの更新に合わせてサーバーキャッシュを即座に最新化し、高いパフォーマンスを維持しましょう。

外部APIの呼び出し

Next.js APIを中継地点として使うことで、機密情報の保護やCORS制限の回避が可能です。外部APIとの通信には、Next.jsで機能が拡張されたWeb fetch APIを使用します。

Route Handlersを通じて外部のサービスと連携する主なメリットを紹介します。

APIキーをブラウザに公開せずサーバー側で隠蔽できる
受け取ったレスポンスをフロントエンド向けに加工できる
サーバー側でキャッシュ戦略を一元管理して高速化できる

POSTメソッド内で決済やメール送信のAPIを呼び出し、その結果をクライアントに返す実装が一般的です。最新バージョンではリクエストヘッダーやパラメータの処理も型安全に行えるため、ミスを防げます。

Auth.jsを用いた認証機能の実装

セキュアなNext.js APIを構築するために、Auth.js（旧NextAuth.js）の導入は欠かせません。Googleログインやメール認証などを、シンプルな設定だけでプロジェクトに統合できます。

App Router環境において、認証機能を実装するための具体的なステップは以下の通りです。

auth.tsなどの設定ファイルを用意してプロバイダーを定義する
middleware.tsを配置してAPI全体のアクセス権限をチェックする
各Route Handlers内でauth関数を呼び、セッション情報を取得する

Next.js Authの実装で認証済みのユーザーにのみデータ操作を許可することで、強固なセキュリティを実現できます。最新のReact Compilerによる最適化も進んでおり、認証状態に応じた高速なレスポンスが期待できるでしょう。

Next.jsのAPIにおけるセキュリティ対策

Next.jsのAPIを象徴するターコイズ色の光るデジタルネットワークのイメージ

Next.jsでAPIを構築する際はセキュリティ対策を最優先しましょう。フロントエンドとバックエンドが密接に連携するため、未対策のエンドポイントは重大な脆弱性になります。

App RouterやServer Actionsの普及によりサーバー処理が身近になった現代では、最新のセキュリティ慣習を取り入れることが不可欠です。Next.js APIにおける主なリスクと対策を以下の表にまとめました。

リスク要因	主な対策手法	期待される効果
機密情報の漏洩	環境変数の適切な管理と接頭辞の制限	APIキーやDB接続情報の露出防止
不正なデータ送信	Zodなどを用いたバリデーション	インジェクション攻撃や型エラーの回避
クロスサイト攻撃	CORSポリシーの設定とCSRF対策	許可されたドメイン以外のアクセス遮断
脆弱なエンドポイント	HTTPメソッドの制限と権限確認	意図しない操作や情報の破壊を防止

これらの対策を具体的にどのように実装すべきか解説します。

環境変数による機密情報の管理

APIキーなどの機密情報はソースコードに直接記述せず、必ず環境変数で管理しましょう。Next.js APIでは環境変数のプレフィックスによって、ブラウザに公開されるかどうかが決まります。

.env.localファイルの使用。ローカル開発ではこのファイルに値を記述し、必ずGitの管理対象から外してください。
NEXT_PUBLIC_の制限。この接頭辞がついた変数はクライアント側に露出するため、機密情報には絶対に使ってはいけません。
Vercel等の環境設定。本番環境ではホスティングサービスの管理画面から安全に環境変数を設定します。

特にNext.jsの最新バージョンでは、Server Actions内で環境変数を利用する際の安全性も向上しており、Next.js脆弱性への対策を併せて実施することで重要なリスクを抑えられます。

リクエストデータの検証

クライアントから送られてくるデータは、常に悪意があるものと想定して検証を行う必要があります。ブラウザ側のバリデーションだけでは不十分なため、サーバーサイドでのチェックが必須です。

Zod等のライブラリ活用。スキーマ定義によりリクエストの型と内容を厳密にチェックしましょう。
Taint APIの利用。機密オブジェクトが誤ってクライアントに渡されるのを防ぎます。
DTOの導入。データベースの情報をそのまま返さず、必要な項目のみを抽出してレスポンスを作成してください。

これにより、不正なスクリプト注入や権限のないデータへのアクセスを効果的に防止できます。

CORSポリシーの適切な設定

CORSは異なるオリジンからのリソースアクセスを制御する仕組みです。Next.js APIを公開する際は、このポリシーを適切に設定する必要があります。

特定のドメインのみを許可。Access-Control-Allow-Originにはワイルドカードを使わず、信頼できるドメインを指定しましょう。
Middlewareでの一括管理。middleware.tsを使うことで、アプリ全体のレスポンスに対して一元的に設定を適用可能です。
セキュリティヘッダーの追加。モダンなブラウザがサポートする追加のヘッダーを併用することが推奨されます。

許可する範囲を最小限に留めることが、クロスサイト攻撃のリスクを下げる鍵です。Next.js Middlewareによる制御を活用すれば、CORSやセキュリティヘッダーをエンドポイント横断で一元管理できます。

不正なHTTPメソッドの遮断

APIエンドポイントが想定していないHTTPメソッドを受け入れないように制限することも重要です。不適切なメソッドの許可は、データの予期せぬ改ざんを招く恐れがあります。

Route Handlersの活用。App RouterではGETやPOSTなどの関数名により、受け付けるメソッドを明示的に定義しましょう。
405 Method Not Allowedの返却。許可されていないメソッドには専用のステータスコードを返すよう実装します。
Server Actionsの特性理解。Server ActionsはPOSTで実行されますが、内部でのユーザー権限確認は怠らないでください。

正しくメソッドを制限することで、動作が予測可能になり堅牢なバックエンド処理を実現できます。

Next.jsにおけるAPI設計のベストプラクティス

ターコイズに輝くNext.jsロゴとデータが融合する近未来的で信頼感のあるAPIインフラのイメージ

Next.js APIを設計する際は、パフォーマンスとメンテナンス性の両立が大切です。最新のApp RouterではRoute Handlersが推奨されており、Web標準に基づいた堅牢な実装ができます。

Next.js APIをバックエンド開発の基盤として活用しましょう。設計指針を明確にすることで、フルスタックな開発を効率的に進めることが可能です。

BFF層としての役割の明確化

Next.js API機能は、Next.jsバックエンドの構築で扱うようにフロントエンド専用のバックエンドであるBFFとして活用するのが最適です。複雑なデータの加工をサーバーサイドで行えば、クライアント側の負荷を大幅に軽減できます。

この構成はセキュリティ向上やコードの簡略化に繋がります。外部の認証キーを隠蔽しながら、フロントエンドに必要なデータだけを整形して返却しましょう。

項目	サーバー（BFF/Route Handlers）	クライアント（Browser）
主な役割	機密情報の保持や大量データの整形	UIの表示とユーザー操作の受付
セキュリティ	環境変数を安全に使用可能	公開可能な情報のみを表示
パフォーマンス	外部APIと高速に通信	軽量化されたデータを受信

重い処理をBFF層に集約し、フロントエンドを表示に専念させます。この役割分担によって、保守性の高いNext.js API環境が整います。

Edge Runtimeを活用した処理の高速化

APIの応答速度を高めるには、Edge Runtimeの利用が効果的です。ユーザーに近いエッジサーバーで実行されるため、低遅延なレスポンスが実現します。

Edge Runtimeは、特に認証の検証やパーソナライズ処理で真価を発揮します。Node.jsランタイムより起動が速く、グローバルなスケーラビリティも確保できる点が特徴です。

ランタイムの設定：export const runtime = 'edge' を記述して切り替える
高速な応答：物理的な距離を縮めてTTFBを大幅に改善する
非同期処理の効率：AI連携などのストリーミングレスポンスを円滑に処理する

物理的なネットワーク遅延の最小化は、ユーザー体験を向上させます。処理内容に合わせて、Next.js APIのランタイムを適切に選択し、Next.jsキャッシュも組み合わせてレスポンスを最適化してください。

共通エラーハンドラーの構築

信頼性の高いAPIには、エラーハンドリングの共通化が不可欠です。各エンドポイントで個別に処理を書くと、コードの重複やレスポンス形式のばらつきを招きます。

共通の基盤を構築すれば、型安全性を保ちながら予期せぬクラッシュを防げます。ステータスコードに応じたエラーメッセージを、統一的に管理する仕組みを整えましょう。

カスタムエラークラスの定義：ステータスコードを保持できるクラスをErrorから継承して作る
ラッパー関数の利用：fetch処理などをラップして自動でエラーをスローさせる
統一されたレスポンス形式：常に一貫したJSON形式でエラー内容を返却する

共通化により、開発者はビジネスロジックの実装に専念できます。エラー処理の細部に悩む時間が減り、開発効率が向上するはずです。

本番環境でのパフォーマンス監視

APIを本番で運用する際は、継続的な監視と最適化が求められます。開発環境では見えにくいボトルネックを早期に発見し、対策を講じることが重要です。

App Routerのキャッシュ機構は強力ですが、意図しないデータ表示を招く場合もあります。適切なキャッシュ制御を行いながら、実際のレスポンス速度を注視しましょう。

レスポンスキャッシュの活用：再検証を設定して不要なリクエストを削減する
環境ごとの管理：開発と本番でタイムアウト設定などを適切に切り替える
ローディングの最適化：待ち時間にスケルトンスクリーンを表示して体感速度を上げる

ログを分析して成功率や応答時間を可視化します。システムの安定性を保つことで、ユーザーが安心して使えるNext.js APIを提供し続けられます。

Next.jsのAPI開発のトラブルシューティング

Next.jsのロゴが中心に配置されたターコイズカラーの近未来的な高速APIデータ通信イメージ

Next.js APIを構築する際、デプロイ後や特定の条件下でエラーが発生することがあります。Server ActionsやRoute Handlersなど新機能の登場により、従来のPages Routerとは異なる原因でトラブルが生じがちです。

開発の最終段階で困らないよう、頻出するエラーの解決策を事前に把握しておくことが欠かせません。Next.js APIの安定稼働を目指しましょう。

HTTPステータス405発生時の対処法

HTTPステータス405は、リクエストしたメソッドがエンドポイントで許可されていないことを示します。Next.js API開発では、設計の不整合やデプロイ環境の制約が主な原因です。

405エラーが発生した際の主な原因と対処法をまとめました。

原因	内容	対処法
メソッドの不一致	クライアントとAPI側のメソッド定義が異なる	API側の関数を確認し一致させる
Server Actionsの制約	サーバーレス環境で動的処理が制限されている	dynamicをforce-dynamicに設定する
設計の不備	URLは正しいが操作権限が定義されていない	適切なHTTPメソッドを定義し直す

まずは開発者ツールのネットワークタブを確認し、送信メソッドとAPI側の関数名称を照らし合わせてください。デプロイ環境での制限を避けるため、Next.js APIの設定最適化が必要になる場合もあります。