Skip to content

Filtering Query Parameters

Learn how to filter query params in Edge Functions.

Framework Next.js
Use Case Edge Functions, Documentation
CSS Tailwind
Publisher ▲ Vercel

Filtering Query Parameters

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

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

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

const allowedParams = ['allowed']

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

export 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:

Clone and Deploy

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/query-params-filter query-params-filter
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/query-params-filter query-params-filter

Next, run Next.js in development mode:

npm install
npm run dev

# or

yarn
yarn 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).

Filtering Query Parameters

Learn how to filter query params in Edge Functions.

Framework Next.js
Use Case Edge Functions, Documentation
CSS Tailwind
Publisher ▲ Vercel

Filtering Query Parameters

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

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

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

const allowedParams = ['allowed']

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

export 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:

Clone and Deploy

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/query-params-filter query-params-filter
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/query-params-filter query-params-filter

Next, run Next.js in development mode:

npm install
npm run dev

# or

yarn
yarn 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).

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential