CODEWITHSUNDEEP
javascriptreactjsnext.js
Wonay
Wonay

Reputation: 1250

How to drop the query parameters after a redirect with NextJS?

In NextJS, how can I use redirect to turn URL like /page?foo=bar into /page/bar ?

I read https://nextjs.org/docs/api-reference/next.config.js/redirects but couldn't find a solution.

What I have today is:

{
   source: '/page',
   has: [
       { 
          type: 'query',
          key: 'foo'
       }
   ],
   destination: '/page/:foo',
   permanent: true
}

but that make /page?foo=bar into /page/bar?foo=bar.

How can I drop the query ?

Edit:

So I realized that this doesn't event work at all with Netlify.

I tried to follow https://docs.netlify.com/routing/redirects/ but I have the same problem with the query parameters staying.

Upvotes: 16

Views: 9455

Answers (2)

Moritz
Moritz

Reputation: 471

At least when using Vercel, you can archive this by repeating the parameters from the has in the destination but leaving the value empty.

E.g.:

{
   source: '/page',
   has: [
       { 
          type: 'query',
          key: 'foo'
       }
   ],
   destination: '/page/:foo?foo=',
   permanent: true
}

Parameters that already exit in the destination won't be copied over and parameters with an empty value in the destination will be removed completely.

Upvotes: 1

Trace
Trace

Reputation: 18889

You can use middleware.

Just parse the query parameter yourself and add redirection.

Store a file _middleware.ts below the pages directory:

export async function middleware(req: NextRequest) {
    const { pathname } = req.nextUrl;
    
    if (// Your-thing ) 
        return NextResponse.redirect(//Your-url);

    return NextResponse.next();
}

Maybe there is a different way, I don't know, but it doesn't matter.

Upvotes: 9

Related Questions