[Next.js + Typescript] How to add req.params with NextApiRequest

Feature request

Is your feature request related to a problem? Please describe.

When I use typescript and nextjs. I have some problem with NextApiRequest. I mean there is no params property in NextApiRequest. so How about add params property in NextApiRequest interface?

now I use like this

server.get(
    "/post/:postId",
    (req: NextApiRequest & Express.Request, res: NextApiResponse) => {
      return app.render(req, res, "/post", { postId: req.params.postId });
    },
  );

[canibanoglu]

I was dicussing how to define API endpoints in Next.js with a colleague at work and when he told me that it is a bit iffy because you have to put the endpoint definitions under pages/ in a new folder called api.

Upon some discussion, it feels like there is a bit of a mixing of concerns here. Here’s my reasoning and my questions about the choice here

I expect all routes under pages/ to be returning an actual page, something that has HTML content in its reponse. Thinking along these lines, an API endpoint is fundamentally different, it is meant to interface with another program over HTTP to deal with data, not markup. (I guess you could argue that HTML endpoints are a specialized case of API endpoints, but still…)

Moreover, I would expect API endpoints and HTML endpoints to have different scaling/refactoring needs as an application grows and evolves.

My questions are:

1. What was the choice behind having the api/ folder under pages/? Maybe I’m missing something critical here but apart from ease of implementation, I can’t find a good reason for mixing these two.

2. Has this been discussed before or are there any ongoing discussions about this? I also don’t want to hijack this issue because it is a bit out of the scope for the original question. Should I create another issue and take the discussion there?

They are very similar yet also different and I believe it would be a better idea to have a top level api/ folder for API endpoint definitions (the naming of the folder can be different of course).

[Timer]

This is documented here: https://nextjs.org/docs/api-routes/api-middlewares#extending-the-reqres-objects-with-typescript

Thanks!