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/back-forward-cache/app/layout.tsx
+++ b/test/e2e/app-dir/back-forward-cache/app/layout.tsx
@@ -0,0 +1,29 @@
+import Link from 'next/link'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const links = []
+  for (let n = 1; n <= 5; n++) {
+    links.push(
+      <li key={n}>
+        <Link href={`/page/${n}`}>Page {n}</Link>
+      </li>
+    )
+    links.push(
+      <li key={n + '-with-search-param'}>
+        <Link href={`/page/${n}?param=true`}>Page {n} (with search param)</Link>
+      </li>
+    )
+  }
+  return (
+    <html lang="en">
+      <body>
+        <ul>{links}</ul>
+        <div>{children}</div>
+      </body>
+    </html>
+  )
+}
--- a/test/e2e/app-dir/back-forward-cache/app/page.tsx
+++ b/test/e2e/app-dir/back-forward-cache/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Hello</div>
+}
--- a/test/e2e/app-dir/back-forward-cache/app/page/[n]/page.tsx
+++ b/test/e2e/app-dir/back-forward-cache/app/page/[n]/page.tsx
@@ -0,0 +1,24 @@
+import { Suspense } from 'react'
+import { StatefulClientComponent } from './stateful-client-component'
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ n: string }>
+}) {
+  const { n } = await params
+  return (
+    <>
+      <h2>Page {n}</h2>
+      <div>
+        <Suspense fallback={<div>Loading...</div>}>
+          <StatefulClientComponent n={n} />
+        </Suspense>
+      </div>
+    </>
+  )
+}
+
+export function generateStaticParams() {
+  return [{ n: '1' }, { n: '2' }]
+}
--- a/test/e2e/app-dir/back-forward-cache/app/page/[n]/stateful-client-component.tsx
+++ b/test/e2e/app-dir/back-forward-cache/app/page/[n]/stateful-client-component.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+
+export function StatefulClientComponent({ n }: { n: string }) {
+  const [count, setCount] = useState(0)
+  const searchParams = useSearchParams()
+  return (
+    <div>
+      <div>
+        <button
+          id={'increment-button-' + n}
+          onClick={() => setCount(count + 1)}
+        >
+          Increment
+        </button>
+        <span id={'counter-display-' + n}>Count: {count}</span>
+      </div>
+      <div>
+        <input id={'uncontrolled-input-' + n} type="text" />
+      </div>
+      <div id={'has-search-param-' + n}>
+        Has search param: {searchParams.get('param') ? 'yes' : 'no'}
+      </div>
+    </div>
+  )
+}
--- a/test/e2e/app-dir/back-forward-cache/back-forward-cache.test.ts
+++ b/test/e2e/app-dir/back-forward-cache/back-forward-cache.test.ts
@@ -0,0 +1,270 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+
+describe('back/forward cache', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('React state is preserved when navigating with back/forward buttons', async () => {
+    const browser = await next.browser('/page/1')
+
+    // Accumulate some state on page 1.
+    await retry(async () => {
+      // we do this inside of retry in case button event handler
+      // isn't ready yet
+      await browser.elementById('increment-button-1').click()
+
+      const counterDisplay1 = await browser.elementById('counter-display-1')
+      expect(await counterDisplay1.text()).toBe('Count: 1')
+    })
+    await browser.elementById('increment-button-1').click()
+
+    const counterDisplay1 = await browser.elementById('counter-display-1')
+    expect(await counterDisplay1.text()).toBe('Count: 2')
+
+    // Navigate to page 2. Accumulate some state here, too.
+    const linkToPage2 = await browser.elementByCss('a[href="/page/2"]')
+    await linkToPage2.click()
+    const incrementButton2 = await browser.elementById('increment-button-2')
+    const counterDisplay2 = await browser.elementById('counter-display-2')
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    expect(await counterDisplay2.text()).toBe('Count: 9')
+
+    // Navigate back to page 1. Its state should be preserved.
+    await browser.back()
+    const counterDisplay1AfterNav =
+      await browser.elementById('counter-display-1')
+    expect(await counterDisplay1AfterNav.text()).toBe('Count: 2')
+
+    // Navigate forward to page 2. Its state should be preserved.
+    await browser.forward()
+    const counterDisplay2AfterNav =
+      await browser.elementById('counter-display-2')
+    expect(await counterDisplay2AfterNav.text()).toBe('Count: 9')
+  })
+
+  it('React state is preserved when navigating back/forward with links', async () => {
+    const browser = await next.browser('/page/1')
+
+    // Accumulate some state on page 1.
+    // Accumulate some state on page 1.
+    await retry(async () => {
+      // we do this inside of retry in case button event handler
+      // isn't ready yet
+      await browser.elementById('increment-button-1').click()
+
+      const counterDisplay1 = await browser.elementById('counter-display-1')
+      expect(await counterDisplay1.text()).toBe('Count: 1')
+    })
+    await browser.elementById('increment-button-1').click()
+
+    const counterDisplay1 = await browser.elementById('counter-display-1')
+    expect(await counterDisplay1.text()).toBe('Count: 2')
+
+    // Navigate to page 2. Accumulate some state here, too.
+    const linkToPage2 = await browser.elementByCss('a[href="/page/2"]')
+    await linkToPage2.click()
+    const incrementButton2 = await browser.elementById('increment-button-2')
+    const counterDisplay2 = await browser.elementById('counter-display-2')
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    expect(await counterDisplay2.text()).toBe('Count: 9')
+
+    // Navigate back to page 1. Its state should be preserved.
+    const linkToPage1 = await browser.elementByCss('a[href="/page/1"]')
+    await linkToPage1.click()
+    const counterDisplay1AfterNav =
+      await browser.elementById('counter-display-1')
+    expect(await counterDisplay1AfterNav.text()).toBe('Count: 2')
+
+    // Navigate back to page 2. Its state should be preserved.
+    await linkToPage2.click()
+    const counterDisplay2AfterNav =
+      await browser.elementById('counter-display-2')
+    expect(await counterDisplay2AfterNav.text()).toBe('Count: 9')
+  })
+
+  // FIXME: Flaky test: https://vercel.slack.com/archives/C07CJPHL49E/p1758009379720479
+  it.skip('React state is preserved when navigating back to a page with different search params than before ', async () => {
+    const browser = await next.browser('/page/1')
+
+    // Accumulate some state on page 1.
+    await retry(async () => {
+      // we do this inside of retry in case button event handler
+      // isn't ready yet
+      await browser.elementById('increment-button-1').click()
+
+      const counterDisplay1 = await browser.elementById('counter-display-1')
+      expect(await counterDisplay1.text()).toBe('Count: 1')
+    })
+    await browser.elementById('increment-button-1').click()
+
+    const counterDisplay1 = await browser.elementById('counter-display-1')
+    expect(await counterDisplay1.text()).toBe('Count: 2')
+
+    // Navigate to page 2.
+    const linkToPage2 = await browser.elementByCss('a[href="/page/2"]')
+    await linkToPage2.click()
+
+    // Navigate back to page 1, but with a different search param.
+    const linkToPage1WithSearchParam = await browser.elementByCss(
+      'a[href="/page/1?param=true"]'
+    )
+    await linkToPage1WithSearchParam.click()
+
+    await retry(async () => {
+      const counterDisplay1AfterNav =
+        await browser.elementById('counter-display-1')
+      const hasSearchParam = await browser.elementById('has-search-param-1')
+      expect(await counterDisplay1AfterNav.text()).toBe('Count: 2')
+      expect(await hasSearchParam.text()).toBe('Has search param: yes')
+    })
+  })
+
+  it('bfcache only preserves up to N entries', async () => {
+    // The current limit is hardcoded to 3.
+    const browser = await next.browser('/page/1')
+    await retry(async () => {
+      expect(await browser.elementByCss('h2').text()).toEqual('Page 1')
+    })
+
+    // Accumulate some state on page 1.
+    await retry(async () => {
+      // we do this inside of retry in case button event handler
+      // isn't ready yet
+      await browser.elementById('increment-button-1').click()
+
+      const counterDisplay1 = await browser.elementById('counter-display-1')
+      expect(await counterDisplay1.text()).toBe('Count: 1')
+    })
+    await browser.elementById('increment-button-1').click()
+
+    const counterDisplay1 = await browser.elementById('counter-display-1')
+    expect(await counterDisplay1.text()).toBe('Count: 2')
+
+    // Navigate to page 2. Accumulate some state here, too.
+    const linkToPage2 = await browser.elementByCss('a[href="/page/2"]')
+    await linkToPage2.click()
+    await retry(async () => {
+      expect(await browser.elementByCss('h2').text()).toEqual('Page 2')
+    })
+
+    const incrementButton2 = await browser.elementById('increment-button-2')
+    const counterDisplay2 = await browser.elementById('counter-display-2')
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    expect(await counterDisplay2.text()).toBe('Count: 9')
+
+    // Navigate to 2 additional pages.
+    const linkToPage3 = await browser.elementByCss('a[href="/page/3"]')
+    await linkToPage3.click()
+    await retry(async () => {
+      expect(await browser.elementByCss('h2').text()).toEqual('Page 3')
+    })
+    const linkToPage4 = await browser.elementByCss('a[href="/page/4"]')
+    await linkToPage4.click()
+    await retry(async () => {
+      expect(await browser.elementByCss('h2').text()).toEqual('Page 4')
+    })
+
+    // The bfcache size is now 4. Because the limit is 3, page 1 should have
+    // been evicted, but not page 2.
+
+    // Navigate to page 2 to confirm its state is preserved.
+    await linkToPage2.click()
+    await retry(async () => {
+      expect(await browser.elementByCss('h2').text()).toEqual('Page 2')
+    })
+    const counterDisplay2AfterNav =
+      await browser.elementById('counter-display-2')
+    expect(await counterDisplay2AfterNav.text()).toBe('Count: 9')
+
+    // Navigate back to page 1 to confirm its state is not preserved.
+    const linkToPage1 = await browser.elementByCss('a[href="/page/1"]')
+    await linkToPage1.click()
+    await retry(async () => {
+      expect(await browser.elementByCss('h2').text()).toEqual('Page 1')
+    })
+
+    const counterDisplay1AfterNav =
+      await browser.elementById('counter-display-1')
+    expect(await counterDisplay1AfterNav.text()).toBe('Count: 0')
+  })
+
+  it('navigate back and forth repeatedly between the same pages without evicting', async () => {
+    // The current limit is hardcoded to 3.
+    const browser = await next.browser('/page/1')
+
+    // Accumulate some state on page 1.
+    await retry(async () => {
+      // we do this inside of retry in case button event handler
+      // isn't ready yet
+      await browser.elementById('increment-button-1').click()
+
+      const counterDisplay1 = await browser.elementById('counter-display-1')
+      expect(await counterDisplay1.text()).toBe('Count: 1')
+    })
+    await browser.elementById('increment-button-1').click()
+
+    const counterDisplay1 = await browser.elementById('counter-display-1')
+    expect(await counterDisplay1.text()).toBe('Count: 2')
+
+    // Navigate to page 2. Accumulate some state here, too.
+    const linkToPage2 = await browser.elementByCss('a[href="/page/2"]')
+    await linkToPage2.click()
+    const incrementButton2 = await browser.elementById('increment-button-2')
+    const counterDisplay2 = await browser.elementById('counter-display-2')
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    await incrementButton2.click()
+    expect(await counterDisplay2.text()).toBe('Count: 9')
+
+    // Navigate between pages 1 and 2 repeatedly
+    const linkToPage1 = await browser.elementByCss('a[href="/page/1"]')
+    await linkToPage1.click()
+    await linkToPage2.click()
+    await linkToPage1.click()
+    await linkToPage2.click()
+    await linkToPage1.click()
+    await linkToPage2.click()
+
+    // Confirm the state is preserved on both pages.
+    const counterDisplay2AfterNav =
+      await browser.elementById('counter-display-2')
+    expect(await counterDisplay2AfterNav.text()).toBe('Count: 9')
+
+    await linkToPage1.click()
+    const counterDisplay1AfterNav =
+      await browser.elementById('counter-display-1')
+    expect(await counterDisplay1AfterNav.text()).toBe('Count: 2')
+  })
+})
--- a/test/e2e/app-dir/back-forward-cache/next.config.js
+++ b/test/e2e/app-dir/back-forward-cache/next.config.js
@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  cacheComponents: true,
+}
+
+module.exports = nextConfig