Current behavior
Our root-level dynamic route [username]/page.tsx
is causing our rate limiting middleware to execute for every path in the application, including the landing page (/
) and all static routes. This happens despite having dedicated static routes for these paths.
Expected behavior
Static routes should take precedence over dynamic routes. When visiting the landing page (/
) or any static route, the dynamic [username]
route’s server action and its middleware should not execute at all.
Code that reproduces the issue
app/
[username]/
page.tsx
lookup.action.ts
page.tsx (landing page)
// app/[username]/lookup.action.ts
export const lookupUser = action
.schema(LookupSchema)
.use(withRateLimit) // Rate limiting middleware runs for ALL routes
.action(async ({ parsedInput: { username } }) => {
// ...
})
// app/[username]/page.tsx
export default async function Profile({ params }: { params: { username: string } }) {
const { username } = params
const res = await lookupUser({ username }) // This triggers rate limit middleware
// ...
}
The issue is that the rate limiting middleware in our server action is being triggered for every route in the application, including the root landing page (/
).
What’s the recommended pattern for implementing username routes at the root level while ensuring our middleware doesn’t execute for static routes like the landing page?