Filtering Query Parameters

Filtering Query Parameters

The example shows how to filter query parameters from the URL using Edge Middleware.

To see how it works, check the middleware function in middleware.ts [blocked]:

1
import { NextRequest, NextResponse } from 'next/server'
2

3
const allowedParams = ['allowed']
4

5
export const config = {
6
  matcher: '/',
7
}
8

9
export default function middleware(req: NextRequest) {
10
  const url = req.nextUrl
11
  let changed = false
12

13
  url.searchParams.forEach((_, key) => {
14
    if (!allowedParams.includes(key)) {
15
      url.searchParams.delete(key)
16
      changed = true
17
    }
18
  })
19

20
  // Avoid infinite loop by only redirecting if the query
21
  // params were changed
22
  if (changed) {
23
    return NextResponse.redirect(url)
24
    // It's also useful to do a rewrite instead of a redirect
25
    // return NextResponse.rewrite(url)
26
  }
27
}

Demo

https://edge-functions-query-params-filter.vercel.app

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

1
pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/query-params-filter query-params-filter

Next, run Next.js in development mode:

1
pnpm dev

Before URL: http://localhost:3000?a=b&allowed=test

After URL: http://localhost:3000?allowed=test

Deploy it to the cloud with Vercel (Documentation).