TL;DR
環境
| OS | Windows 11 |
| エディタ | VSCode 1.111.0 |
| Next.js | 16.1.6 |
背景
まず前提として、私はNext.jsを今までドキュメントをしっかりと読まずに、ノリで使っていました。
そのせいで、バックエンドでURLパラメータの値を取得する方法が良く分からないまま、なんとなく、
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
const { id } = await params
return Response.json({ id })
}
のように書いていました。そうですね。
長い
ですよね。覚えられずに何度も以前書いたファイルを開き直しました。
しかし無駄に素直な記述だったために、これ以外の記述を探すという発想に至りませんでした。
実際これは極めて正しい記述ですからね。
「無いわけないだろ。」
ですよね。そりゃそうです。ありました。冒頭に貼ったドキュメントです。
Before / After
Before
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
const { id } = await params
return Response.json({ id })
}
After
export async function GET(request: NextRequest, ctx: RouteContext<'/nanka/[id]'>) {
const { id } = await ctx.params
return Response.json({ id })
}
素晴らしいですね。VSCodeだとURL部分等に補完が効くのも素晴らしいです。
結論
使ってるフレームワークのドキュメントぐらい1回はちゃんと読む機会を設けるべきだったと感じました。
私がRouteContextをいたく気に入っただけで、別に使わなくても良いと思います。
初心者なので、指摘、指示、示唆、等ありましたらよろしくお願いします。