はじめに

こんにちわ！こんばんわ！ご観覧ありがとうございます。
定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが)
基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。

お題と経緯

NextjsのPageRouterからAppRouterに乗り換えてみてパフォーマンスを測ってみたいし、使ってもみたいなってことで、
今回はFirebaseのhostingでAppRouterがどこまで機能するかを、パフォーマンス向上の一環として試そうと思います！
まずはAppRouterでサンプルのAppを作成しつつ、備忘録で説明を書いていこうと思います。

今回の内容

AppRouterのRoute Handlers(API)について調べていきたいと思います！

Routing: Route Handlers | Next.js

使用した技術

Category	Technology Stack
Frontend	Nextjs,React,Typescript
Backend	Typescript,Node,CloudFunction
Database	Firestore
Design	XD

前回の内容

前回記事

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング番外編 Nextjs AppRouter(色々試す) - zare926のブログ

NextjsのAppRouterでサーバーコンポーネントやクライアントコンポーネントについて書きました。

Route Handlersとは

Nextjsの13.4からstableとなったAppRouterで実装できるAPIですね。
PagesRouterの時はAPI Routesでしたね。

APIRouteとRoute Handlersの違い

一つ目はファイルパスですね。

API Routes

pages/api/sample-api.ts
pages/api/[slug].ts

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

Route Handlers

app/sample-api/route.ts
app/sample-api/[slug]/route.ts

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ name: 'Michelle' });
}

ざっくりとこの様な変更があるようですね。
実際にはAPI Routesではreq.queryなどURLのパラメーターを展開できたりしましたが、どの様に変わるのかを調べたいと思います。

実際に作成してみる

app/[slug]/route.ts

import { NextResponse, NextRequest } from "next/server";

export async function GET(
  request: NextRequest,
  { params }: { params: { slug: string } }
) {
  console.log(params);
  console.log(request);
  return NextResponse.json({ data: new Date().toISOString() });
}

こんな感じでGETはrequestとparamsを受け取れる様ですので、中身を見てみます。
[slug]の部分は以下にします。

await fetch("/slug-url");

わかりづらいですが、{ slug: 'slug-url' }がconsole.log(params);で、それ以下がconsole.log(request);ですね。
pathはこの方法で取れますね。

URLのクエリパラメーターの取り方も変わってます。

    const params = {
      hoge: "1234567",
      fuga: String(76454321),
    };
    const parameter = new URLSearchParams(params);
    await fetch(`/slug-url?${parameter}`);

API

import { NextRequest, NextResponse } from "next/server";

export async function GET(
  request: NextRequest,
  { params }: { params: { slug: string } }
) {
  console.log(params);
  const searchParams = request.nextUrl.searchParams;
  const hoge = searchParams.get("hoge");
  console.log(hoge); // 1234567とログに出る。
  const fuga = searchParams.get("fuga");
  console.log(fuga); // 76454321とログに出る。
  return NextResponse.json({ data: new Date().toISOString() });
}

もちろんrequest.bodyもあります。
クライアントサイドから動的な値でAPIの実行内容を変えたい場合も、PagesRouter同様にできますね。

最後に

変更点は特に違和感なく使えたかなと思います。
paramsの取得はPagesRouterの方が楽でしたね。
AppRouterの場合、searchParams.get()後の型推論はstring | nullだったので、req.queryから抜き取るよりも型がキッチリしてますね。
ファイル名もpages.ts同様、決まりがあるので頭を少しでも使わ内容にできる点は満足です！
ここまで読んでいただきありがとうございました！