How does Next.js handle dynamic routing internally?

[bishal-20hal]

Summary

Hey everyone,
I’ve been using dynamic routes in Next.js (like [id].js), and I’m curious how this works behind the scenes.

• How does Next.js detect and handle these dynamic files at runtime?

• Is there a specific part of the framework responsible for this?

Would love a simple explanation or a pointer to the relevant code. Thanks!

[AmanRai8]

Next.js handles dynamic routing by using the file name pattern like [id].js to create a route. Internally, it scans the pages folder, generates a route map, and uses regex matching to link URLs to the correct files. The dynamic part (like id) is passed as a query parameter to the page component.

[bishal-20hal]

thanks again mate

[icyJoseph]

You can trace/parse usage of:

• isDynamicRoute in packages/next/src/shared/lib/router/utils/is-dynamic.ts
• normalizePagePath in packages/next/src/shared/lib/page-path/normalize-page-path.ts
• and normalizeAppPath in packages/eslint-plugin-next/src/utils/url.ts

I you really want a proper answer.