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

1
app/
2
  [username]/
3
    page.tsx
4
    lookup.action.ts
5
  page.tsx (landing page)

1
// app/[username]/lookup.action.ts
2
export const lookupUser = action
3
  .schema(LookupSchema)
4
  .use(withRateLimit) // Rate limiting middleware runs for ALL routes
5
  .action(async ({ parsedInput: { username } }) => {
6
    // ...
7
  })
8

9
// app/[username]/page.tsx
10
export default async function Profile({ params }: { params: { username: string } }) {
11
  const { username } = params
12
  
13
  const res = await lookupUser({ username }) // This triggers rate limit middleware
14
  
15
  // ...
16
}

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?