changes from feedback

ztanner · ztanner · commit cbb18b257f07 · 2025-10-19T22:19:54.000-07:00
diff --git a/packages/next/src/client/components/navigation-devtools.ts b/packages/next/src/client/components/navigation-devtools.ts
@@ -9,7 +9,7 @@ import {
   computeSelectedLayoutSegment,
   getSelectedLayoutSegmentPath,
 } from '../../shared/lib/segment'
-import { ReadonlyURLSearchParams } from './navigation.react-server'
+import { ReadonlyURLSearchParams } from './readonly-url-search-params'
 
 /**
  * Promises are cached by tree to ensure stability across suspense retries.
@@ -62,7 +62,7 @@ export function createLayoutSegmentPromises(
     )
   }
 
-  const result = {
+  const result: LayoutSegmentPromisesCache = {
     selectedLayoutSegmentPromises: segmentPromises,
     selectedLayoutSegmentsPromises: segmentsPromises,
   }
diff --git a/packages/next/src/client/components/navigation.react-server.ts b/packages/next/src/client/components/navigation.react-server.ts
@@ -1,30 +1,4 @@
-/** @internal */
-class ReadonlyURLSearchParamsError extends Error {
-  constructor() {
-    super(
-      'Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams'
-    )
-  }
-}
-
-class ReadonlyURLSearchParams extends URLSearchParams {
-  /** @deprecated Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams */
-  append() {
-    throw new ReadonlyURLSearchParamsError()
-  }
-  /** @deprecated Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams */
-  delete() {
-    throw new ReadonlyURLSearchParamsError()
-  }
-  /** @deprecated Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams */
-  set() {
-    throw new ReadonlyURLSearchParamsError()
-  }
-  /** @deprecated Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams */
-  sort() {
-    throw new ReadonlyURLSearchParamsError()
-  }
-}
+import { ReadonlyURLSearchParams } from './readonly-url-search-params'
 
 export function unstable_isUnrecognizedActionError(): boolean {
   throw new Error(
diff --git a/packages/next/src/client/components/navigation.ts b/packages/next/src/client/components/navigation.ts
@@ -16,7 +16,7 @@ import {
   computeSelectedLayoutSegment,
   getSelectedLayoutSegmentPath,
 } from '../../shared/lib/segment'
-import { ReadonlyURLSearchParams } from './navigation.react-server'
+import { ReadonlyURLSearchParams } from './readonly-url-search-params'
 
 const useDynamicRouteParams =
   typeof window === 'undefined'
@@ -56,7 +56,6 @@ const useDynamicSearchParams =
 export function useSearchParams(): ReadonlyURLSearchParams {
   useDynamicSearchParams?.('useSearchParams()')
 
-  const navigationPromises = useContext(NavigationPromisesContext)
   const searchParams = useContext(SearchParamsContext)
 
   // In the case where this is `null`, the compat types added in
@@ -73,8 +72,11 @@ export function useSearchParams(): ReadonlyURLSearchParams {
   }, [searchParams]) as ReadonlyURLSearchParams
 
   // Instrument with Suspense DevTools (dev-only)
-  if (process.env.NODE_ENV !== 'production' && navigationPromises) {
-    return use(navigationPromises.searchParams)
+  if (process.env.NODE_ENV !== 'production') {
+    const navigationPromises = use(NavigationPromisesContext)
+    if (navigationPromises) {
+      return use(navigationPromises.searchParams)
+    }
   }
 
   return readonlySearchParams
@@ -101,14 +103,16 @@ export function useSearchParams(): ReadonlyURLSearchParams {
 export function usePathname(): string {
   useDynamicRouteParams?.('usePathname()')
 
-  const navigationPromises = useContext(NavigationPromisesContext)
   // In the case where this is `null`, the compat types added in `next-env.d.ts`
   // will add a new overload that changes the return type to include `null`.
   const pathname = useContext(PathnameContext) as string
 
   // Instrument with Suspense DevTools (dev-only)
-  if (process.env.NODE_ENV !== 'production' && navigationPromises) {
-    return use(navigationPromises.pathname)
+  if (process.env.NODE_ENV !== 'production') {
+    const navigationPromises = use(NavigationPromisesContext)
+    if (navigationPromises) {
+      return use(navigationPromises.pathname)
+    }
   }
 
   return pathname
@@ -169,12 +173,14 @@ export function useRouter(): AppRouterInstance {
 export function useParams<T extends Params = Params>(): T {
   useDynamicRouteParams?.('useParams()')
 
-  const navigationPromises = useContext(NavigationPromisesContext)
   const params = useContext(PathParamsContext) as T
 
   // Instrument with Suspense DevTools (dev-only)
-  if (process.env.NODE_ENV !== 'production' && navigationPromises) {
-    return use(navigationPromises.params) as T
+  if (process.env.NODE_ENV !== 'production') {
+    const navigationPromises = use(NavigationPromisesContext)
+    if (navigationPromises) {
+      return use(navigationPromises.params) as T
+    }
   }
 
   return params
@@ -211,19 +217,21 @@ export function useSelectedLayoutSegments(
 ): string[] {
   useDynamicRouteParams?.('useSelectedLayoutSegments()')
 
-  const navigationPromises = useContext(NavigationPromisesContext)
   const context = useContext(LayoutRouterContext)
   // @ts-expect-error This only happens in `pages`. Type is overwritten in navigation.d.ts
   if (!context) return null
 
   // Instrument with Suspense DevTools (dev-only)
-  if (process.env.NODE_ENV !== 'production' && navigationPromises) {
-    const promise =
-      navigationPromises.selectedLayoutSegmentsPromises?.get(parallelRouteKey)
-    if (promise) {
-      // We should always have a promise here, but if we don't, it's not worth erroring over.
-      // We just won't be able to instrument it, but can still provide the value.
-      return use(promise)
+  if (process.env.NODE_ENV !== 'production') {
+    const navigationPromises = use(NavigationPromisesContext)
+    if (navigationPromises) {
+      const promise =
+        navigationPromises.selectedLayoutSegmentsPromises?.get(parallelRouteKey)
+      if (promise) {
+        // We should always have a promise here, but if we don't, it's not worth erroring over.
+        // We just won't be able to instrument it, but can still provide the value.
+        return use(promise)
+      }
     }
   }
 
diff --git a/packages/next/src/client/components/readonly-url-search-params.ts b/packages/next/src/client/components/readonly-url-search-params.ts
@@ -0,0 +1,37 @@
+/**
+ * ReadonlyURLSearchParams implementation shared between client and server.
+ * This file is intentionally not marked as 'use client' or 'use server'
+ * so it can be imported by both environments.
+ */
+
+/** @internal */
+class ReadonlyURLSearchParamsError extends Error {
+  constructor() {
+    super(
+      'Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams'
+    )
+  }
+}
+
+/**
+ * A read-only version of URLSearchParams that throws errors when mutation methods are called.
+ * This ensures that the URLSearchParams returned by useSearchParams() cannot be mutated.
+ */
+export class ReadonlyURLSearchParams extends URLSearchParams {
+  /** @deprecated Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams */
+  append() {
+    throw new ReadonlyURLSearchParamsError()
+  }
+  /** @deprecated Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams */
+  delete() {
+    throw new ReadonlyURLSearchParamsError()
+  }
+  /** @deprecated Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams */
+  set() {
+    throw new ReadonlyURLSearchParamsError()
+  }
+  /** @deprecated Method unavailable on `ReadonlyURLSearchParams`. Read more: https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams */
+  sort() {
+    throw new ReadonlyURLSearchParamsError()
+  }
+}
diff --git a/packages/next/src/shared/lib/hooks-client-context.shared-runtime.ts b/packages/next/src/shared/lib/hooks-client-context.shared-runtime.ts
@@ -9,7 +9,6 @@ export const PathParamsContext = createContext<Params | null>(null)
 
 // Dev-only context for Suspense DevTools instrumentation
 // These promises are used to track navigation hook usage in React DevTools
-// These are instrumented promises with additional properties that React DevTools expects
 export type InstrumentedPromise<T> = Promise<T> & {
   status: 'fulfilled'
   value: T
diff --git a/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts b/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts
@@ -238,13 +238,13 @@ describe('Cache Components Errors', () => {
                    at ScrollAndFocusHandler (bundler:///<next-src>)
                    at RenderFromTemplateContext (bundler:///<next-src>)
                    at OuterLayoutRouter (bundler:///<next-src>)
-                 333 |  */
-                 334 | function InnerLayoutRouter({
-               > 335 |   tree,
+                 335 |  */
+                 336 | function InnerLayoutRouter({
+               > 337 |   tree,
                      |   ^
-                 336 |   segmentPath,
-                 337 |   cacheNode,
-                 338 |   url,
+                 338 |   segmentPath,
+                 339 |   cacheNode,
+                 340 |   url,
                To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/dynamic-metadata-error-route" in your browser to investigate the error.
                Error occurred prerendering page "/dynamic-metadata-error-route". Read more: https://nextjs.org/docs/messages/prerender-error
 
@@ -745,13 +745,13 @@ describe('Cache Components Errors', () => {
                    at ScrollAndFocusHandler (bundler:///<next-src>)
                    at RenderFromTemplateContext (bundler:///<next-src>)
                    at OuterLayoutRouter (bundler:///<next-src>)
-                 333 |  */
-                 334 | function InnerLayoutRouter({
-               > 335 |   tree,
+                 335 |  */
+                 336 | function InnerLayoutRouter({
+               > 337 |   tree,
                      |   ^
-                 336 |   segmentPath,
-                 337 |   cacheNode,
-                 338 |   url,
+                 338 |   segmentPath,
+                 339 |   cacheNode,
+                 340 |   url,
                To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/dynamic-root" in your browser to investigate the error.
                Error occurred prerendering page "/dynamic-root". Read more: https://nextjs.org/docs/messages/prerender-error
 
@@ -2141,13 +2141,13 @@ describe('Cache Components Errors', () => {
                      at ScrollAndFocusHandler (bundler:///<next-src>)
                      at RenderFromTemplateContext (<anonymous>)
                      at OuterLayoutRouter (bundler:///<next-src>)
-                   333 |  */
-                   334 | function InnerLayoutRouter({
-                 > 335 |   tree,
+                   335 |  */
+                   336 | function InnerLayoutRouter({
+                 > 337 |   tree,
                        |   ^
-                   336 |   segmentPath,
-                   337 |   cacheNode,
-                   338 |   url,
+                   338 |   segmentPath,
+                   339 |   cacheNode,
+                   340 |   url,
                  To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/sync-attribution/unguarded-async-guarded-clientsync" in your browser to investigate the error.
                  Error occurred prerendering page "/sync-attribution/unguarded-async-guarded-clientsync". Read more: https://nextjs.org/docs/messages/prerender-error
 
@@ -3157,13 +3157,13 @@ describe('Cache Components Errors', () => {
                      at ScrollAndFocusHandler (bundler:///<next-src>)
                      at RenderFromTemplateContext (bundler:///<next-src>)
                      at OuterLayoutRouter (bundler:///<next-src>)
-                   333 |  */
-                   334 | function InnerLayoutRouter({
-                 > 335 |   tree,
+                   335 |  */
+                   336 | function InnerLayoutRouter({
+                 > 337 |   tree,
                        |   ^
-                   336 |   segmentPath,
-                   337 |   cacheNode,
-                   338 |   url,
+                   338 |   segmentPath,
+                   339 |   cacheNode,
+                   340 |   url,
                  To get a more detailed stack trace and pinpoint the issue, start the app in development mode by running \`next dev\`, then open "/use-cache-private-without-suspense" in your browser to investigate the error.
                  Error occurred prerendering page "/use-cache-private-without-suspense". Read more: https://nextjs.org/docs/messages/prerender-error
 
