Polish instant fix cards and validation messages

packages/next/errors.json

@@ -1250,7 +1250,28 @@
   "1249": "Route \"%s\": Next.js encountered uncached data during the initial render or a navigation.\\n\\n\\`fetch(...)\\` or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
   "1250": "Route \"%s\": Next.js encountered runtime data during the initial render or a navigation.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
   "1251": "Route \"%s\": Next.js encountered runtime data during the initial render or a navigation.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
-  "1252": "\\`experimental.cssChunking: \"graph\"\\` is only supported with Turbopack. Please remove the option or run Next.js with Turbopack in %s.",
-  "1253": "\\`experimental.cssChunking: \"strict\"\\` is only supported with webpack. Please remove the option or run Next.js with webpack in %s.",
-  "1254": "\\`experimental.cssChunking: false\\` is only supported with webpack. Please remove the option or run Next.js with webpack in %s."
+  "1252": "Route \"%s\": Next.js encountered runtime data in \\`generateViewport()\\`.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` in \\`generateViewport()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static viewport export instead of \\`generateViewport()\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1253": "Route \"%s\": Next.js encountered uncached or runtime data in \\`generateViewport()\\`.\\n\\nThis prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static viewport export instead of \\`generateViewport()\\`\\n  - Cache the viewport data with \\`\"use cache\"\\` in \\`generateViewport()\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1254": "Route \"%s\": Next.js encountered uncached or runtime data during the initial render.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If params are known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1255": "Route \"%s\": Next.js encountered uncached data in \\`generateViewport()\\`.\\n\\n\\`fetch(...)\\` or \\`connection()\\` in \\`generateViewport()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the viewport data with \\`\"use cache\"\\` in \\`generateViewport()\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1256": "Route \"%s\": Next.js encountered %s in a Client Component.\\n\\nThis value would be evaluated during the prerender, instead of recomputed on each visit.\\n\\nWays to fix this:\\n  - Wrap the Client Component in \\`<Suspense fallback={...}>\\`\\n  - Move the read into a \\`useEffect\\` or event handler\\n%s\\nLearn more: %s",
+  "1257": "Route \"%s\": Next.js encountered runtime data during the initial render.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If params are known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1258": "Route \"%s\": Next.js encountered runtime data during the initial render or a navigation.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If params are known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1259": "Route \"%s\": Next.js encountered %s while prerendering.\\n\\nThis value can change between renders, so it must be either prerendered or computed later.\\n\\nWays to fix this:\\n  - Render at request time by adding a dynamic data access (e.g. \\`await connection()\\`) before this call\\n  - Prerender and cache the value with \\`\"use cache\"\\`\\n  - Render the value on the client with \\`\"use client\"\\`\\n%s\\nLearn more: %s",
+  "1260": "Route \"%s\": Next.js encountered runtime data during prerendering or a navigation.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If params are known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1261": "Route \"%s\": Next.js encountered the unstable value %s while prerendering.\\n\\nThis value can change between renders, so it must be either prerendered or computed later.\\n\\nWays to fix this:\\n  - Render at request time by adding a dynamic data access (e.g. \\`await connection()\\`) before this call\\n  - Prerender and cache the value with \\`\"use cache\"\\`\\n  - Render the value on the client with \\`\"use client\"\\`\\n%s\\nLearn more: %s",
+  "1262": "Route \"%s\": Next.js encountered uncached or runtime data during prerendering.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If params are known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1263": "Route \"%s\": Next.js encountered runtime data during prerendering.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If params are known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1264": "Route \"%s\": Next.js encountered uncached data during prerendering or a navigation.\\n\\n\\`fetch(...)\\` or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1265": "Route \"%s\": Next.js encountered uncached data during prerendering.\\n\\n\\`fetch(...)\\` or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1266": "Route \"%s\": Next.js encountered the unstable value %s in a Client Component.\\n\\nThis value would be evaluated during the prerender, instead of recomputed on each visit.\\n\\nWays to fix this:\\n  - Wrap the Client Component in \\`<Suspense fallback={...}>\\`\\n  - Move the read into a \\`useEffect\\` or event handler\\n%s\\nLearn more: %s",
+  "1267": "Route \"%s\": Next.js encountered runtime data during prerendering.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Prerender params if known with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1268": "Route \"%s\": Next.js encountered runtime data during prerendering or a navigation.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Prerender params if known with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1269": "Route \"%s\": Next.js encountered uncached or runtime data during prerendering.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Prerender params if known with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1270": "Route \"%s\": Next.js encountered uncached or runtime data during prerendering.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If the runtime data is \\`params\\` and they're known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1271": "Route \"%s\": Next.js encountered runtime data during prerendering or a navigation.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If the runtime data is \\`params\\` and they're known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1272": "Route \"%s\": Next.js encountered runtime data during prerendering.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - If the runtime data is \\`params\\` and they're known, prerender them with \\`generateStaticParams\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1273": "\\`experimental.cssChunking: \"graph\"\\` is only supported with Turbopack. Please remove the option or run Next.js with Turbopack in %s.",
+  "1274": "\\`experimental.cssChunking: \"strict\"\\` is only supported with webpack. Please remove the option or run Next.js with webpack in %s.",
+  "1275": "\\`experimental.cssChunking: false\\` is only supported with webpack. Please remove the option or run Next.js with webpack in %s."
 }

packages/next/src/next-devtools/dev-overlay/components/errors/dialog/dialog.tsx

@@ -39,6 +39,7 @@ export const DIALOG_STYLES = `
 
   .error-overlay-dialog-scroll {
     overflow-y: auto;
+    scrollbar-gutter: stable;
     height: 100%;
   }
 `

packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance-data.ts

@@ -16,6 +16,7 @@ export type FixCardIcon =
   | 'database'
   | 'history'
   | 'layout'
+  | 'loading'
   | 'octagon'
   | 'pointer-click'
   | 'server-stack'
@@ -28,7 +29,7 @@ export const FIX_CARD_GROUPS: Record<
 > = {
   stream: { label: 'Stream', color: 'blue', icon: 'align-left' },
   prerender: { label: 'Prerender', color: 'purple', icon: 'history' },
-  block: { label: 'Block', color: 'red', icon: 'octagon' },
+  block: { label: 'Block', color: 'red', icon: 'loading' },
   cache: { label: 'Cache', color: 'purple', icon: 'database' },
   static: { label: 'Static', color: 'gray', icon: 'zap' },
   dynamic: { label: 'Dynamic', color: 'blue', icon: 'server-stack' },
@@ -77,7 +78,7 @@ const runtimeCards: FixCard[] = [
   },
   {
     id: 'prerender-known-params',
-    title: 'Prerender known params',
+    title: 'For known params, prerender',
     group: 'cache',
     link: 'https://nextjs.org/docs/messages/blocking-route#prerender-known-params',
     snippets: [
@@ -162,7 +163,7 @@ const metadataRuntimeCards: FixCard[] = [
   },
   {
     id: 'render-page-at-request-time',
-    title: 'Generate the page on every request',
+    title: 'Mark the route as dynamic',
     group: 'dynamic',
     link: 'https://nextjs.org/docs/messages/next-prerender-dynamic-metadata#render-page-at-request-time',
     snippets: [
@@ -186,7 +187,7 @@ const metadataDynamicCards: FixCard[] = [
   },
   {
     id: 'render-page-at-request-time',
-    title: 'Generate the page on every request',
+    title: 'Mark the route as dynamic',
     group: 'dynamic',
     link: 'https://nextjs.org/docs/messages/next-prerender-dynamic-metadata#render-page-at-request-time',
     snippets: [
@@ -210,17 +211,6 @@ const viewportRuntimeCards: FixCard[] = [
       { text: '}' },
     ],
   },
-  {
-    id: 'wrap-body-in-suspense',
-    title: 'Wrap body in Suspense',
-    group: 'stream',
-    link: 'https://nextjs.org/docs/messages/next-prerender-dynamic-viewport#wrap-body-in-suspense',
-    snippets: [
-      { text: '<Suspense>', highlight: true },
-      { text: '  <body>{children}</body>' },
-      { text: '</Suspense>', highlight: true },
-    ],
-  },
   {
     id: 'allow-blocking-route',
     title: 'Allow blocking route',
@@ -245,17 +235,6 @@ const viewportDynamicCards: FixCard[] = [
       { text: '  return await db.getViewport(…)' },
     ],
   },
-  {
-    id: 'wrap-body-in-suspense',
-    title: 'Wrap body in Suspense',
-    group: 'stream',
-    link: 'https://nextjs.org/docs/messages/next-prerender-dynamic-viewport#wrap-body-in-suspense',
-    snippets: [
-      { text: '<Suspense>', highlight: true },
-      { text: '  <body>{children}</body>' },
-      { text: '</Suspense>', highlight: true },
-    ],
-  },
   {
     id: 'allow-blocking-route',
     title: 'Allow blocking route',
@@ -300,8 +279,8 @@ const syncMathCards: FixCard[] = [
     link: 'https://nextjs.org/docs/messages/next-prerender-random#render-on-the-client',
     snippets: [
       { text: '"use client"', highlight: true },
-      { text: 'const [id] = useState(() => Math.random())' },
-      { text: 'return <Item id={id} />' },
+      { text: '// runs in the browser' },
+      { text: 'const id = Math.random()' },
     ],
   },
 ]
@@ -336,13 +315,13 @@ const syncDateCards: FixCard[] = [
     link: 'https://nextjs.org/docs/messages/next-prerender-current-time#render-on-the-client',
     snippets: [
       { text: '"use client"', highlight: true },
-      { text: 'useEffect(() => setT(Date.now()), [])' },
-      { text: 'return <Banner time={t} />' },
+      { text: '// runs in the browser' },
+      { text: 'const t = Date.now()' },
     ],
   },
   {
     id: 'measure-elapsed-time',
-    title: 'Measure elapsed time',
+    title: 'For telemetry, use a timing API',
     group: 'measure',
     link: 'https://nextjs.org/docs/messages/next-prerender-current-time#measure-elapsed-time',
     snippets: [
@@ -383,8 +362,8 @@ const syncCryptoCards: FixCard[] = [
     link: 'https://nextjs.org/docs/messages/next-prerender-crypto#render-on-the-client',
     snippets: [
       { text: '"use client"', highlight: true },
-      { text: 'const [id] = useState(() => crypto.randomUUID())' },
-      { text: 'return <Token id={id} />' },
+      { text: '// runs in the browser' },
+      { text: 'const id = crypto.randomUUID()' },
     ],
   },
 ]
@@ -416,7 +395,7 @@ const syncClientDateCards: FixCard[] = [
   },
   {
     id: 'measure-elapsed-time',
-    title: 'Measure elapsed time',
+    title: 'For telemetry, use a timing API',
     group: 'measure',
     link: 'https://nextjs.org/docs/messages/next-prerender-current-time-client#measure-elapsed-time',
     snippets: [