first commit

2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
--- a/test/e2e/app-dir/segment-cache/client-params/app/[category]/[product]/page.tsx
+++ b/test/e2e/app-dir/segment-cache/client-params/app/[category]/[product]/page.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { Suspense, use } from 'react'
+
+function Content({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ product: string }>
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  const { product } = use(params)
+  const searchParamsDict = use(searchParams)
+
+  let query = null
+  if (Object.keys(searchParamsDict).length > 0) {
+    query = JSON.stringify(searchParamsDict)
+  }
+
+  return (
+    <>
+      <p id="product">Product: {product}</p>
+      <p id="query">Query: {query ? query : '(none)'}</p>
+    </>
+  )
+}
+
+export default function ProductPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ product: string }>
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  return (
+    <Suspense fallback="Loading...">
+      <Content params={params} searchParams={searchParams} />
+    </Suspense>
+  )
+}
--- a/test/e2e/app-dir/segment-cache/client-params/app/[category]/layout.tsx
+++ b/test/e2e/app-dir/segment-cache/client-params/app/[category]/layout.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { Suspense, use } from 'react'
+
+function Content({ params }: { params: Promise<{ category: string }> }) {
+  const { category } = use(params)
+  return <h1 id="category-header">Category: {category}</h1>
+}
+
+export default function CategoryLayout({
+  params,
+  children,
+}: {
+  params: Promise<{ category: string }>
+  children: React.ReactNode
+}) {
+  return (
+    <div>
+      <Suspense fallback="Loading...">
+        <Content params={params} />
+      </Suspense>
+      {children}
+    </div>
+  )
+}
--- a/test/e2e/app-dir/segment-cache/client-params/app/client-page-with-search-param/page.tsx
+++ b/test/e2e/app-dir/segment-cache/client-params/app/client-page-with-search-param/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { Suspense, use } from 'react'
+
+function Content({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  const searchParamsDict = use(searchParams)
+
+  let query = null
+  if (Object.keys(searchParamsDict).length > 0) {
+    query = JSON.stringify(searchParamsDict)
+  }
+
+  return (
+    <>
+      <p id="query">Query: {query ? query : '(none)'}</p>
+    </>
+  )
+}
+
+export default function ClientPageWithSearchParam({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}) {
+  return (
+    <Suspense fallback="Loading...">
+      <Content searchParams={searchParams} />
+    </Suspense>
+  )
+}
--- a/test/e2e/app-dir/segment-cache/client-params/app/layout.tsx
+++ b/test/e2e/app-dir/segment-cache/client-params/app/layout.tsx
@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
--- a/test/e2e/app-dir/segment-cache/client-params/app/page.tsx
+++ b/test/e2e/app-dir/segment-cache/client-params/app/page.tsx
@@ -0,0 +1,24 @@
+import { LinkAccordion } from '../components/link-accordion'
+
+export default function Page() {
+  return (
+    <>
+      <ul>
+        <li>
+          <LinkAccordion href="/clothing/1">/clothing/1</LinkAccordion>
+        </li>
+        <li>
+          <LinkAccordion href="/clothing/2">/clothing/2</LinkAccordion>
+        </li>
+        <li>
+          <LinkAccordion href="/shoes/3">/shoes/3</LinkAccordion>
+        </li>
+        <li>
+          <LinkAccordion href="/shoes/4?foo=bar">
+            /shoes/4?foo=bar
+          </LinkAccordion>
+        </li>
+      </ul>
+    </>
+  )
+}
--- a/test/e2e/app-dir/segment-cache/client-params/client-params.test.ts
+++ b/test/e2e/app-dir/segment-cache/client-params/client-params.test.ts
@@ -0,0 +1,45 @@
+import { nextTestSetup } from 'e2e-utils'
+import type * as Playwright from 'playwright'
+import { createRouterAct } from 'router-act'
+
+describe('client params', () => {
+  const { next, isNextDev } = nextTestSetup({
+    files: __dirname,
+  })
+  if (isNextDev) {
+    test('prefetching is disabled', () => {})
+    return
+  }
+
+  it('client segments that access dynamic params are fully statically prefetchable', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/', {
+      beforePageLoad(p: Playwright.Page) {
+        act = createRouterAct(p)
+      },
+    })
+
+    // Prefetch the page. Although this page access dynamic params, it only
+    // does so inside segments that are marked with "use cache". So we should
+    // be able to fully prefetch them, without invoking a dynamic server render.
+    const toggleLinkVisibility = await browser.elementByCss(
+      'input[data-link-accordion="/clothing/1"]'
+    )
+    await act(async () => {
+      await toggleLinkVisibility.click()
+    })
+
+    // Navigate to the fully prefetched page. There should be no
+    // additionalrequest.
+    const link = await browser.elementByCss('a[href="/clothing/1"]')
+    await act(async () => {
+      await link.click()
+    }, 'no-requests')
+
+    // Confirm the dynamic params were correctly rendered by the client.
+    const categoryHeader = await browser.elementById('category-header')
+    expect(await categoryHeader.text()).toBe('Category: clothing')
+    const product = await browser.elementById('product')
+    expect(await product.text()).toBe('Product: 1')
+  })
+})
--- a/test/e2e/app-dir/segment-cache/client-params/components/link-accordion.tsx
+++ b/test/e2e/app-dir/segment-cache/client-params/components/link-accordion.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import Link, { type LinkProps } from 'next/link'
+import { useState } from 'react'
+
+export function LinkAccordion({
+  href,
+  children,
+  prefetch,
+}: {
+  href: string
+  children: React.ReactNode
+  prefetch?: LinkProps['prefetch']
+}) {
+  const [isVisible, setIsVisible] = useState(false)
+  return (
+    <>
+      <input
+        type="checkbox"
+        checked={isVisible}
+        onChange={() => setIsVisible(!isVisible)}
+        data-link-accordion={href}
+      />
+      {isVisible ? (
+        <Link href={href} prefetch={prefetch}>
+          {children}
+        </Link>
+      ) : (
+        <>{children} (link is hidden)</>
+      )}
+    </>
+  )
+}
--- a/test/e2e/app-dir/segment-cache/client-params/next.config.js
+++ b/test/e2e/app-dir/segment-cache/client-params/next.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    cacheComponents: true,
+  },
+}
+
+module.exports = nextConfig