Filtering query parameters

The following example shows how to filter query parameters in your Middleware.

Your middleware file should be placed at the root of your project. If you are using the src directory, the file should be placed in the src directory.

middleware.js

import { NextResponse } from 'next/server';

const allowedParams = ['allowed'];

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

export default function middleware(request) {
  const url = request.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.rewrite(url);
  }
}

middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const allowedParams = ['allowed'];

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

export default function middleware(request: NextRequest) {
  const url = request.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.rewrite(url);
  }
}

Copy link to headingMore resources

Related documentation

More Routing Middleware guides

How can I increase the limit of redirects or use dynamic redirects on Vercel?

How to Optimize Next.js + Sitecore JSS

Dynamic redirects with Global Config and Next.js proxy

Ready to deploy?