Accessing dynamic route using app route.

Answered

Asiatic Lion posted this in #help-forum

Asiatic LionOP

2024-03-19T12:36:54.000Z

I've been at this for a couple of hours with no relief.

This is my project structure.

In my [id]-folder i have the route.ts, which contains the following minimal example of code

export async function GET(
    request: Request,
    res: NextApiResponse,
    { params }: { params: { id: string } },
) {
    const id = params.id; // 'a', 'b', or 'c'

    return res.status(200).json({ id });
}

I keep getting

TypeError: Cannot destructure property 'params' of 'undefined' as it is undefined.

Answered by Ray

it should be

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const slug = params.id // 'a', 'b', or 'c'
  return Response.json({ id }, { status: 200 })
}

NextApiResponse is for page router

View full answer

6 Replies

@Asiatic Lion I've been at this for a couple of hours with no relief. This is my project structure. In my [id]-folder i have the route.ts, which contains the following minimal example of code ts export async function GET( request: Request, res: NextApiResponse, { params }: { params: { id: string } }, ) { const id = params.id; // 'a', 'b', or 'c' return res.status(200).json({ id }); } I keep getting `TypeError: Cannot destructure property 'params' of 'undefined' as it is undefined.`

Ray

2024-03-19T12:41:33.000Z

it should be

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const slug = params.id // 'a', 'b', or 'c'
  return Response.json({ id }, { status: 200 })
}

NextApiResponse is for page router

Answer

Asiatic LionOP

2024-03-19T12:42:41.000Z

Yea that worked a lot better, thanks as always ray

Asiatic LionOP

2024-03-19T12:55:35.000Z

Just a curious question.

Why does it work if i have it like this

export async function GET(
    request: Request,
    { params }: { params: { id: string } },
)

But not this?

export async function GET({ params }: { params: { id: string } })

I'm not using the request itself, is it used internally?

@Asiatic Lion Just a curious question. Why does it work if i have it like this ts export async function GET( request: Request, { params }: { params: { id: string } }, ) But not this? ts export async function GET({ params }: { params: { id: string } }) I'm not using the request itself, is it used internally?

Ray

2024-03-19T13:20:14.000Z

because the first parameter is request and the second parameter is an object for dynamic segment

you can ignore the request if you are not using it but not omit

Original message was deleted

Ray

2024-03-19T17:52:07.000Z

you should create your own thread