Add dynamic route parameter getter in edge functions

[artrixdotdev]

Describe the feature you'd like to request

So currently in the following file structure

api/
├─ [id]/
│  ├─ index.ts

Currently.. you can make a hacky function to get [id]

export const getURLParam = (req: NextRequest): string =>
    new URL(req.url).pathname.replace(/\/+$/, '').split('/').slice(-1)[0];

But in situations like

api/
├─ [id]/
│  ├─ [comment]/
│  │  ├─ foo.ts
│  ├─ index.ts

in foo.ts things get alot more complicated to get all the query parameters.

making a object in the request object similiar to in serverless functions would be useful

e.g

req.query.comment;
req.query.id

Describe the solution you'd like

I think having a function like

const query = req.query()

req.quey.foo

Is a decent solution. Or maybe using a map will do. But i think you get the point

Describe alternatives you've considered

For non-nested dynamic roots

export const getURLParam = (req: NextRequest): string =>
    new URL(req.url).pathname.replace(/\/+$/, '').split('/').slice(-1)[0];

[artrixdotdev]

any updates on this?

[artrixdotdev]

?

[joulev]

It's not documented but actually the query is assigned to req.url as searchParams:

import { NextRequest } from "next/server";

export const config = { runtime: "experimental-edge" };

export default async function handler(req: NextRequest) {
    return new Response(JSON.stringify({ url: req.url }));
}

// GET http://localhost:3000/api/dynamic/hello/world/c
{"url": "http://localhost:3000/api/dynamic/hello/world/c?a=hello&b=world"}

So you can do

import { NextRequest } from "next/server";

export const config = { runtime: "experimental-edge" };

export default async function handler(req: NextRequest) {
    const params = new URL(req.url).searchParams;
    const a = params.get("a");
    const b = params.get("b");
    return new Response(JSON.stringify({ a, b }));
}

to get

{"a":"hello","b":"world"}

[spassvogel]

It's not documented but actually the query is assigned to req.url as searchParams:

The issue is that they are not query params, the are just part of the URL, like so:

api/13123/some-comment

I think TS wants to access a property named id with a value of 13123 and a property named comment with a value of "some-comment".

[joulev]

@spassvogel You have the params parameter to get that.

[tao]

You don't need to parse it with new URL(), you should be able to access them with this:

const locale = req.nextUrl.searchParams.get("locale")