Shallow Routing with dynamic routes

[leaden ivy]

Recently, due to some requirements of the project, we created some middleware to force all url paths within the app to lowercase, however, with dynamic paths, the links end up producing something along the lines of: /user/test?username=test, if we modify next/link to enable shallow routing, it strips the extra stuff from the url, but causes page flickers;

What would be the proper way to resolve it, rather than just doing <Link href={`/user/${username.toLowerCase()}`}>profile</Link>

middleware:

export function middleware(request: NextRequest) {
    const pathname = request.nextUrl.pathname
    // Check if the pathname is not lowercase
    if (pathname !== pathname.toLowerCase()) {
        // Create a new URL with the lowercase pathname
        const url = request.nextUrl.clone()
        url.pathname = pathname.toLowerCase()

        // Redirect to the lowercase URL
        return NextResponse.redirect(url)
    }
}

[quiet fiber]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[barren marlin]

in middleware you arent preserve search parameters (query params) when constructing the new URL. The issue occurs because request.nextUrl.clone() does not automatically retain the search parameters when modifying the pathname.
so something like this ??
const url = new URL(request.nextUrl.origin + pathname.toLowerCase() + request.nextUrl.search);

[leaden ivy]

The issue is next’s link component automatically adds query parameters to the dynamic links unless I force lowercase on their path, standard html linking works perfectly as expected

[barren marlin]

is it? that sounds strange , can you create a short sandbox and reproduce the issue

[leaden ivy]

Reproduction is just using that middleware with next/link on a dynamic route;

I can “fix” it by just putting toLowerCase() on every dynamic path but that seems relatively hacky

[barren marlin]

yeah, putting lowerCase() and producing extra search parameters seems not related at all, all i can say (pathname !== pathname.toLowerCase()) { this line is checking for not lower case and if you explicitly put lower case then it will bypass this condition.
I dont understand what you mean by next/link on a dynamic route, is it like when you add link inside of pages/user/[id]/page.tsx ?
I would recommend reproducing it on Sandbox and screen record of it .

[leaden ivy]

it's particularly using dynamic links yeah:

<Link href={`/user/${user.username}`>{user.username}</Link>```

when utilizing links in this fashion, all dynamic links, if a username results in something like `Limbo_Anj`, it'll return `/user/Limbo_anj?username=Limbo_Anj`

using a standard html link works fine though with the expected behavior of forcing everything lowercase, so not sure where the random query parameter comes from lol, if I remove that middleware stuff, links work fine again

[barren marlin]

https://codesandbox.io/p/devbox/3h47mj?file=%2Fapp%2F_components%2Fdynamic-links.tsx%3A12%2C15 check this sandbox, i added your middleware, add links for user object like this and for me, it isnt adding any search param, can you console user, username and see what you are having?

[leaden ivy]

it works fine when you visit the path name through the physical linking of it in the address bar, it seems to only be an issue with clicking a link to a dynamic page;

if shallow is enabled as true it works properly, but causes page flickering due to SSR not being re-triggered, so my thought is it's something else?

for more context this projet is also utilizing pages router

[barren marlin]

you see when i hover on the button Limbo_anj. and see the URL on left bottom, it has not added any search params, and user/[username]/page.tsx is a dynamic page right

[leaden ivy]

yes, and it doesn't when i hover, it seems to be an issue with non-shallow routing