When using NextResponse.rewrite and nuqs useQueryState useParams hook return undefined for existing path params

[Barik85]

Summary

I have changing query param with nuqs. I use this library to achive shallow routing, without full page reload

  import { useQueryState } from 'nuqs'
  ...
  const [lessonsCountFromQuery, setLessonsCount] = useQueryState('lessons')

And I have rewrite in middleware for handling locales:

const locales = ['en', 'es', 'pt']
const { pathname } = request.nextUrl
const { searchParams } = request.nextUrl

  if (pathname.startsWith('/api')) {
    return
  }

  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )

  if (!pathnameHasLocale) {
    return NextResponse.rewrite(
      new URL(
        `/${DEFAULT_LOCALE}${pathname}${
          searchParams.toString() ? `?${searchParams.toString()}` : ''
        }`,
        request.url
      )
    )
  }

  if (pathname.startsWith(`/${DEFAULT_LOCALE}/`)) {
    const newPathname = pathname.replace(`/${DEFAULT_LOCALE}`, '')
    return NextResponse.redirect(new URL(newPathname, request.url), 301)
  }
  if (pathname === `/${DEFAULT_LOCALE}`) {
    return NextResponse.redirect(new URL('/', request.url), 301)
  }

  return NextResponse.next()

matcher:

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|_next/data|favicon.ico|manifest.json|sitemap.xml|robots.txt|.well-known/.*|.*\\.(?:svg|png|jpg|jpeg|gif|webp|css|js|css.map|wav|mp3|ico|pdf|txt|zip|xml|woff|json)$).*)',
  ],
}

Finally I have a route /pages/[lang]/tutoring/tutors/[id].tsx
where id reads by hook:

 const pathParams = useParams()
 const tutorId = pathParams?.id

So untill I change query with nuqs - id returns correct string, but after changing query - id returns undefined.
If I remove NextResponse.rewrite it works as expected. How can I fix it?

Additional information

"next": "14.2.22"
"nuqs": "^2.2.3",

Example

No response

[icyJoseph]

I wonder if this is because a rewrite is like a proxy. Your browser is at a given URL, but the content it gets served belongs to a different source.

I wonder if maybe you could try:

const { pathname } = request.nextUrl
const { searchParams } = request.nextUrl

  if (pathname.startsWith('/api')) {
    return
  }

  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )

  if (!pathnameHasLocale) {
    request.nextUrl.pathname = `/${DEFAULT_LOCALE}${pathname}`
    return NextResponse.rewrite(request.nextUrl)
  }

Could you give this a go, and report back if it does something?

[Barik85]

Thank you for quick reply. But this solution doesn't work (

[Barik85]

Also there was TS2540: Cannot assign to nextUrl because it is a read-only property
So I changed to:

request.nextUrl.pathname = `/${DEFAULT_LOCALE}${pathname}`

[icyJoseph]

Ah my bad, pseudo code that badly

Mmm, I wonder if the redirect further down is being triggered? Like, it rewrites but then it hits the Middleware again? I don't remember if it usually doesn't so that, or if we have to check for a header that says, that the request is a rewrite

[Barik85]

As I see middleware runs only once. There is no additonal call after rewrite.
And I don't see any headers about rewrite.