I am currently working on a Next.js application (version 14) in which I want to embed username (as in facebook e.g. fb.com/username). To clarify, the URL should look like domain/username or alternatively domain/profile1 in case username is not defined.
Here is the structure of my project:
/app:

• /[username] -> page.tsx
• /test -> page.tsx
• page.tsx

My dynamic route, /[username]/page.tsx, contains the following (for example):

`export default function() {

console.log(‘tagged’)

return 1
}

`

Similar code in /test/page.tsx only let’s change the contents of console.log to identify where it is called from, e.g. ‘/test’.
This is where I run into a conflict.
When trying to navigate to domain/any-name (ex. domain/elon) or domain/test, both ‘tagged’ and ‘/test’ appear in the console, signaling that both relevant pages are being processed at the same time.

In Next.js, how do I prioritize static routes over dynamically named routes (i.e. [username] in this case)? Note that it is not an option to create a profile path (domain/profile/1), in my case undesirable.

So far, I haven’t found a built-in or recommended method to tackle this issue within the Next.js ecosystem. Therefore, any knowledgeable insights or pointers would be greatly appreciated.