Reputation: 1250
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
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
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