fix: Dynamic Usage Error when using previewData with generateStaticPa…

…rams and appDir
vercel · Nov 25, 2022 · ce52d11 · ce52d11
1 parent c4b6bb8
commit ce52d11
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 6 deletions.
diff --git a/packages/next/client/components/headers.ts b/packages/next/client/components/headers.ts
@@ -16,10 +16,6 @@ export function headers() {
 }
 
 export function previewData() {
-  if (staticGenerationBailout('previewData')) {
-    return {}
-  }
-
   const requestStore =
     requestAsyncStorage && 'getStore' in requestAsyncStorage
       ? requestAsyncStorage.getStore()!

diff --git a/test/e2e/app-dir/app-preview-static.test.ts b/test/e2e/app-dir/app-preview-static.test.ts
@@ -0,0 +1,30 @@
+import { NextInstance } from 'test/lib/next-modes/base'
+import { createNext, FileRef } from 'e2e-utils'
+import path from 'path'
+import webdriver from 'next-webdriver'
+
+describe('app-dir previewData with SSG', () => {
+  if ((global as any).isNextDeploy) {
+    it('should skip next deploy for now', () => {})
+    return
+  }
+
+  let next: NextInstance
+
+  afterAll(() => next.destroy())
+  beforeAll(async () => {
+    next = await createNext({
+      files: new FileRef(path.join(__dirname, 'app-preview-static')),
+    })
+  })
+
+  it('Should not throw Dynamic Server Usage error when using generateStaticParams with previewData', async () => {
+    const browserOnIndexPage = await webdriver(next.url, '/')
+
+    const content = await browserOnIndexPage
+      .elementByCss('#preview-data')
+      .text()
+
+    expect(content).toContain('previewData')
+  })
+})
diff --git a/test/e2e/app-dir/app-preview-static/app/[[...route]]/page.js b/test/e2e/app-dir/app-preview-static/app/[[...route]]/page.js
@@ -0,0 +1,29 @@
+import { previewData } from 'next/headers'
+
+export default function Page() {
+  const previewDataResult = previewData()
+
+  return (
+    <main>
+      <pre id="preview-data">
+        {JSON.stringify({ previewData: previewDataResult })}
+      </pre>
+    </main>
+  )
+}
+
+export const generateStaticParams = async () => {
+  const paths = [
+    {
+      route: [''],
+    },
+    {
+      route: ['test'],
+    },
+    {
+      route: ['test-2'],
+    },
+  ]
+
+  return paths
+}
diff --git a/test/e2e/app-dir/app-static/app/layout.js → .../app-dir/app-preview-static/app/layout.js b/test/e2e/app-dir/app-static/app/layout.js → .../app-dir/app-preview-static/app/layout.js
@@ -1,9 +1,10 @@
-export default function Layout({ children }) {
+export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <head>
-        <title>my static blog</title>
+        <title>static with previewData</title>
       </head>
+
       <body>{children}</body>
     </html>
   )

diff --git a/test/e2e/app-dir/app-preview-static/next.config.js b/test/e2e/app-dir/app-preview-static/next.config.js
@@ -0,0 +1,7 @@
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+}
+
+module.exports = nextConfig