Skip to content

Next.jsのサーバー機能#

Next.jsとPrismaでWebアプリケーションを作る2回目です。 最初からやりたい場合はナビゲーションから初回を開いてください。

従来のReact開発では、フロントエンド(ブラウザで動く部分)とバックエンド(サーバーで動く部分)を別々のプロジェクトとして開発していましたが、Next.jsではこれらを一つのプロジェクト内で統合的に開発できます。

Next.jsには「API Routes」という機能があり、これを使うことでサーバーサイドの処理を同じプロジェクト内に作成できます。従来のNest.jsのようにサーバープロジェクトを別途作る必要がなくなります。

API Routesの作成#

前回作成したmynextappプロジェクトを使って、API Routesを追加しましょう。

ターミナルでmynextappディレクトリに移動し、以下の通りにファイルを作成します。

mkdir -p app/api/hello

次に、app/api/hello/route.tsというファイルを作成します:

export async function GET() {
  return Response.json({ message: 'Hello World!' })
}

これだけで、API Routeができました!実際に使えるのか確認してみましょう。

ターミナルでnpm run devコマンドを実行して開発サーバーを起動し、ブラウザで http://localhost:3000/api/hello にアクセスしてみましょう。

{"message":"Hello World!"}

このようにJSONレスポンスが表示されていれば成功です!

API Routesの修正#

作成したAPI Routeを少し修正してみましょう。app/api/hello/route.tsを開いて以下のように変更します:

export async function GET() {
  return Response.json({ 
    message: 'Hello World! そして世界へ', 
    date: new Date().toISOString() 
  })
}

ブラウザをリロードして http://localhost:3000/api/hello を確認してみると、変更が反映されて以下のように表示されているはずです:

{"message":"Hello World! そして世界へ","date":"2025-05-02T12:34:56.789Z"}

date値は現在時刻によって変わります。

POST リクエストの処理#

API Routesでは様々なHTTPメソッドを処理できます。例えば、POSTリクエストを処理する方法を見てみましょう。

app/api/hello/route.tsに以下のコードを追加します:

export async function POST(request: Request) {
  const body = await request.json()

  return Response.json({ 
    message: `あなたからのメッセージ: ${body.message || 'なし'}`,
    received: true,
    date: new Date().toISOString()
  })
}

この変更を保存した後、POSTリクエストをテストするために、ブラウザのコンソールで以下のコードを実行してみましょう:

fetch('/api/hello', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ message: 'こんにちは、サーバー!' }),
})
.then(response => response.json())
.then(data => console.log(data));

コンソールに以下のようなレスポンスが表示されれば成功です:

{message: 'あなたからのメッセージ: こんにちは、サーバー!', received: true, date: '2025-05-02T12:34:56.789Z'}

パラメータを使ったAPI Routes#

パラメータを使ったAPI Routesも簡単に作成できます。例として、ユーザーIDを受け取るAPIを作ってみましょう。

新しいディレクトリとファイルを作成します:

mkdir -p app/api/users/[id]

次に、app/api/users/[id]/route.tsというファイルを作成します:

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  return Response.json({
    id: params.id,
    name: `ユーザー${params.id}`,
    email: `user${params.id}@example.com`
  })
}

開発サーバーが起動している状態で、ブラウザで http://localhost:3000/api/users/123 にアクセスすると以下のようなレスポンスが表示されます:

{"id":"123","name":"ユーザー123","email":"user123@example.com"}

URLの123の部分を変更すれば、それに応じたレスポンスが返ってきます。

まとめ#

Next.jsのAPI Routesを使うことで、従来のようにフロントエンドとバックエンドを別々のプロジェクトとして管理する必要がなくなります。同じNext.jsプロジェクト内でサーバーサイドの処理も実装できるため、開発の効率が大幅に向上します。

次は、フロントエンドからAPI Routesにアクセスする方法を見ていきましょう。