Is there any way to add some query param in middleware and pass it to server router (next js)

Viewed 50

Next.js v12.2.5

Trying something like URL object as here https://nextjs.org/docs/api-reference/next/link#with-url-object to add query param. It's not working.

Is there any way to add query param inside middleware which can be used inside useRouter() on the server side?

// middleware.ts (conceptual example)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.rewrite({
    pathname: '/',
    query: { requiredParam: 'something' }, // add requiredParam inside middleware
  });
}

export const config = {
  matcher: ['/'],
};
1 Answers

It's possible to do so, it's just that NextResponse.rewrite expects a different format than the object used in next/link.

You can pass a URL object in the following format to make it work.

export function middleware(request: NextRequest) {
    return NextResponse.rewrite(new URL(`/?requiredParam=something`, request.url));;
}
Related