Next.js 13: How can I access the params for GET in route.ts?

[dapjeongneo]

Summary

I have a function in my client to call an API in route.ts.

How can I access the params filename in the GET function? Apparently the filename shows up in the debugger under the request.url instead of params. params is undefined. Can someone please help me out? Thank you in advance.

Extra credit: Is it possible to pass an image HTMLInputElement.files from the button.tsx to the route.ts so that I can upload an image directly to S3 in route.ts? My current approach is to get an S3 URL back from the GET and upload in the button.tsx.

Additional information

// button.tsx
const res = await axios.get(`/path/to/route`, {
  params: {
    filename: file.name,
  },
})

// route.ts
export async function GET(
  request: NextRequest,
  { params }: { params: { filename: string } }
) {

Example

No response

[icyJoseph]

Have you tried,

request.nextUrl.searchParams

• https://beta.nextjs.org/docs/api-reference/request#nexturl

To be more precise:

import { NextRequest } from "next/server";

export async function GET(request: NextRequest) {
  console.log(request.nextUrl.searchParams.get("foo"));
  return new Response("Hello, Next.js!");
}

Which would log bar for this request:

GET http://localhost:3000/api/hello?foo=bar

[sajid-munawar]

https://nextjs.org/docs/app/api-reference/functions/next-request#nexturl

[Muneeb-Mohd]

Worked like a charm, would like to know what params logs out though, seriously curious

Never mind, it basically logs whatever is used as dynamic value.

[jericrealubit]

very cool! Thank you.

[nicope]

you're now my new god

[alsgy2001]

Have you tried,

request.nextUrl.searchParams

• https://beta.nextjs.org/docs/api-reference/request#nexturl

To be more precise:

import { NextRequest } from "next/server";

export async function GET(request: NextRequest) {
  console.log(request.nextUrl.searchParams.get("foo"));
  return new Response("Hello, Next.js!");
}

Which would log bar for this request:

GET http://localhost:3000/api/hello?foo=bar

It worked for me.

[AnsonZnl]

very thanks

[sajid-munawar]

Thank you so much

[tjcchen]

works like a charm.

[laubonghaudoi]

The official doc isn't very helpful, I managed to get the params with this

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const my_param = searchParams.get("my_param");
)

The top answer uses import { NextRequest } from "next/server"; which is Next's extension. If you are opting out of caching like me using req: Request, your request won't have nextUrl. So you have to new URL(request.url) to get the params.

[emporteme]

Nice

[tuncatunc]

Nextjs 13, to get the dynamic route parameters from a an API route/api/[chain_id]/[address]

import { NextRequest, NextResponse } from "next/server"
export const dynamic = 'force-dynamic' // defaults to force-static

export async function GET(req: NextRequest, context: {params: {chain_id: string, address: string}}) {
return NextResponse.json({
    message: "Hello, world!",
    searchParams: req.nextUrl.searchParams,
    pathname: req.nextUrl.pathname,
    chain_id: context.params.chain_id,
    address: context.params.address
  })
}

[IRediTOTO]

Thank you, I wish nextjs can do Types for this, without type I must GG to find it, this not cool with Next 13.