Next.js13以降のAPPRouterを利用したAPIで各パラメータを取得する方法を紹介

はじめに
パラメータの取得

はじめに

Next.jsではバージョン13になってからAPPRouterという新しいルーティングシステムが導入されました。今までの方法とは違うルーティングになっているため、APIに関しても今までとは異なったAPIの実装を行う必要があります

今回は、Next.jsでのAPIでよく利用する、パスパラメータ、クエリパラメータ、bodyパラメータなど様々なリクエストからのパラメータの取得方法を紹介していきます。

参照）https://nextjs.org/docs/app/building-your-application/routing/route-handlers

Next.js13でのページとAPIのファイル名とディレクトリの命名[APP Router]

Next.js13でのページとAPIのファイル名とディレクトリの命名[APP Router]

はじめに Next.jsは非常に重要なフレームワークとなり、その最新版Next.js 13が公開されました。本記事では、特に重要なNext.jsのファイル名とディレクトリの命名規則に焦点を当て、詳しく解説します。今回はTypescript...

パラメータの取得

パスパラメータの取得方法

urlが/api/[id]のようなパスの場合にidを取得します

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const slug = params.id
}

上記コードはurlが/api/[id]のようなパスの場合にidを取得します
例えば、/api/1のようなurlの場合はidが1で取得できます

クエリパラメータの取得方法

urlが/api?id=”1″のようなパスの場合にクエリパラメータにあるidを取得します

import { type NextRequest } from 'next/server'
 
export function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const query = searchParams.get('id')
}

上記コードは、NextRequestにあるnextUrlからsearchParamsが存在するのでこちらを利用して、パラメータを取得できます

リクエストbodyの取得方法

export async function POST(request: Request) {
  const res = await request.json()
  return Response.json({ res })
}

注意点として、request.jsonのメソッドは１回しか呼び出すことができないので、複数の場所で使用する場合は別変数として定義するなどの処理が必要になります。

FormDataの取得方法

リクエストで入力値などをフォームデータに格納して、リクエストする場合も下記のように取得できます

export async function POST(request: Request) {
  const formData = await request.formData()
  const name = formData.get('name')
  const email = formData.get('email')
  return Response.json({ name, email })
}

上記コードでは、フォームデータからnameとemailに設定された値を取得することができます