From ef77913eaad2fe479230a9beea1584537581d843 Mon Sep 17 00:00:00 2001
From: haddoumounir <165167690+haddoumounir@users.noreply.github.com>
Date: Thu, 26 Mar 2026 23:27:48 +0100
Subject: [PATCH] fix(app-router-playground): resolve React Doctor findings and
 build warnings

---
 .../@breadcrumbs/[...all]/page.tsx            | 12 +++---
 .../app/api/og/route.tsx                      | 16 ++++---
 .../app/context/context-click-counter.tsx     |  2 +-
 .../app/loading/[section]/[category]/page.tsx | 13 +++---
 .../app/loading/[section]/page.tsx            | 13 +++---
 .../_components/product-list.tsx              |  5 +--
 .../_components/recommendations.tsx           |  4 +-
 .../private-cache/product/[id]/loading.tsx    |  4 +-
 .../product/[id]/with-private/page.tsx        |  4 +-
 .../product/[id]/without-private/page.tsx     |  4 +-
 .../[section]/[category]/page.tsx             | 13 +++---
 .../ui/click-counter.tsx                      |  2 +-
 .../app-router-playground/ui/codehike.tsx     | 43 +++++++++++++++----
 .../app-router-playground/ui/skeleton.tsx     | 13 ++++--
 examples/app-router-playground/vite.config.ts | 23 ++++++++++
 .../app-router-playground/worker/index.ts     |  4 ++
 16 files changed, 118 insertions(+), 57 deletions(-)

diff --git a/examples/app-router-playground/app/_patterns/breadcrumbs/@breadcrumbs/[...all]/page.tsx b/examples/app-router-playground/app/_patterns/breadcrumbs/@breadcrumbs/[...all]/page.tsx
index d1d2eda8e..76cc419eb 100644
--- a/examples/app-router-playground/app/_patterns/breadcrumbs/@breadcrumbs/[...all]/page.tsx
+++ b/examples/app-router-playground/app/_patterns/breadcrumbs/@breadcrumbs/[...all]/page.tsx
@@ -9,13 +9,11 @@ export default async function Page({
 
   // Note: you could fetch breadcrumb data based on params here
   // e.g. title, slug, children/siblings (for dropdowns)
-  const items = [
-    ...all.map((param, index) => ({
-      text: param,
-      // build cumulative path by joining all segments up to current index
-      href: `/${all.slice(0, index + 1).join('/')}`,
-    })),
-  ];
+  const items = all.map((param, index) => ({
+    text: param,
+    // build cumulative path by joining all segments up to current index
+    href: `/${all.slice(0, index + 1).join('/')}`,
+  }));
 
   return <Breadcrumbs items={items} />;
 }
diff --git a/examples/app-router-playground/app/api/og/route.tsx b/examples/app-router-playground/app/api/og/route.tsx
index da42a44fe..2561a6263 100644
--- a/examples/app-router-playground/app/api/og/route.tsx
+++ b/examples/app-router-playground/app/api/og/route.tsx
@@ -66,8 +66,7 @@ export async function GET(req: NextRequest): Promise<Response> {
   }
 }
 
-function LightSvg(): ReactElement {
-  return (
+const LIGHT_SVG: ReactElement = (
     <svg
       fill="none"
       height="441"
@@ -229,7 +228,7 @@ function LightSvg(): ReactElement {
           height="88.5"
           rx="13.8"
           stroke="url(#paint1_radial_5_3)"
-          stroke-opacity="0.15"
+          strokeOpacity="0.15"
           strokeWidth="1.5"
           transform="rotate(-180 465.75 197.75)"
           width="88.5"
@@ -240,7 +239,7 @@ function LightSvg(): ReactElement {
           height="88.5"
           rx="13.8"
           stroke="url(#paint2_linear_5_3)"
-          stroke-opacity="0.5"
+          strokeOpacity="0.5"
           strokeWidth="1.5"
           transform="rotate(-180 465.75 197.75)"
           width="88.5"
@@ -368,7 +367,10 @@ function LightSvg(): ReactElement {
         </clipPath>
       </defs>
     </svg>
-  );
+);
+
+function LightSvg(): ReactElement {
+  return LIGHT_SVG;
 }
 
 function DarkSvg(): ReactElement {
@@ -534,7 +536,7 @@ function DarkSvg(): ReactElement {
           height="88.0875"
           rx="13.5937"
           stroke="url(#paint1_radial_1_4)"
-          stroke-opacity="0.15"
+          strokeOpacity="0.15"
           strokeWidth="1.0875"
           width="88.0875"
           x="377.456"
@@ -544,7 +546,7 @@ function DarkSvg(): ReactElement {
           height="88.0875"
           rx="13.5937"
           stroke="url(#paint2_linear_1_4)"
-          stroke-opacity="0.5"
+          strokeOpacity="0.5"
           strokeWidth="1.0875"
           width="88.0875"
           x="377.456"
diff --git a/examples/app-router-playground/app/context/context-click-counter.tsx b/examples/app-router-playground/app/context/context-click-counter.tsx
index bbb404cdd..36cfab5da 100644
--- a/examples/app-router-playground/app/context/context-click-counter.tsx
+++ b/examples/app-router-playground/app/context/context-click-counter.tsx
@@ -15,7 +15,7 @@ const ContextClickCounter = () => {
       animateRerendering={false}
     >
       <button
-        onClick={() => setCount(count + 1)}
+        onClick={() => setCount((prev) => prev + 1)}
         className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium text-gray-100 tabular-nums hover:bg-gray-500 hover:text-white"
       >
         {count} Clicks
diff --git a/examples/app-router-playground/app/loading/[section]/[category]/page.tsx b/examples/app-router-playground/app/loading/[section]/[category]/page.tsx
index 9e8ed91ff..35e98ae5a 100644
--- a/examples/app-router-playground/app/loading/[section]/[category]/page.tsx
+++ b/examples/app-router-playground/app/loading/[section]/[category]/page.tsx
@@ -12,12 +12,13 @@ export default async function Page({
   // DEMO:
   // This page would normally be prerendered at build time because it doesn't use dynamic APIs.
   // That means the loading state wouldn't show. To force one:
-  // 1. We indicate that we require a user Request before continuing:
-  await connection();
-  // 2. Add an artificial delay to make the loading state more noticeable:
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-
-  const { category: categorySlug } = await params;
+  // 1. We indicate that we require a user Request before continuing.
+  // 2. Add an artificial delay to make the loading state more noticeable.
+  const [{ category: categorySlug }] = await Promise.all([
+    params,
+    connection(),
+    new Promise((resolve) => setTimeout(resolve, 1000)),
+  ]);
   const category = db.category.find({ where: { slug: categorySlug } });
 
   if (!category) {
diff --git a/examples/app-router-playground/app/loading/[section]/page.tsx b/examples/app-router-playground/app/loading/[section]/page.tsx
index 81dc9ad60..b3fb8e600 100644
--- a/examples/app-router-playground/app/loading/[section]/page.tsx
+++ b/examples/app-router-playground/app/loading/[section]/page.tsx
@@ -12,12 +12,13 @@ export default async function Page({
   // DEMO:
   // This page would normally be prerendered at build time because it doesn't use dynamic APIs.
   // That means the loading state wouldn't show. To force one:
-  // 1. We indicate that we require a user Request before continuing:
-  await connection();
-  // 2. Add an artificial delay to make the loading state more noticeable:
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-
-  const { section: sectionSlug } = await params;
+  // 1. We indicate that we require a user Request before continuing.
+  // 2. Add an artificial delay to make the loading state more noticeable.
+  const [{ section: sectionSlug }] = await Promise.all([
+    params,
+    connection(),
+    new Promise((resolve) => setTimeout(resolve, 1000)),
+  ]);
   const section = db.section.find({ where: { slug: sectionSlug } });
   if (!section) {
     notFound();
diff --git a/examples/app-router-playground/app/private-cache/_components/product-list.tsx b/examples/app-router-playground/app/private-cache/_components/product-list.tsx
index d5a41aeb8..48f7340b8 100644
--- a/examples/app-router-playground/app/private-cache/_components/product-list.tsx
+++ b/examples/app-router-playground/app/private-cache/_components/product-list.tsx
@@ -2,7 +2,6 @@ import db from '#/lib/db';
 import { Boundary } from '#/ui/boundary';
 import { ProductCard } from '#/ui/product-card';
 import { cacheTag } from 'next/cache';
-import Link from 'next/link';
 import SessionButton from './session-button';
 import ProductLink from './product-link';
 
@@ -69,9 +68,9 @@ export function ProductListSkeleton() {
           Available Products
         </h1>
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-          {[1, 2, 3, 4, 5, 6].map((i) => (
+          {[1, 2, 3, 4, 5, 6].map((slot) => (
             <div
-              key={i}
+              key={`product-skeleton-${slot}`}
               className="h-48 animate-pulse rounded-lg bg-gray-800"
             />
           ))}
diff --git a/examples/app-router-playground/app/private-cache/_components/recommendations.tsx b/examples/app-router-playground/app/private-cache/_components/recommendations.tsx
index f8c9d6f6d..76e8a165f 100644
--- a/examples/app-router-playground/app/private-cache/_components/recommendations.tsx
+++ b/examples/app-router-playground/app/private-cache/_components/recommendations.tsx
@@ -33,9 +33,9 @@ export function RecommendationsSkeleton() {
       <div className="flex flex-col gap-4">
         <h2 className="text-lg font-semibold text-gray-300">Recommendations</h2>
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-          {[1, 2, 3].map((i) => (
+          {[1, 2, 3].map((slot) => (
             <div
-              key={i}
+              key={`recommendation-skeleton-${slot}`}
               className="h-48 animate-pulse rounded-lg bg-gray-800"
             />
           ))}
diff --git a/examples/app-router-playground/app/private-cache/product/[id]/loading.tsx b/examples/app-router-playground/app/private-cache/product/[id]/loading.tsx
index 052a4f490..449627025 100644
--- a/examples/app-router-playground/app/private-cache/product/[id]/loading.tsx
+++ b/examples/app-router-playground/app/private-cache/product/[id]/loading.tsx
@@ -34,9 +34,9 @@ export default function Loading() {
               Recommendations
             </h2>
             <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-              {[1, 2, 3].map((i) => (
+              {[1, 2, 3].map((slot) => (
                 <div
-                  key={i}
+                  key={`recommendation-skeleton-${slot}`}
                   className="h-48 animate-pulse rounded-lg bg-gray-800"
                 />
               ))}
diff --git a/examples/app-router-playground/app/private-cache/product/[id]/with-private/page.tsx b/examples/app-router-playground/app/private-cache/product/[id]/with-private/page.tsx
index 6e9cbfb9c..b1d5423ca 100644
--- a/examples/app-router-playground/app/private-cache/product/[id]/with-private/page.tsx
+++ b/examples/app-router-playground/app/private-cache/product/[id]/with-private/page.tsx
@@ -104,9 +104,9 @@ function RecommendationsSkeleton() {
       <div className="flex flex-col gap-4">
         <h2 className="text-lg font-semibold text-gray-300">Recommendations</h2>
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-          {[1, 2, 3].map((i) => (
+          {[1, 2, 3].map((slot) => (
             <div
-              key={i}
+              key={`recommendation-skeleton-${slot}`}
               className="h-48 animate-pulse rounded-lg bg-gray-800"
             />
           ))}
diff --git a/examples/app-router-playground/app/private-cache/product/[id]/without-private/page.tsx b/examples/app-router-playground/app/private-cache/product/[id]/without-private/page.tsx
index 4443a16af..d66fad20d 100644
--- a/examples/app-router-playground/app/private-cache/product/[id]/without-private/page.tsx
+++ b/examples/app-router-playground/app/private-cache/product/[id]/without-private/page.tsx
@@ -88,9 +88,9 @@ function RecommendationsSkeleton() {
       <div className="flex flex-col gap-4">
         <h2 className="text-lg font-semibold text-gray-300">Recommendations</h2>
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-          {[1, 2, 3].map((i) => (
+          {[1, 2, 3].map((slot) => (
             <div
-              key={i}
+              key={`recommendation-skeleton-${slot}`}
               className="h-48 animate-pulse rounded-lg bg-gray-800"
             />
           ))}
diff --git a/examples/app-router-playground/app/use-link-status/[section]/[category]/page.tsx b/examples/app-router-playground/app/use-link-status/[section]/[category]/page.tsx
index a0efe31d6..6567b4f53 100644
--- a/examples/app-router-playground/app/use-link-status/[section]/[category]/page.tsx
+++ b/examples/app-router-playground/app/use-link-status/[section]/[category]/page.tsx
@@ -12,12 +12,13 @@ export default async function Page({
   // DEMO:
   // This page would normally be prerendered at build time because it doesn't use dynamic APIs.
   // That means the loading state wouldn't show. To force one:
-  // 1. We indicate that we require a user Request before continuing:
-  await connection();
-  // 2. Add an artificial delay to make the loading state more noticeable:
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-
-  const { category: categorySlug } = await params;
+  // 1. We indicate that we require a user Request before continuing.
+  // 2. Add an artificial delay to make the loading state more noticeable.
+  const [{ category: categorySlug }] = await Promise.all([
+    params,
+    connection(),
+    new Promise((resolve) => setTimeout(resolve, 1000)),
+  ]);
   const category = db.category.find({ where: { slug: categorySlug } });
   if (!category) {
     notFound();
diff --git a/examples/app-router-playground/ui/click-counter.tsx b/examples/app-router-playground/ui/click-counter.tsx
index dbf3f79ba..97afd62b1 100644
--- a/examples/app-router-playground/ui/click-counter.tsx
+++ b/examples/app-router-playground/ui/click-counter.tsx
@@ -7,7 +7,7 @@ export function ClickCounter() {
 
   return (
     <button
-      onClick={() => setCount(count + 1)}
+      onClick={() => setCount((prev) => prev + 1)}
       className="rounded-md bg-gray-700 px-3 py-1 text-sm font-semibold whitespace-nowrap text-gray-100 tabular-nums hover:bg-gray-500 hover:text-white"
     >
       {count} Clicks
diff --git a/examples/app-router-playground/ui/codehike.tsx b/examples/app-router-playground/ui/codehike.tsx
index 63411ac63..2240766a7 100644
--- a/examples/app-router-playground/ui/codehike.tsx
+++ b/examples/app-router-playground/ui/codehike.tsx
@@ -12,20 +12,42 @@ import {
 } from 'codehike/code';
 import { MDXProps } from 'mdx/types';
 import Image from 'next/image';
-import { JSX } from 'react';
+import { type ComponentType, JSX } from 'react';
 import { z } from 'zod';
 
 const Schema = Block.extend({ col: z.array(Block) });
+const EMPTY_COMPONENTS: Record<string, ComponentType<any>> = {};
+
+function getGridColumnKey(col: { children?: unknown }) {
+  const children = Array.isArray(col.children)
+    ? col.children
+    : col.children === undefined
+      ? []
+      : [col.children];
+
+  const childKeys = children
+    .map((child) => {
+      if (typeof child === 'object' && child !== null && 'key' in child) {
+        const childKey = (child as { key: string | null }).key;
+        return childKey ? String(childKey) : '';
+      }
+
+      return '';
+    })
+    .filter(Boolean);
+
+  return childKeys.join('|') || `column-${children.length}`;
+}
 
 export function Grid(props: unknown) {
   const data = parseProps(props, Schema);
 
   return (
     <div className="my-5 grid grid-cols-1 gap-6 lg:grid-cols-2 [&:first-child]:mt-0 [&:last-child]:mb-0">
-      {data.col.map((col, index) => (
+      {data.col.map((col) => (
         <div
           className="[&>:first-child]:mt-0 [&>:last-child]:mb-0"
-          key={index}
+          key={getGridColumnKey(col)}
         >
           {col.children}
         </div>
@@ -94,7 +116,7 @@ const mark: AnnotationHandler = {
 async function MyCode({ codeblock }: { codeblock: RawCode }) {
   'use cache';
   const highlighted = await highlight(codeblock, 'github-dark');
-  const { background, ...style } = highlighted.style;
+  const { background: _background, ...style } = highlighted.style;
   return (
     <Boundary
       label={highlighted.meta}
@@ -124,23 +146,28 @@ async function MyInlineCode({ codeblock }: { codeblock: RawCode }) {
 
 export function Mdx({
   source: MdxComponent,
-  components = {},
+  components,
   collapsed,
   className,
   ...props
 }: {
   source: (props: MDXProps) => JSX.Element;
-  components?: Record<string, React.ComponentType<any>>;
+  components?: Record<string, ComponentType<any>>;
   collapsed?: boolean;
   className?: string;
 }) {
+  const resolvedComponents = components ?? EMPTY_COMPONENTS;
+
   return (
     <Prose
       collapsed={collapsed}
-      className="prose prose-sm prose-invert prose-h1:font-medium prose-h2:font-medium prose-h3:font-medium prose-h4:font-medium prose-h5:font-medium prose-h6:font-medium prose-pre:mt-0 prose-pre:mb-0 prose-pre:rounded-none prose-pre:bg-transparent max-w-none"
+      className={clsx(
+        'prose prose-sm prose-invert prose-h1:font-medium prose-h2:font-medium prose-h3:font-medium prose-h4:font-medium prose-h5:font-medium prose-h6:font-medium prose-pre:mt-0 prose-pre:mb-0 prose-pre:rounded-none prose-pre:bg-transparent max-w-none',
+        className,
+      )}
     >
       <MdxComponent
-        components={{ MyCode, MyInlineCode, Image, ...components }}
+        components={{ MyCode, MyInlineCode, Image, ...resolvedComponents }}
         {...props}
       />
     </Prose>
diff --git a/examples/app-router-playground/ui/skeleton.tsx b/examples/app-router-playground/ui/skeleton.tsx
index 341a5cc8d..484e3bf80 100644
--- a/examples/app-router-playground/ui/skeleton.tsx
+++ b/examples/app-router-playground/ui/skeleton.tsx
@@ -15,19 +15,24 @@ export function SkeletonText({
 }) {
   const words = Array.from({ length: count }, (_, i) => {
     const seed = _seed + count + i;
+    const width =
+      Math.floor(random(seed) * (maxLength - minLength + 1)) + minLength;
 
-    return Math.floor(random(seed) * (maxLength - minLength + 1)) + minLength;
+    return {
+      key: `skeleton-word-${seed}`,
+      width,
+    };
   });
 
   return (
     <div
       className={clsx('flex flex-wrap gap-x-[1ch] gap-y-[0.65em]', className)}
     >
-      {words.map((width, i) => (
+      {words.map((word) => (
         <div
-          key={i}
+          key={word.key}
           className="h-[0.6em] rounded-full bg-current"
-          style={{ width: `${width}ch` }}
+          style={{ width: `${word.width}ch` }}
         />
       ))}
     </div>
diff --git a/examples/app-router-playground/vite.config.ts b/examples/app-router-playground/vite.config.ts
index 44738fcae..83a2e8873 100644
--- a/examples/app-router-playground/vite.config.ts
+++ b/examples/app-router-playground/vite.config.ts
@@ -83,6 +83,29 @@ export default defineConfig({
         childEnvironments: ["ssr"],
       },
     }),
+
+    // Vite 8 (rolldown) warns on rollup-only keys injected by vinext.
+    // Strip those keys from the resolved client build config.
+    {
+      name: "strip-rolldown-incompatible-rollup-options",
+      configResolved(config) {
+        const clientRollupOptions = (config as any).environments?.client?.build?.rollupOptions;
+        if (!clientRollupOptions) return;
+
+        if (
+          clientRollupOptions.treeshake &&
+          typeof clientRollupOptions.treeshake === "object" &&
+          !Array.isArray(clientRollupOptions.treeshake)
+        ) {
+          delete clientRollupOptions.treeshake.preset;
+        }
+
+        const output = clientRollupOptions.output;
+        if (output && typeof output === "object" && !Array.isArray(output)) {
+          delete output.experimentalMinChunkSize;
+        }
+      },
+    },
   ],
 
   resolve: {
diff --git a/examples/app-router-playground/worker/index.ts b/examples/app-router-playground/worker/index.ts
index de478b108..c2d105c22 100644
--- a/examples/app-router-playground/worker/index.ts
+++ b/examples/app-router-playground/worker/index.ts
@@ -7,6 +7,10 @@
 import { handleImageOptimization } from "vinext/server/image-optimization";
 import handler from "vinext/server/app-router-entry";
 
+interface Fetcher {
+  fetch(request: Request): Promise<Response>;
+}
+
 interface Env {
   ASSETS: Fetcher;
   IMAGES: {