is there a way to modify the source code of next js to handle multiple dynamic routes on the same level ?
#Tweaking next router
woeful oasis
vital laurelBOT
Hi @woeful oasis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the knowledge sources, there are a few approaches to handle multiple dynamic routes at the same level in Next.js, but modifying the source code directly isn't typically recommended.
Understanding the Challenge
Next.js routing is designed with specific precedence rules where predefined routes take precedence over dynamic routes, and dynamic routes take precedence over catch-all routes. This can create challenges when you want multiple dynamic routes at the same level.
Current Behavior and Limitations
The issue of "greedy" dynamic route interception is documented in GitHub issues. For example, when using interception routes with dynamic parameters, Next.js will greedily match the interception pattern over exact matches in the file system, which can cause routing conflicts GitHub Issue #70651.
Similarly, there are challenges with parallel routes when trying to selectively override dynamic segments with static ones GitHub Issue #61552.
Possible Solutions
Rather than modifying the source code, consider these approaches:
-
Use Route Groups: You can organize routes into groups using the
(folderName)convention, which doesn't affect the URL path structure Next.js Route Groups. -
Implement Rewrites: Use the
rewritesconfiguration innext.config.jsto redirect requests to the appropriate routes. This is especially useful for handling complex routing scenarios Next.js Multi-Zones.
-
Use Middleware: For dynamic routing decisions, you can implement middleware to intercept and redirect requests based on custom logic Next.js Multi-Zones.
-
Nested Routes with Catch-all Segments: Utilize catch-all segments (
[...slug]) or optional catch-all segments ([[...slug]]) to handle multiple path patterns Next.js Dynamic Routes.
Example of Rewrites Configuration
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/route-one/:path*',
destination: '/route-one-handler/:path*',
},
{
source: '/route-two/:path*',
destination: '/route-two-handler/:path*',
}
];
},
};