forked from vercel/next.js
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow to delete URL search params in middleware rewrites (vercel#33725)
This allows to have a more streamlined API for rewrites. Since middlewares are code and not static configurations, we can allow people to delete query params and not just overwrite them. **⚠️ Warning⚠️ ** this is a breaking change in query parameter behavior with middlewares, but the API will make more sense now. Compare the following: ```diff import {NextResponse} from 'next/server' export default function middleware({ nextUrl }) { - nextUrl.searchParams.set('ignored-query-param', ''); + nextUrl.searchParams.delete('ignored-query-param'); // 🎉 return NextResponse.rewrite(nextUrl); } ``` Since this is breaking change, we're adding a warning every time we find a query param that is missing, and eventually--the warning will be deleted. I don't think we need to worry about older versions of Next.js as the current behavior is misleading: merging query parameters make sense for static rewrites, but not for middlewares where you have access to all the query parameters and can manipulate them freely. Related: * This is the opposite of vercel#33454 * This supersedes vercel#33574
- Loading branch information
Showing
8 changed files
with
162 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
# Deleting Query Parameters In Middlewares | ||
|
||
#### Why This Error Occurred | ||
|
||
In previous versions of Next.js, we were merging query parameters with the incoming request for rewrites happening in middlewares, to match the behavior of static rewrites declared in the config. This forced Next.js users to use empty query parameters values to delete keys. | ||
|
||
We are changing this behavior to allow extra flexibility and a more streamlined experience for users. So from now on, query parameters will not be merged and thus the warning. | ||
|
||
```typescript | ||
import type { NextRequest } from 'next/server' | ||
import { NextResponse } from 'next/server' | ||
|
||
export default function middleware(request: NextRequest) { | ||
const nextUrl = request.nextUrl | ||
nextUrl.searchParams.delete('key') // this is now possible! 🎉 | ||
return NextResponse.rewrite(nextUrl) | ||
} | ||
``` | ||
|
||
#### Possible Ways to Fix It | ||
|
||
If you are relying on the old behavior, please add the query parameters manually to the rewritten URL. Using `request.nextUrl` would do that automatically for you. | ||
|
||
```typescript | ||
import type { NextRequest } from 'next/server' | ||
import { NextResponse } from 'next/server' | ||
|
||
export default function middleware(request: NextRequest) { | ||
const nextUrl = request.nextUrl | ||
nextUrl.pathname = '/dest' | ||
return NextResponse.rewrite(url) | ||
} | ||
``` | ||
|
||
This warning will be removed in a next version of Next.js. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
test/integration/middleware/core/pages/rewrites/clear-query-params.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
export default function ClearQueryParams(props) { | ||
return <pre id="my-query-params">{JSON.stringify(props.query)}</pre> | ||
} | ||
|
||
/** @type {import('next').GetServerSideProps} */ | ||
export const getServerSideProps = (req) => { | ||
return { | ||
props: { | ||
query: { ...req.query }, | ||
}, | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters