test(e2e): Add Next.js cache component nesting scenarios (#24704)

Add tests for 4 different nested cache component scenarios. Currently
all in a "failed" state as this is not yet implemented.

```
Legend
  T1, T2, T3   traces, one per request, in order
  ck:X         cache.key digest of entry X
  o--> put     span link (sentry.link.type: 'cache_origin'), target = the cache.put span
```

## 1. Cached layout in the middle
```
app/(cached-nesting)/cached-mid-layout/
  [id]/layout.tsx     'use cache' (hours), key <- awaited [id]
  [id]/page.tsx       dynamic (awaits headers)

Request 1 (fill)                        Request 2 (hit)
T1: GET /cached-mid-layout/[id]         T2: GET /cached-mid-layout/[id]
 |- cache.get  hit=false  ck:layout      |- cache.get  hit=true  ck:layout
 |- cache.put  ck:layout  <-----------------o cache_origin
 |- dynamic page render                  |- dynamic page render (no cache spans)
```

## 2. Dynamic Layouts, Cached Leaf

```
app/(cached-nesting)/dynamic-layouts/
  [id]/layout.tsx                       dynamic (awaits headers)
  [id]/layout-cached-leaf/page.tsx      page renders CachedLeaf ('use cache', hours)

Request 1 (fill)                        Request 2 (hit)
T1: GET /dynamic-layouts/[id]/...       T2: GET /dynamic-layouts/[id]/...
 |- cache.put  ck:leaf  <-------------------o cache.get  hit=true  ck:leaf
```

## 3. Mixed lifetimes: two cache links, but pointing to a different
origin

```
app/(cached-nesting)/mixed-lifetimes/
  [id]/layout.tsx     'use cache', expire: 2s   <- short-lived
  [id]/page.tsx       dynamic + LongLivedComponent ('use cache', hours)

T1 (fill both)          --sleep 3s-->   T2 (layout expired)        T3 (both hit)
 |- put ck:layout                        |- get hit=false ck:layout |- get hit=true ck:layout
 |- put ck:cmp                           |- put ck:layout  <------------o cache_origin
      ^                                  |- get hit=true  ck:cmp    |- get hit=true ck:cmp
      |                                                                  |
      +---------------------------------------------------------------o cache_origin
```

## 4. Shared layout across sibling routes: Origin trace is different
than serving (`/a` and `/b`)

```
app/(cached-nesting)/shared-layout/
  [id]/layout.tsx     'use cache' (hours) — ONE entry shared by a and b
  [id]/a/page.tsx     dynamic
  [id]/b/page.tsx     dynamic

Request 1: /shared-layout/<id>/a        Request 2: /shared-layout/<id>/b
T1: GET /shared-layout/[id]/a           T2: GET /shared-layout/[id]/b
 |- cache.put  ck:layout  <-----------------o cache.get  hit=true  ck:layout
```


Closes #24701

Author: s1gr1d

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/cached-mid-layout/[id]/layout.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { cacheLife } from 'next/cache';
+
+// The awaited param puts the request id into the cache key, so a fresh id is a guaranteed miss
+// and the entry cannot come from a build-time fill. `children` passes through as an uncached hole.
+export default async function CachedMidLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  'use cache';
+  cacheLife('hours');
+  const { id } = await params;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return (
+    <div data-testid="cached-mid-layout">
+      <p id="cached-layout-stamp">
+        {id}:{Date.now()}
+      </p>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/cached-mid-layout/[id]/page.tsx

@@ -0,0 +1,6 @@
+import { headers } from 'next/headers';
+
+export default async function Page() {
+  await headers();
+  return <p id="dynamic-leaf">Dynamic leaf: {Date.now()}</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/dynamic-layouts/[id]/layout-cached-leaf/page.tsx

@@ -0,0 +1,17 @@
+import { cacheLife } from 'next/cache';
+
+async function CachedLeaf({ id }: { id: string }) {
+  'use cache';
+  cacheLife('hours');
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return (
+    <p id="cached-leaf">
+      {id}:{Date.now()}
+    </p>
+  );
+}
+
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <CachedLeaf id={id} />;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/dynamic-layouts/[id]/layout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import { headers } from 'next/headers';
+
+export default async function DynamicLayout({ children }: { children: ReactNode }) {
+  await headers();
+  return <div data-testid="dynamic-layout">{children}</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/layout.tsx

@@ -0,0 +1,11 @@
+import { Suspense, type ReactNode } from 'react';
+
+// The Suspense boundary lets the nested layouts/pages below use request APIs (`headers()`,
+// runtime params) without tripping the Cache Components prerender guards.
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div data-testid="cached-nesting-group">
+      <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/mixed-lifetimes/[id]/layout.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { cacheLife } from 'next/cache';
+
+// Hard-expires after 2s while the page's cached component lives for hours, so one request can
+// refill the layout while hitting the component: two cached levels with different origin traces.
+export default async function ShortLivedLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  'use cache';
+  cacheLife({ revalidate: 1, expire: 2 });
+  const { id } = await params;
+  return (
+    <div data-testid="short-lived-layout">
+      <p id="layout-stamp">
+        {id}:{Date.now()}
+      </p>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/mixed-lifetimes/[id]/page.tsx

@@ -0,0 +1,19 @@
+import { headers } from 'next/headers';
+import { cacheLife } from 'next/cache';
+
+async function LongLivedComponent({ id }: { id: string }) {
+  'use cache';
+  cacheLife('hours');
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return (
+    <p id="component-stamp">
+      {id}:{Date.now()}
+    </p>
+  );
+}
+
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  await headers();
+  return <LongLivedComponent id={id} />;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/shared-layout/[id]/a/page.tsx

@@ -0,0 +1,6 @@
+import { headers } from 'next/headers';
+
+export default async function Page() {
+  await headers();
+  return <p id="route-a">Route a: {Date.now()}</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/shared-layout/[id]/b/page.tsx

@@ -0,0 +1,6 @@
+import { headers } from 'next/headers';
+
+export default async function Page() {
+  await headers();
+  return <p id="route-b">Route b: {Date.now()}</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/shared-layout/[id]/layout.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { cacheLife } from 'next/cache';
+
+// One cache entry (keyed by id) shared by the sibling routes `a` and `b` below.
+export default async function SharedLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  'use cache';
+  cacheLife('hours');
+  const { id } = await params;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return (
+    <div data-testid="shared-layout">
+      <p id="shared-layout-stamp">
+        {id}:{Date.now()}
+      </p>
+      {children}
+    </div>
+  );
+}