Dynamic routes where param is a folder

[simonhaenisch]

I've just tried to create a dynamic route like /shops/[shop]/products.ts (so there's a [shop] folder). When I access req.query.shop, it is undefined. Just wanted to confirm that this not supported?

I'm aware I could probably work around it with catch-all routes.

[ijjk]

Hi, this is supported and it sounds like you are leveraging an automatically statically optimized dynamic page (no getInitialProps or getServerSideProps) which does not have the values available during hydration (first render) and is only available afterwards. More information on this can be found in the documentation here https://nextjs.org/docs/advanced-features/automatic-static-optimization#how-it-works

[simonhaenisch]

Ah sry I forgot to mention that this is about an API route, i. e. /api/shops/[shop]/products.ts.

The problem was actually just that I had accessed the wrong query object 🙈 I'm required to use koa for the backend because of interoperability with certain packages. The way I do the API routes is

// adding the proper next.js types for `req` and `res`
const koa = new Koa<Koa.DefaultState, KoaContext  & { req: NextApiRequest; res: NextApiResponse }>();

koa.use(async ctx => { /* ... */ });

export default koa.callback();

and instead of koa.req.query I was accessing koa.query (which is for url query params).

Thanks for clarifying that this is supported!

[simonhaenisch]

BTW it would be great if NextApiRequest was a generic interface, because at the moment I'm doing

interface ApiRequest<T = any> extends Omit<NextApiRequest, 'body'> {
	body: T;
}

so that I can type the request body per API endpoint. I might open a PR about that 🤓