How to get dynamic api route value in Nextjs app router

Problem :

How to get Dynamic Segment from URL

Other Problems:

• According to /app -/questions -/edit -/[id] -route.ts this location of route.ts is wrong because routes are written under folder api app/routeName/api/route.ts
• So the /app -/questions -/edit -/[id] -route.ts is now considered a page because of file conventions (Read this 1), but you have written route.ts which is wrong.

Possible Solution :

• If /app -/questions -/edit -/[id] -route.ts this an API endpoint(Route Handler) then move it under api folder, which will be in app folder.

• Else if /app -/questions -/edit -/[id] -route.ts this is a page, then rename route.ts to page.ts.

Now to get the params [id] :

In page.ts :

export default function Page({ params }: { params: { id: string } }) {
  return <div>Question: {params.id}</div>  // 312
}

Go to url http://localhost:3000/questions/edit/312 to see the output

In route.ts at api/questions/edit/312:

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const id= params.id  // 312
   return Response.json({ data : id })
}

Go to url http://localhost:3000/api/questions/edit/312 to see the output

Please Read :

• Next.js Project Structure : https://nextjs.org/docs/getting-started/project-structure
• Dynamic Route Segments (API): https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments
• Dynamic Routes (Pages) : https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example
• Route Handlers (How to write API endpoint): https://nextjs.org/docs/app/building-your-application/routing/route-handlers#convention

If you have any doubts, then please leave a comment (I will update answer if necessary)