_middleware does not pass query params with getServerSideProps

[samfromaway]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64
Binaries:
  Node: 16.14.0
  npm: 8.3.1
  Yarn: 1.22.10
  pnpm: N/A
Relevant packages:
  next: 12.1.1
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

chrome 99

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using the _middleware with
return NextResponse.rewrite(
new URL(/_sites/${currentHost}${pathname}, req.url)
);

The query params are not getting passed in the pages using getServerSideProps.

Expected Behavior

Query params getting passed

To Reproduce

Use this repo: https://github.com/samfromaway/hostname-rewrites-param-issue
Run yarn dev
Go to: http://localhost:3000/booking?startDate=2022-04-14
See that only the site query param is passed, NOT the startDate or any other.

Copy code of file: this-middleware-does-work.ts in root to _middleware in /pages.
Then see that the params are actually passed.

[MauriceArikoglu]

@samfromaway try the possible ways to fix approach from here please: https://nextjs.org/docs/messages/deleting-query-params-in-middlewares

[samfromaway]

@MauriceArikoglu Thanks for the reply. Please read the issue fully. The error is NOT that I can't delete it. It's that the params don't pass. So the one-time error about "deleting-query-params-in-middlewares" that shows, is not what the issue is. I just mentioned it as it also appears.

[MauriceArikoglu]

@samfromaway yes, I read and understand your problem. I hinted at the documentation, because it asks to use nextUrl for accessing query params.

In your middleware-that-works you are rewriting using nextUrl, your _middleware uses url instead. Maybe try the approach from the link I gave you and replace url with nextUrl in your snippet here:

return NextResponse.rewrite( new URL(`/_sites/${currentHost}${pathname}`, req.url) );

If that doesn't help, I can't help you further

[samfromaway]

@MauriceArikoglu
I added it like this
return NextResponse.rewrite(new URL(`/_sites/${currentHost}${pathname}`, req.nextUrl));
but it still does not work

[Schniz]

Hey @samfromaway, that kinda makes sense (I think!).
The pathname binding does not contain the query--it's a parsed URL so http://localhost:3000/hello/world?a=value1&b=value2 will create a URL where pathname is /hello/world, and a searchParams you can use. I suggest using the NextURL#clone method so one will not forget to copy the search params over:

const newUrl = nextUrl.clone();
// newUrl.searchParams were cloned too
newUrl.pathname = `/_sites/${currentHost}${pathname}`;

In context, your code will look like so:

  if (excludeCheck || pathname.includes(".html")) {
    const hostname = req.headers.get("host");
    const currentHost = process.env.DEV_ONLY_BRAND_URL || hostname;
    const newUrl = req.nextUrl.clone();
    newUrl.pathname = `/_sites/${currentHost}${pathname}`;
    return NextResponse.rewrite(newUrl);
  }

I just checked it and it works well. Can you tell me if that's working out for you? 🙏

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.