Next.js App RouterでのAPI実装

Next.jsではAPIを実装する機能が提供されておりv13.3以前ではPage Routerが標準でした。
Next.jsのv13.4からApp RouterがStableとなりapiの書き方が変わっていたのでメモ。
App Router

Page RouterでのAPI Routes

API Routes
pages/api以下のファイルはAPIとして参照されます。
この例の場合、http://localhost:3000/api/userとして参照可能。

pages/api/user.js

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}

動的APIルーティング

Index routes and Dynamic API routes
Page Routerでは2種類の動的APIルーティングの実装方法がありました。

Option 1:

• /api/posts.js
• /api/posts/[postId].js

Option 2:

• /api/posts/index.js
• /api/posts/[postId].js

pages/api/post/[pid].js

export default function handler(req, res) {
  const { pid } = req.query;
  res.end(`Post: ${pid}`);
}

両方ともGET api/postsの形で参照可能ですが、Option 1ではファイルが煩雑になるためディレクトリに分ける形のOption 2をよく利用していました。

App RouterでのAPI Routes

App RouterでのAPI実装の方法は少し変更されています。
Route Handlers

appディレクトリはデフォルトで作成されますが、apiは自身で作る必要があります。Router Handlersはappディレクトリ内でのみ利用可能。

API Routesとの違いはこの画像にあるようにroute.jsというファイルでリクエストを受け付けることができます。
以前はファイル名がURLにマッピングされていましたがRouter Handlersはディレクトリ名がマッピングされるようです。
この例の場合はapi直下に置いているのでhttp://localhost:3000/apiでリクエストを受け付ける形。

動的APIルーティング

Route Handlersでは以前のように[slug].jsを作るのではなく[slug]ディレクトリを作る方式のようです。
app/items/[slug]/route.js

app/items/[slug]/route.js

import { NextResponse } from 'next/server';
export async function GET(request: Request, {params}) {
  const id = params.slug
  return NextResponse.json(id);
}

感想

Next.jsで開発する際にApp RouterかPage Routerで作法が異なるので注意が必要。
Page Routerで実装していた方式が採用されていたのであまり違和感なく利用できそう。
Page Routerではファイル名がエンドポイントとなっていたため自由度はありましたが可読性が低く感じていました。pageについてもApp Routerからは公開するページをpage.jsとして配置するようになったのでより明示的でより把握しやくすなった印象です。