I’m using Next.js 14 with the new App Router, and I’m having trouble accessing query parameters via useSearchParams after setting up a URL rewrite. The goal is to rewrite a URL like /agenda/cet to /agenda?timezone=cet while preserving the original URL structure in the browser.

Here’s my setup:

next.config.js:

    // next.config.js
    module.exports = {
      async rewrites() {
        return {
          beforeFiles: [
            {
              source: '/online/:timezone',
              destination: '/online?timezone=:timezone',
            },
          ],
        };
      },
    };

After setting up the URL rewrite from /agenda/:timezone to /agenda?timezone=:timezone, I expected to be able to access the timezone query parameter using useSearchParams() in any nested client component in the agenda page. However, useSearchParams() returns null or doesn’t capture the query parameter as expected.

What can I do to access the query parameter correctly after the rewrite?