I wonder, I'm trying to create the domain.com/@username in NextJS SSR, and I'm having a little issue.

I updated the middleware to pass the request URL, so I can access the server coponent.

But that seems to ovveride the original request component.

 export async function middleware(req: NextRequest) {
  const res = NextResponse.next({
    request: {
      headers: new Headers({ "x-url": req.url }),
    },
  });

I tried this as well requestHeaders.set('x-url', req.url) doens't seem like works either.

If I take the request object out, the login will work, but then I won't haave access to the url, and if the request obejt is in, I will have access to the url, but login will be disabled

And what I'm doing in my username profile page is this, though not sure it matters

const fetcher = (url: string) => fetch(url).then((res) => res.json());

async function PublicProfile() {

  const headersList = headers();
  const pathname = headersList.get('x-url')!;

  // TODO: Fix TypeScript (TS) error
  const username = pathname.split('/').pop().replace('@', '');
  const url = `${getURL()}/api/auth/profile/${username}`;

  const user = await fetcher(url);
  console.log({ user })