The problem I have is that I have a project in which I am implementing subdomains and even though the domains are being read when entering another route, for example /menu, this simply keeps it on the same page. my folder structure is as follows


- app
-- page.jsx
-- layout.jsx
-- not-found.jsx
--- [subdomain] folder
---- page.jsx
---- menu folder
----- page.jsx

then when I go to subdomain1.localhost:3000/menu it still shows me as if I were in page.jsx instead of showing me the other route this is the middleware

import { NextResponse } from 'next/server'

export function middleware(request) {
  const url = request.nextUrl.clone()
  const host = request.headers.get('host')
  const subdomain = host?.split('.')[0]

  console.log('VALUES', {
    url,
    host,
    subdomain,
  })

  if (
    subdomain === 'wwww' ||
    subdomain === 'localhost:3000' ||
    url.pathname.endsWith('/not-found')
  ) {
    return NextResponse.next()
  }

  const isValid = isValidSlug(subdomain)


  if (!isValid) {
    return NextResponse.redirect(new URL('/not-found', request.url));
  }

  if (isValid) {
    return NextResponse.rewrite(new URL(`/{[${subdomain}]}${url.pathname}`, request.url));
  }

  // if (isValid) {
  //   url.pathname = `/${subdomain}${url.pathname}`
  //   return NextResponse.rewrite(url)
  // }

  // return NextResponse.next()
  // return NextResponse.rewrite(new URL(`/${subdomain}${url.pathname}`, url.origin))
  // return NextResponse.rewrite(new URL(`/${subdomain}/${url.pathname}${url.search}${url.hash}`, request.url))
}

const isValidSlug = (slug) => {
  if (!slug) return false
  const subdomains = ['subdomain1', 'subdomain2']
  console.log(subdomains.includes(slug))
  return subdomains.includes(slug)
}

export const config = {
  matcher: ['/'],
}