How to Add a Dynamic URL Segment in Next.js (with a Fallback if the Database Field is Null)

I'm working on a Next.js application and need to implement a dynamic URL segment that comes right after the main domain—something like localhost:3000/accountName/.... The value accountName is stored in the users table. If it's null, I want to use a default value in the URL instead. Furthermore, I need all child routes (such as projects) to continue working properly under that new dynamic segment.

Here's my current folder structure:

/pages
  /projects
    /[projectId]
      /forms
        /[formId]
          index.tsx
      index.tsx
    index.tsx
  _app.tsx
  _document.tsx
  account.tsx
  error.tsx
  index.tsx
  login.tsx
  signup.tsx

How can I correctly implement this dynamic segment (i.e., /:accountName) so that if a user’s accountName in the database is null, I automatically use a default string (e.g., /account) and ensure all nested routes (like /projects) still work as expected?

I tried creating a [accountName] folder and nesting all the routes that need this dynamic segment, but navigation between pages isn’t working as expected. I’m also not sure where it’s best to fetch the accountName field—via middleware (from cookies) or in getServerSideProps directly from Supabase.