Fix Dynamic `next export` Page Hydration Mismatch (#9388)

* Fix `next export` Hydration Mismatch

* Lower timeout to 1 minute

packages/next/next-server/lib/router/router.ts

@@ -123,7 +123,7 @@ export default class Router implements BaseRouter {
     // until after mount to prevent hydration mismatch
     this.asPath =
       // @ts-ignore this is temporarily global (attached to window)
-      isDynamicRoute(pathname) && __NEXT_DATA__.nextExport ? pathname : as
+      isDynamicRoute(pathname) && __NEXT_DATA__.autoExport ? pathname : as
     this.sub = subscription
     this.clc = null
     this._wrapApp = wrapApp

test/integration/export-dynamic-pages/next.config.js

+module.exports = {
+  exportPathMap() {
+    return {
+      '/regression/jeff-is-cool': { page: '/regression/[slug]' },
+    }
+  },
+}

test/integration/export-dynamic-pages/pages/regression/[slug].js

+import { useRouter } from 'next/router'
+
+function Regression() {
+  const { asPath } = useRouter()
+  if (typeof window !== 'undefined') {
+    window.__AS_PATHS = [...new Set([...(window.__AS_PATHS || []), asPath])]
+  }
+  return <div id="asPath">{asPath}</div>
+}
+
+Regression.getInitialProps = () => ({})
+
+export default Regression

test/integration/export-dynamic-pages/test/index.test.js

+/* eslint-env jest */
+/* global jasmine */
+import { join } from 'path'
+import cheerio from 'cheerio'
+import webdriver from 'next-webdriver'
+import {
+  nextBuild,
+  nextExport,
+  startCleanStaticServer,
+  stopApp,
+  renderViaHTTP,
+  waitFor,
+} from 'next-test-utils'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60
+const appDir = join(__dirname, '../')
+const outdir = join(appDir, 'out')
+
+describe('Export Dyanmic Pages', () => {
+  let server
+  let port
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    await nextExport(appDir, { outdir })
+
+    server = await startCleanStaticServer(outdir)
+    port = server.address().port
+  })
+
+  afterAll(async () => {
+    await stopApp(server)
+  })
+
+  it('should of exported with correct asPath', async () => {
+    const html = await renderViaHTTP(port, '/regression/jeff-is-cool')
+    const $ = cheerio.load(html)
+    expect($('#asPath').text()).toBe('/regression/jeff-is-cool')
+  })
+
+  it('should hydrate with correct asPath', async () => {
+    expect.assertions(1)
+    const browser = await webdriver(port, '/regression/jeff-is-cool')
+    try {
+      await waitFor(3000)
+      expect(await browser.eval(`window.__AS_PATHS`)).toEqual([
+        '/regression/jeff-is-cool',
+      ])
+    } finally {
+      await browser.close()
+    }
+  })
+})

test/lib/next-test-utils.js

@@ -286,6 +286,15 @@ export async function startStaticServer(dir) {
   return server
 }
 
+export async function startCleanStaticServer(dir) {
+  const app = express()
+  const server = http.createServer(app)
+  app.use(express.static(dir, { extensions: ['html'] }))
+
+  await promiseCall(server, 'listen')
+  return server
+}
+
 export async function check(contentFn, regex) {
   let found = false
   const timeout = setTimeout(async () => {