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.