decode app router params in buildLegacyCtx

apps/web/lib/buildLegacyCtx.tsx

@@ -26,6 +26,25 @@ const buildLegacyCookies = (cookies: ReadonlyRequestCookies) => {
   return createProxifiedObject(cookiesObject);
 };
 
+function decodeParams(params: Params): Params {
+  return Object.entries(params).reduce((acc, [key, value]) => {
+    // Handle array values
+    if (Array.isArray(value)) {
+      acc[key] = value.map((item) => decodeURIComponent(item));
+      return acc;
+    }
+
+    // Handle single values
+    if (value !== undefined) {
+      acc[key] = decodeURIComponent(value);
+    } else {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {} as Params);
+}
+
 export const buildLegacyCtx = (
   headers: ReadonlyHeaders,
   cookies: ReadonlyRequestCookies,
@@ -34,7 +53,9 @@ export const buildLegacyCtx = (
 ) => {
   return {
     query: { ...searchParams, ...params },
-    params,
+    // decoding is required to be backward compatible with Pages Router
+    // because Next.js App Router does not auto-decode query params while Pages Router does
+    params: decodeParams(params),
     req: { headers: buildLegacyHeaders(headers), cookies: buildLegacyCookies(cookies) },
     res: new Proxy(Object.create(null), {
       // const { req, res } = ctx - valid