app router の API機能（Route Handlers）/ tRPC でエンドポイントを作成する

● /api/hello のエンドポイントを作成する

(GET) http://localhost:3000/api/hello?name=hoge で、テキスト Hello (hoge) ! を返すAPIを実装する

ファイル名 route.ts は決まっています。
ディレクトリ名は任意ですが、同じ階層に page.tsx と route.ts があるとエラーになるので、 /app/api を起点にして被らないようにします
GETメソッドの時は function GET() を作成します。

src/app/api/hello/route.ts

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

type ApiErrorType = {
  error: string
  message: string
}

type GetResultType = {
  message: string
  accessDate: string
}

export function GET(
  request: NextRequest,
  response: NextResponse,
): NextResponse<ApiErrorType> | NextResponse<GetResultType> {
  const searchParams = request.nextUrl.searchParams
  const name = searchParams.get("name")

  if (!name) {
    return NextResponse.json(
      {
        error: "Bad Request",
        message: "Parameter 'name' is missing or invalid format",
      },
      { status: 400, headers: { "Content-Type": "application/json" } },
    )
  }

  return NextResponse.json({
    message: `hello, (${name})!`,
    accessDate: new Date().toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" }),
  })
}

● app router と tRPC を使ってエンドポイントを作成する

次のエンドポイントを作成します。

(GET) http://localhost:3000/api/trpc/hello
(POST) http://localhost:3000/api/trpc/helloUser  送信する Body「{"userName": "foobar"}」

1. npmパッケージのインストール

npm install @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query@^4.0.0 zod

2. server/ フォルダに trpc設定ファイルを作成

1. src/server/trpc.ts を作成します。

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

2. src/server/index.ts を作成します。

import { z } from "zod";

import { publicProcedure, router } from "./trpc";


export const appRouter = router({
  hello: publicProcedure.query(async () => {
    return { text: "Hello" };
  }),
  helloUser: publicProcedure
    .input(
      z.object({
        userName: z.string(),
      }),
    )
    .mutation(async () => {
      return { text: "Hello" };
    }),
});

export type AppRouter = typeof appRouter;

3. src/app/api/trpc/[trpc]/route.ts を作成します。

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter } from "@/server";

const handler = (req: Request) =>
    fetchRequestHandler({
        endpoint: "/api/trpc",
        req,
        router: appRouter,
        createContext: () => ({}),
    });

export { handler as GET, handler as POST };

これだけでOKです。