Incoming request URL is not updated to include dynamic route params

[GregBrimble]

Next.js attaches dynamic route params as query params. In normal routes, developers usually grab these values from the params object:

// pages/blog/[slug].ts

export async function getServerSideProps({ params }) {
  // params.slug = 'a-blog-slug'
}

But in Edge API routes, there is no such mechanism. In order to grab these values, you have to look at the incoming request URL:

// pages/api/blog/[slug].ts

export default function handler(request) {
  const url = new URL(request.url)
  url.searchParams.get('slug')
  // should be 'a-blog-slug' but is currently null
}

We should pass these handling functions the finalized URL which includes any dynamic route params in the query string.

[nakedible]

I got bitten by this. I thought my dynamic routes would work as is with this setup, but apparently not.

[RyleaStark]

export async function onRequestGet(event: Event): Promise<Response> {
  if (event.request.method === "GET") {
    return await myFunction(event.request);
  } else {
    console.log("Unauthorized request: Only GET requests are allowed");
    return new Response(JSON.stringify(["401", "Unauthorized"]), {
      status: 401,
      headers: {
        "Content-Type": "application/json",
      },
    });
  }
}

async function myFunction(request: Request): Promise<Response> {
  console.log("Function hit.");
  const params = new URLSearchParams(request.url.split('?')[1]);
  const creator = params.get('creator');
  const guid = params.get('guid');

  console.log({creator, guid});

  return new Response(JSON.stringify(["200", creator, guid]), {
      status: 200,
      headers: {
        "Content-Type": "application/json",
      },
   });
}

I had success with the above.

[nakedible]

Unfortunately, I just have pages which have dynamic routes - and those should be given in "params" to the functions.

Some pointers to help fix this...

The middleware-manifest.json that is being consulted to get the function matchers contains named groups already:

      "matchers": [
        {
          "regexp": "^/(?<id>[^/]+?)$"
        }
      ],

Hence this part in the actual worker:
https://github.com/cloudflare/next-on-pages/blob/main/templates/_worker.js/index.ts#L143-L161
just needs to be modified to keep the result of the regexp match operation, and place result.groups as context.params before invoking the handler.

At least, that is my guess what is sufficient.

[nakedible]

Apparently this is closer to my problem, and much closer also to the correct fix: #32