App Router rewrites & params...

[rich zephyr]

I'm trying to create an app with a master-detail style layout which will require very flexible URL structures... to accomplish this, I was attempting to use rewrites to map multiple routes to the same page component. While the mapping works, I can't figure out how to access the actual params.

next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
    async rewrites() {
        return [
            { source: '/browse/:searchTerm', destination: '/browse' },

            // Also tried these:
            { source: '/browse/:searchTerm', destination: '/browse?q=:searchTerm' },
            { source: '/browse/:searchTerm*', destination: '/browse?q=:searchTerm*' },
        ];
    },
};

export default nextConfig;

app/(pages)/(app)/browse/page.tsx:

...
const BrowsePage: React.FC = () => {
    const pathname = usePathname();
    console.log('pathname', pathname);
    
    const searchParams = useSearchParams();
    console.log('searchParams get(q)', searchParams?.get('q'));
    console.log('searchParams get(searchTerm)', searchParams?.get('searchTerm'));
    console.log('searchParams get(apples)', searchParams?.get('apples'));
    
    const deferredSearchParams = useDeferredValue(searchParams);
    console.log('deferredSearchParams', deferredSearchParams);
...

browse/testtttt?apples=bananas:

pathname /browse/testtttt
searchParams ReadonlyURLSearchParams {size: 1}
searchParams get(q) null
searchParams get(searchTerm) null
searchParams get(apples) bananas
deferredSearchParams ReadonlyURLSearchParams {size: 1}

While I could parse the pathname to get what I want, my understanding of the documentation was that testtttt would be matched as the :searchTerm and be automatically added to the searchParams. Even using the alternate rewrite, assigning ?q=:searchTerm, I get the same output without the searchTerm anywhere.

[onyx heath]

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)

[brittle latch]

Hey @rich zephyr I had a similar issue. Instead of setting rewrites in the nextJS config, I used a custom middleware by adding a middleware.ts file in the src folder. Example:

https://github.com/vercel/platforms/blob/main/middleware.ts

That gave me my params back

[rich zephyr]

Ohh, I tried the middleware approach but I was using NextResponse.redirect(), didn't realize there was also a NextResponse.rewrite()... DERP I resorted to doing the rewrite in the config and parsing the pathname myself on the client but I'll have to give middleware another go.

Does this mean the rewrites config is bugged or was the behavior intentionally removed and the documentation wasn't updated? 🤔 I tried searching through some of the issues and didn't see anything really mentioning it.

Thanks for taking the time to respond. 👍🏼