Next.js: Fix useParams support

code/frameworks/nextjs/src/routing/app-router-provider.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type {
   LayoutRouterContext as TLayoutRouterContext,
   AppRouterContext as TAppRouterContext,
+  GlobalLayoutRouterContext as TGlobalLayoutRouterContext,
 } from 'next/dist/shared/lib/app-router-context';
 import type {
   PathnameContext as TPathnameContext,
@@ -21,17 +22,21 @@ let AppRouterContext: typeof TAppRouterContext;
 let LayoutRouterContext: typeof TLayoutRouterContext;
 let PathnameContext: typeof TPathnameContext;
 let SearchParamsContext: typeof TSearchParamsContext;
+let GlobalLayoutRouterContext: typeof TGlobalLayoutRouterContext;
 
 try {
   AppRouterContext = require('next/dist/shared/lib/app-router-context').AppRouterContext;
   LayoutRouterContext = require('next/dist/shared/lib/app-router-context').LayoutRouterContext;
   PathnameContext = require('next/dist/shared/lib/hooks-client-context').PathnameContext;
   SearchParamsContext = require('next/dist/shared/lib/hooks-client-context').SearchParamsContext;
+  GlobalLayoutRouterContext =
+    require('next/dist/shared/lib/app-router-context').GlobalLayoutRouterContext;
 } catch {
   AppRouterContext = React.Fragment as any;
   LayoutRouterContext = React.Fragment as any;
   PathnameContext = React.Fragment as any;
   SearchParamsContext = React.Fragment as any;
+  GlobalLayoutRouterContext = React.Fragment as any;
 }
 
 type AppRouterProviderProps = {
@@ -52,44 +57,62 @@ const getParallelRoutes = (segmentsList: Array<string>): FlightRouterState => {
 const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action, routeParams }) => {
   const { pathname, query, segments = [], ...restRouteParams } = routeParams;
 
+  const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }];
+
+  // https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/app-router.tsx#L436
   return (
-    <AppRouterContext.Provider
-      value={{
-        push(...args) {
-          action('nextNavigation.push')(...args);
-        },
-        replace(...args) {
-          action('nextNavigation.replace')(...args);
-        },
-        forward(...args) {
-          action('nextNavigation.forward')(...args);
-        },
-        back(...args) {
-          action('nextNavigation.back')(...args);
-        },
-        prefetch(...args) {
-          action('nextNavigation.prefetch')(...args);
-        },
-        refresh: () => {
-          action('nextNavigation.refresh')();
-        },
-        ...restRouteParams,
-      }}
-    >
+    <PathnameContext.Provider value={pathname}>
       <SearchParamsContext.Provider value={new URLSearchParams(query)}>
-        <LayoutRouterContext.Provider
+        <GlobalLayoutRouterContext.Provider
           value={{
-            childNodes: new Map(),
-            tree: [pathname, { children: getParallelRoutes([...segments]) }],
-            url: pathname,
-            // @ts-expect-error Necessary for earlier versions of Next 13. Remove as soon as Next.js should not be supported anymore.
-            headRenderedAboveThisLevel: true,
+            changeByServerResponse() {
+              // NOOP
+            },
+            tree,
+            focusAndScrollRef: {
+              apply: false,
+              hashFragment: null,
+              segmentPaths: [tree],
+            },
+            nextUrl: pathname,
           }}
         >
-          <PathnameContext.Provider value={pathname}>{children}</PathnameContext.Provider>
-        </LayoutRouterContext.Provider>
+          <AppRouterContext.Provider
+            value={{
+              push(...args) {
+                action('nextNavigation.push')(...args);
+              },
+              replace(...args) {
+                action('nextNavigation.replace')(...args);
+              },
+              forward(...args) {
+                action('nextNavigation.forward')(...args);
+              },
+              back(...args) {
+                action('nextNavigation.back')(...args);
+              },
+              prefetch(...args) {
+                action('nextNavigation.prefetch')(...args);
+              },
+              refresh: () => {
+                action('nextNavigation.refresh')();
+              },
+              ...restRouteParams,
+            }}
+          >
+            <LayoutRouterContext.Provider
+              value={{
+                childNodes: new Map(),
+                tree,
+                url: pathname,
+              }}
+            >
+              {children}
+            </LayoutRouterContext.Provider>
+          </AppRouterContext.Provider>
+        </GlobalLayoutRouterContext.Provider>
       </SearchParamsContext.Provider>
-    </AppRouterContext.Provider>
+    </PathnameContext.Provider>
   );
 };
 

code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx

@@ -2,6 +2,7 @@ import {
   useRouter,
   usePathname,
   useSearchParams,
+  useParams,
   useSelectedLayoutSegment,
   useSelectedLayoutSegments,
 } from 'next/navigation';
@@ -11,6 +12,7 @@ function Component() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const params = useParams();
   const segment = useSelectedLayoutSegment();
   const segments = useSelectedLayoutSegments();
 
@@ -58,6 +60,16 @@ function Component() {
           ))}
         </ul>
       </div>
+      <div>
+        params:{' '}
+        <ul>
+          {Object.entries(params).map(([key, value]) => (
+            <li key={key}>
+              {key}: {value}
+            </li>
+          ))}
+        </ul>
+      </div>
       {routerActions.map(({ cb, name }) => (
         <div key={name} style={{ marginBottom: '1em' }}>
           <button type="button" onClick={cb}>
@@ -96,3 +108,17 @@ export const WithSegmentDefined = {
     },
   },
 };
+
+export const WithSegmentDefinedForParams = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+};