OpenAINext.js2025/02/28 14:00

Building APIs with Next.js

要点だけを先に読めるように短く再構成したセクションです。

元記事

Quick Digest

要約

要点だけを先に読めるように短く再構成したセクションです。

openaijamodel: gpt-5-mini-2025-08-07

Next.jsでAPIを構築する方法(要約)

Key Points

  • App Router推奨
  • Route Handlersで複数メソッド
  • SPA出力はAPI制約あり

Summary

Next.jsのApp RouterとRoute Handlersを使ったAPI構築の実践的ガイドです。プロジェクトセットアップ、app/.../route.ts で複数HTTPメソッドをエクスポートするパターン、標準Web Request/Responseの扱い、クエリ・ヘッダ・クッキー処理、動的ルート、プロキシ(BFF)用途、共有ミドルウェアの作り方、デプロイとSPA出力時の制約までをカバーします。エンジニアがすぐ実装できる点に絞ってまとめています。

Key Points

  • 初期化: npx create-next-app@latest --api でAPIの雛形を作成。
  • ファイル配置: app/api/<route>/route.tsexport async function GET/POST/... を実装して同一エンドポイントで複数メソッドを扱う。
  • Web標準API: ハンドラは標準の Request を受け取り Response を返す。必要に応じて NextRequest/NextResponsenext/headerscookies() を利用。
  • 動的ルート: app/api/users/[id]/route.tsparams.id を取得してGET/DELETEなどの処理を実装。
  • プロキシ/BFF: 外部APIへのフォワード、認証付与、レスポンス変換でクライアントを簡素化。
  • 共有ミドルウェア: 認証やログを共通関数(例: withAuth)でラップして再利用。
  • デプロイ/SPA注意点: next start やVercelでRoute Handlersは有効。output: 'export' の静的(SPA)出力ではサーバー処理は動作しないため、APIを別ホストする必要がある。
  • いつ作らないか: データがアプリ内部のみで完結するならServer Componentsで直接fetchし、公開APIは不要。

Quick Steps

  1. npx create-next-app@latest --api
  2. app/api/<route>/route.ts を作り GET/POST をエクスポート
  3. リクエストは Request/NextRequest で読み取り、Response を返す
  4. 認証やログは共通ラッパーで共有
  5. SPA出力を使う場合は外部にAPIを用意

Full Translation

翻訳

原文の流れを保ったまま読める翻訳セクションです。

openaijamodel: gpt-5-mini-2025-08-07

Next.jsでAPIを構築する

概要

Next.jsでAPIを構築する方法を学びます。Next.jsはサーバーサイドで動作するAPIエンドポイントを簡単に作成でき、アプリケーションのフロントエンドと同一リポジトリでAPIを管理できます。

主な方法

  • Pages Router(pages/api
    • 従来の方法。pages/api/*.js にエンドポイントを作成すると、自動的にAPIルートになります。
  • App Router(Route Handlers)
    • app ディレクトリを使う場合、app/api/.../route.js のようにハンドラを定義します。HTTPメソッドごとに GET/POST 等の関数をエクスポートします。
  • Edge Runtime と Node.js Runtime
    • runtime = 'edge' を使うと低レイテンシのEdge環境で動作しますが、Nodeの組み込みモジュールが使えないなどの制約があります。

サンプル

  • Pages Router の例(pages/api/hello.js):

    export default function handler(req, res) { res.status(200).json({ message: 'Hello from Next.js API' }) }

  • App Router の例(app/api/hello/route.js):

    export function GET(request) { return new Response(JSON.stringify({ message: 'Hello from Next.js API' }), { status: 200, headers: { 'Content-Type': 'application/json' } }) }

注意点とベストプラクティス

  • 入力バリデーションとエラーハンドリングを行う。
  • 長時間実行する処理は背景ジョブやサーバーレス関数で切り離す。
  • Edge Runtime を使う場合、サポートされていないAPI(例: 一部のNode標準モジュール)に注意する。
  • 認証/認可はCookieやヘッダー、トークンを使って適切に実装する。

デプロイと運用

  • Vercel などのホスティングにそのままデプロイ可能。ローカルでの開発は npm run dev(または next dev)を使用。
  • ログ、モニタリング、レート制限を導入して運用性を高める。

まとめ

Next.jsを使えば、フロントエンドと同じフレームワーク内でAPIを素早く構築できます。用途に応じて pages/apiapp の Route Handlers を使い分け、ランタイムの制約を理解した上で設計してください。