Merge remote-tracking branch 'upstream/canary' into add-options-to-hr…

…ef-change

examples/with-firebase-authentication/package.json

@@ -10,8 +10,8 @@
     "body-parser": "^1.17.1",
     "express": "^4.14.0",
     "express-session": "^1.15.2",
-    "firebase": "^5.6.0",
-    "firebase-admin": "^5.8.2",
+    "firebase": "^7.6.2",
+    "firebase-admin": "^8.9.0",
     "isomorphic-unfetch": "2.0.0",
     "next": "latest",
     "react": "^16.7.0",

examples/with-firebase-cloud-messaging/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "express": "^4.14.0",
-    "firebase": "^5.5.8",
+    "firebase": "^7.6.2",
     "localforage": "^1.7.3",
     "next": "latest",
     "react": "^16.7.0",

examples/with-firebase-hosting-and-docker/package.json

@@ -26,7 +26,7 @@
     "compression": "^1.7.3",
     "cors": "^2.8.4",
     "express": "^4.16.3",
-    "firebase-admin": "6.0.0",
+    "firebase-admin": "8.9.0",
     "firebase-functions": "^2.0.5",
     "helmet": "^3.13.0",
     "next": "latest",

examples/with-firebase-hosting-and-typescript/package.json

@@ -21,7 +21,7 @@
     "install-deps": "cd \"dist/functions\" && npm i"
   },
   "dependencies": {
-    "firebase-admin": "^8.0.0",
+    "firebase-admin": "^8.9.0",
     "firebase-functions": "^3.1.0",
     "next": "latest",
     "react": "16.8.6",

examples/with-firebase-hosting/package.json

@@ -19,7 +19,7 @@
     "install-deps": "cd \"dist/functions\" && npm i"
   },
   "dependencies": {
-    "firebase-admin": "^8.2.0",
+    "firebase-admin": "^8.9.0",
     "firebase-functions": "^2.1.0",
     "grpc": "^1.22.2",
     "next": "latest",

examples/with-sitemap-and-robots-express-server/README.md

@@ -22,7 +22,7 @@ yarn create next-app --example with-sitemap-and-robots-express-server with-sitem
 Download the example:
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-sitemap-and-robots-expres-server
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-sitemap-and-robots-express-server
 cd with-sitemap-and-robots-express-server
 ```
 

examples/with-tailwindcss/package.json

@@ -7,15 +7,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.1.8-canary.11",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "next": "^9.2.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.3.0",
-    "autoprefixer": "^9.6.5",
-    "cssnano": "^4.1.0",
-    "postcss-easy-import": "^3.0.0",
-    "tailwindcss": "^1.0.1"
+    "autoprefixer": "^9.7.4",
+    "postcss-import": "^12.0.1",
+    "tailwindcss": "^1.1.4"
   }
 }

examples/with-tailwindcss/pages/index.js

@@ -4,7 +4,7 @@ export default () => (
   <div>
     <Nav />
     <div className="hero">
-      <h1 className="title">Next.js + Tailwind css</h1>
+      <h1 className="title">Next.js + Tailwind CSS</h1>
     </div>
   </div>
 )

examples/with-tailwindcss/postcss.config.js

@@ -9,8 +9,7 @@ module.exports = {
               './pages/**/*.{js,jsx,ts,tsx}',
               './components/**/*.{js,jsx,ts,tsx}',
             ],
-            defaultExtractor: content =>
-              content.match(/[A-Za-z0-9-_:/]+/g) || [],
+            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
           },
         ]
       : undefined,

examples/with-tailwindcss/styles/index.css

@@ -2,8 +2,8 @@
 
 /* purgecss start ignore */
 @tailwind base;
-/* purgecss end ignore */
 @tailwind components;
+/* purgecss end ignore */
 @tailwind utilities;
 
 .hero {

lerna.json

@@ -12,5 +12,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.2.0"
+  "version": "9.2.1-canary.2"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.2.0",
+  "version": "9.2.1-canary.2",
   "keywords": [
     "react",
     "next",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "9.2.0",
+  "version": "9.2.1-canary.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.2.0",
+  "version": "9.2.1-canary.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.2.0",
+  "version": "9.2.1-canary.2",
   "nextjs": {
     "name": "Google Analytics",
     "required-env": [

packages/next-plugin-material-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-material-ui",
-  "version": "9.2.0",
+  "version": "9.2.1-canary.2",
   "nextjs": {
     "name": "Material UI",
     "required-env": []

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.2.0",
+  "version": "9.2.1-canary.2",
   "nextjs": {
     "name": "Sentry",
     "required-env": [

packages/next/build/entries.ts

@@ -115,10 +115,19 @@ export function createEntrypoints(
     }
 
     if (!isApiRoute) {
-      client[bundlePath] = `next-client-pages-loader?${stringify({
+      const pageLoader = `next-client-pages-loader?${stringify({
         page,
         absolutePagePath,
       })}!`
+
+      // Make sure next/router is a dependency of _app or else granularChunks
+      // might cause the router to not be able to load causing hydration
+      // to fail
+
+      client[bundlePath] =
+        page === '/_app'
+          ? [pageLoader, require.resolve('../client/router')]
+          : pageLoader
     }
   })
 

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

@@ -666,7 +666,7 @@ export default class Router implements BaseRouter {
 
   _getStaticData = (asPath: string, _cachedData?: object): Promise<object> => {
     let pathname = parse(asPath).pathname
-    pathname = !pathname || pathname === '/' ? '/index' : pathname
+    pathname = toRoute(!pathname || pathname === '/' ? '/index' : pathname)
 
     return process.env.NODE_ENV === 'production' &&
       (_cachedData = this.sdc[pathname])

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "9.2.0",
+  "version": "9.2.1-canary.2",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",

packages/next/pages/_app.tsx

@@ -7,7 +7,6 @@ import {
   AppPropsType,
 } from '../next-server/lib/utils'
 import { Router } from '../client/router'
-import '../client/router'
 
 export { AppInitialProps }
 

packages/next/pages/_document.tsx

@@ -570,7 +570,7 @@ export class NextScript extends Component<OriginProps> {
 
       return (
         <script
-          defer
+          async
           key={bundle.file}
           src={`${assetPrefix}/_next/${encodeURI(
             bundle.file
@@ -611,7 +611,7 @@ export class NextScript extends Component<OriginProps> {
             file
           )}${_devOnlyInvalidateCacheQueryString}`}
           nonce={this.props.nonce}
-          defer
+          async
           crossOrigin={this.props.crossOrigin || process.crossOrigin}
           {...modernProps}
         />
@@ -720,7 +720,7 @@ export class NextScript extends Component<OriginProps> {
 
     const pageScript = [
       <script
-        defer
+        async
         data-next-page={page}
         key={page}
         src={
@@ -734,7 +734,7 @@ export class NextScript extends Component<OriginProps> {
       />,
       process.env.__NEXT_MODERN_BUILD && (
         <script
-          defer
+          async
           data-next-page={page}
           key={`${page}-modern`}
           src={
@@ -753,7 +753,7 @@ export class NextScript extends Component<OriginProps> {
 
     const appScript = [
       <script
-        defer
+        async
         data-next-page="/_app"
         src={
           assetPrefix +
@@ -767,7 +767,7 @@ export class NextScript extends Component<OriginProps> {
       />,
       process.env.__NEXT_MODERN_BUILD && (
         <script
-          defer
+          async
           data-next-page="/_app"
           src={
             assetPrefix +

test/integration/hydration/pages/_app.js

@@ -0,0 +1 @@
+export default ({ Component, pageProps }) => <Component {...pageProps} />

test/integration/hydration/pages/_document.js

@@ -0,0 +1,16 @@
+import Document, { Head, Html, Main, NextScript } from 'next/document'
+import React from 'react'
+
+class WeddingDocument extends Document {
+  render() {
+    return (
+      <Html lang="en-GB">
+        <Head />
+        <Main />
+        <NextScript />
+      </Html>
+    )
+  }
+}
+
+export default WeddingDocument

test/integration/hydration/pages/details.js

@@ -0,0 +1,6 @@
+export default () => {
+  if (typeof window !== 'undefined') {
+    window.didHydrate = true
+  }
+  return 'details'
+}

test/integration/hydration/pages/index.js

@@ -0,0 +1,6 @@
+export default () => {
+  if (typeof window !== 'undefined') {
+    window.didHydrate = true
+  }
+  return 'index'
+}

test/integration/hydration/test/index.test.js

@@ -0,0 +1,33 @@
+/* eslint-env jest */
+/* global jasmine */
+import path from 'path'
+import fs from 'fs-extra'
+import webdriver from 'next-webdriver'
+import {
+  nextBuild,
+  nextStart,
+  findPort,
+  waitFor,
+  killApp,
+} from 'next-test-utils'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 1
+const appDir = path.join(__dirname, '..')
+let app
+let appPort
+
+describe('Hydration', () => {
+  beforeAll(async () => {
+    await fs.remove(path.join(appDir, '.next'))
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+
+  it('Hydrates correctly', async () => {
+    const browser = await webdriver(appPort, '/')
+    await waitFor(2000)
+    expect(await browser.eval('window.didHydrate')).toBe(true)
+  })
+})

test/integration/prerender/pages/index.js

@@ -14,7 +14,7 @@ const Page = ({ world, time }) => {
     <>
       <p>hello {world}</p>
       <span>time: {time}</span>
-      <Link href="/another">
+      <Link href="/another?hello=world" as="/another/?hello=world">
         <a id="another">to another</a>
       </Link>
       <br />

test/integration/prerender/test/index.test.js

@@ -134,9 +134,11 @@ const navigateTest = (dev = false) => {
 
     // go to /another
     async function goFromHomeToAnother() {
+      await browser.eval('window.beforeAnother = true')
       await browser.elementByCss('#another').click()
       await browser.waitForElementByCss('#home')
       text = await browser.elementByCss('p').text()
+      expect(await browser.eval('window.beforeAnother')).toBe(true)
       expect(text).toMatch(/hello.*?world/)
     }
     await goFromHomeToAnother()

test/integration/production/test/index.test.js

@@ -678,21 +678,21 @@ describe('Production Usage', () => {
     }
   })
 
-  it('should have defer on all script tags', async () => {
+  it('should have async on all script tags', async () => {
     const html = await renderViaHTTP(appPort, '/')
     const $ = cheerio.load(html)
     let missing = false
 
     for (const script of $('script').toArray()) {
-      // application/json doesn't need defer
+      // application/json doesn't need async
       if (
         script.attribs.type === 'application/json' ||
         script.attribs.src.includes('polyfills')
       ) {
         continue
       }
 
-      if (script.attribs.async === '' || script.attribs.defer !== '') {
+      if (script.attribs.defer === '' || script.attribs.async !== '') {
         missing = true
       }
     }