Redirecting with Middleware, removing query params

[JarrodMFlesch]

The problem

Redirecting from a url with query params to a route without. Next merges the query params from the incoming request and appends them to the redirect url, even if you do not want them to. This was only an issue for us because our client was redirecting old wordpress pages to their new wordpress website and wordpress uses specific query params to query pages, so in order for the redirect to work the query params needed to be gone/blank.

The Solution

Re-add the query params yourself and set their values to be nothing i.e. ?post_type=&p=

We were using a redirect file that had entries in the shape of:

// redirects.js
const redirects = [
  {
    source: '/au/?post_type=pages&p=123456',
    destination: 'https://destination.au.com/new-page-with-slug-only/',
    permanent: true
  },
]

And then we were clearing the params with the following

// pages/_middleware.js
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import redirects from '../redirects';

const redirectMap = redirects.reduce((map, redirect) => ({
  ...map,
  [redirect.source]: redirect.destination,
}), {});

export function middleware(req: NextRequest) {
  const { href, origin, searchParams } = req.nextUrl;
  const redirectKey = href.replace(origin, '');
  const redirect = redirectMap[redirectKey];

  if (redirect) {
    let params = '';
    searchParams.forEach((_, key) => {
      params = `${params ? `${params}&` : '?'}${key}=`;
    });
    return NextResponse.redirect(`${redirect}${params}`);
  }

  return NextResponse.next();
}

[JarrodMFlesch]

Answer is in the post above ✅

[andrewlutz]

Thanks for writing this up, I'm dealing with the same issue right now.

Was there a reason you didn't just redirect to the url directly without doing the searchParam manipulation?

ie.

    return NextResponse.redirect(`${redirect}`);

[JarrodMFlesch]

Thanks for writing this up, I'm dealing with the same issue right now.

Was there a reason you didn't just redirect to the url directly without doing the searchParam manipulation?

ie.

    return NextResponse.redirect(`${redirect}`);

I am almost positive that I had to leave them because next would re-merge the query params if I did not explicitly set them as empty. Things could have changed with a newer release. Have you tried what you are suggesting and does it work with the latest version?

[andrewlutz]

I'm on v12.1.0 and the snippet below cleared out the URL params for me

const url = request.nextUrl.clone();
return NextResponse.redirect(url.origin + "/login")

[JarrodMFlesch]

Huh! Reading through it I would guess that you are right. I must have been fighting with the redirects in the next config for a while that day. I can update my answer after I test it out 👍

[shubham-tarpara]

My site is in nuxtJS but I'm using vercel.json for redirect to a new URL i want to do the same I don't want to have old URL query params how to do that?