[Next.js App Router入門中] JSONを返すREST APIを作る方法

Next.jsのApp Routerを調べてみて、REST APIを追加する場合の命名規則などをメモしました。以前はpages/apiディレクトリにAPIパスごとにファイルを配置していましたが、App Routerではapp/[APIパス]/route.tsに配置するようになりました。また、ファイル内ではexport default functionではなく、メソッドごとに関数をexportする方法に変わりました。レスポンスはNextResponseやNodeのResponseオブジェクトを利用できます。ファイルの命名規則は少し混乱するかもしれませんが、便利な機能もあります。Server Componentについてはまだ見ていません。参考: https://nextjs.org/docs/app/building-your-application/routing/router-handlers

いい加減Next.jsのApp Routerを覚えないとなーと思ったので、ざっと調べ＆触ってみた部分の覚書です。

今回はREST APIを追加する場合の命名規則などについてです。

App Routerでは、`app/[APIパス]/route.ts`でファイルを配置する

これまでのNext.jsでは、pages/api/[APIパス].tsでファイルを配置しました。

/api/hello/world: pages/api/hello/world.ts
/api/hello: pages/api/hello.ts

AppRouterでは、pages/apiがなくなり、app/[APIパス]/route.tsで配置します。

/api/hello/world: /app/hello/world/route.ts
/api/hello: /app/hello/route.ts

ファイル内では、「メソッド名」の関数をexportする

これまではexport default functionでしたが、メソッドごとに関数をexportする方法に変わっています。

export async function GET(request: Request) {

}

また、レスポンスはNextResponseをreturnします。

import { NextResponse } from "next/server";


export async function GET() {
    return NextResponse.json({
        message: 100
    })
}

NodeのResponseオブジェクトも利用できる様子です。


  return new Response('Hello, Next.js!', {
    status: 200,
  })

ざっと触っての雑感

ファイルの命名規則は、慣れるまで少し混乱するかも・・・と思いました。

が、apiパスをつけずに作れることや、メソッドごとに関数を配置できる部分は便利そうです。

まだ肝心のServer Component部分などは見れていませんが、とりあえず今回はここまで。

参考

https://nextjs.org/docs/app/building-your-application/routing/router-handlers