---
title: "Filtering Query Parameters"
description: "Learn how to filter query params in Edge Middleware."
url: "https://vercel.com/templates/next.js/edge-functions-filter-query-params"
links:
  repository: "https://github.com/vercel/examples/tree/main/edge-middleware/query-params-filter"
  demo: "https://edge-functions-query-params-filter.vercel.app"
  deploy: "https://vercel.com/new/clone?demo-title=Filtering+Query+Parameters&demo-description=Learn+how+to+filter+query+params+in+Edge+Middleware.&demo-url=https%3A%2F%2Fedge-functions-query-params-filter.vercel.app&project-name=query-params-filter&repository-name=query-params-filter&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fquery-params-filter&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F6R5DUv3TTgtBBZ8SGyPyUN%2Fd66eafc3f2ed7a6da4bf204391ab6fd3%2Fedge-functions-query-params-filter.vercel.app_.png"
---

# Filtering Query Parameters

Learn how to filter query params in Edge Middleware.

# 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`](https://github.com/vercel/examples/tree/main/edge-middleware/query-params-filter/middleware.ts):

```ts
import { NextRequest, NextResponse } from 'next/server'

const allowedParams = ['allowed']

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

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

  url.searchParams.forEach((_, key) => {
    if (!allowedParams.includes(key)) {
      url.searchParams.delete(key)
      changed = true
    }
  })

  // Avoid infinite loop by only redirecting if the query
  // params were changed
  if (changed) {
    return NextResponse.redirect(url)
    // It's also useful to do a rewrite instead of a redirect
    // return NextResponse.rewrite(url)
  }
}
```

## 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](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-middleware/query-params-filter&project-name=query-params-filter&repository-name=query-params-filter)

### Clone and Deploy

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [pnpm](https://pnpm.io/installation) to bootstrap the example:

```bash
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:

```bash
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](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=edge-middleware-eap) ([Documentation](https://nextjs.org/docs/deployment)).

## Related Templates

### [A/B Testing Simple](https://vercel.com/templates/next.js/ab-testing-simple)

By A/B testing at the edge, you'll reduce CLS from client-loaded experiments and improve your site's performance with smaller JS bundles.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.