Merge branch 'examples/with-chakra-ui-typescript' of github.com:tomas…

…disk/next.js into examples/with-chakra-ui-typescript
vercel · Aug 27, 2020 · eeec8b6 · eeec8b6
2 parents 44562b3 + 599d229
commit eeec8b6
Show file tree

Hide file tree

Showing 32 changed files with 111 additions and 72 deletions.
diff --git a/docs/advanced-features/custom-app.md b/docs/advanced-features/custom-app.md
@@ -10,7 +10,7 @@ Next.js uses the `App` component to initialize pages. You can override it and co
 - Keeping state when navigating pages
 - Custom error handling using `componentDidCatch`
 - Inject additional data into pages
-- [Add global CSS](/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
+- [Add global CSS](/docs/basic-features/built-in-css-support.md#adding-a-global-stylesheet)
 
 To override the default `App`, create the file `./pages/_app.js` as shown below:
 
@@ -47,7 +47,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 ### TypeScript
 
-If you’re using TypeScript, take a look at [our TypeScript documentation](/docs/basic-features/typescript#custom-app).
+If you’re using TypeScript, take a look at [our TypeScript documentation](/docs/basic-features/typescript.md#custom-app).
 
 ## Related
 

diff --git a/docs/advanced-features/custom-document.md b/docs/advanced-features/custom-document.md
@@ -43,7 +43,7 @@ Custom attributes are allowed as props, like `lang`:
 <Html lang="en">
 ```
 
-The `<Head />` component used here is not the same one from [`next/head`](/docs/api-reference/next/head). The `<Head />` component used here should only be used for any `<head>` code that is common for all pages. For all other cases, such as `<title>` tags, we recommend using [`next/head`](/docs/api-reference/next/head) in your pages or components.
+The `<Head />` component used here is not the same one from [`next/head`](/docs/api-reference/next/head.md). The `<Head />` component used here should only be used for any `<head>` code that is common for all pages. For all other cases, such as `<title>` tags, we recommend using [`next/head`](/docs/api-reference/next/head.md) in your pages or components.
 
 The `ctx` object is equivalent to the one received in [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md#context-object), with one addition:
 

diff --git a/docs/advanced-features/customizing-postcss-config.md b/docs/advanced-features/customizing-postcss-config.md
@@ -13,7 +13,7 @@ description: Extend the PostCSS config and plugins added by Next.js with your ow
 
 ## Default Behavior
 
-Next.js compiles CSS for its [built-in CSS support](/docs/basic-features/built-in-css-support) using PostCSS.
+Next.js compiles CSS for its [built-in CSS support](/docs/basic-features/built-in-css-support.md) using PostCSS.
 
 Out of the box, with no configuration, Next.js compiles CSS with the following transformations:
 
@@ -51,7 +51,7 @@ You can use the [browserl.ist](https://browserl.ist/?q=%3E0.3%25%2C+not+ie+11%2C
 
 No configuration is needed to support CSS Modules. To enable CSS Modules for a file, rename the file to have the extension `.module.css`.
 
-You can learn more about [Next.js' CSS Module support here](/docs/basic-features/built-in-css-support).
+You can learn more about [Next.js' CSS Module support here](/docs/basic-features/built-in-css-support.md).
 
 ## Customizing Plugins
 

diff --git a/docs/advanced-features/debugging.md b/docs/advanced-features/debugging.md
@@ -20,7 +20,7 @@ First, start Next.js with the inspect flag:
 NODE_OPTIONS='--inspect' next dev
 ```
 
-If you're using `npm run dev` or `yarn dev` (See: [Getting Started](/docs/getting-started)) then you should update the `dev` script on your `package.json`:
+If you're using `npm run dev` or `yarn dev` (See: [Getting Started](/docs/getting-started.md)) then you should update the `dev` script on your `package.json`:
 
 ```json
 "dev": "NODE_OPTIONS='--inspect' next dev"

diff --git a/docs/api-reference/next.config.js/custom-webpack-config.md b/docs/api-reference/next.config.js/custom-webpack-config.md
@@ -6,12 +6,12 @@ description: Extend the default webpack config added by Next.js.
 
 Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case:
 
-- [CSS imports](/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
-- [CSS modules](/docs/basic-features/built-in-css-support#adding-component-level-css)
-- [Sass/SCSS imports](/docs/basic-features/built-in-css-support#sass-support)
-- [Sass/SCSS modules](/docs/basic-features/built-in-css-support#sass-support)
+- [CSS imports](/docs/basic-features/built-in-css-support.md#adding-a-global-stylesheet)
+- [CSS modules](/docs/basic-features/built-in-css-support.md#adding-component-level-css)
+- [Sass/SCSS imports](/docs/basic-features/built-in-css-support.md#sass-support)
+- [Sass/SCSS modules](/docs/basic-features/built-in-css-support.md#sass-support)
 - [preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact)
-- [Customizing babel configuration](/docs/advanced-features/customizing-babel-config)
+- [Customizing babel configuration](/docs/advanced-features/customizing-babel-config.md)
 
 Some commonly asked for features are available as plugins:
 

diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md
@@ -45,7 +45,7 @@ export default Home
 - `href` - The path inside `pages` directory. This is the only required prop
 - `as` - The path that will be rendered in the browser URL bar. Used for dynamic routes
 - [`passHref`](#if-the-child-is-a-custom-component-that-wraps-an-a-tag) - Forces `Link` to send the `href` property to its child. Defaults to `false`
-- `prefetch` - Prefetch the page in the background. Defaults to `true`. Any `<Link />` that is in the viewport (initially or through scroll) will be preloaded. Pages using [Static Generation](/docs/basic-features/data-fetching#getstaticprops-static-generation) will preload `JSON` files with the data for faster page transitions.
+- `prefetch` - Prefetch the page in the background. Defaults to `true`. Any `<Link />` that is in the viewport (initially or through scroll) will be preloaded. Pages using [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) will preload `JSON` files with the data for faster page transitions.
 - [`replace`](#replace-the-url-instead-of-push) - Replace the current `history` state instead of adding a new url into the stack. Defaults to `false`
 - [`scroll`](#disable-scrolling-to-the-top-of-the-page) - Scroll to the top of the page after a navigation. Defaults to `true`
 - [`shallow`](/docs/routing/shallow-routing.md) - Update the path of the current page without rerunning [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation), [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) or [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md). Defaults to `false`

diff --git a/docs/api-reference/next/router.md b/docs/api-reference/next/router.md
@@ -182,7 +182,7 @@ router.prefetch(url, as)
 ```
 
 - `url` - The path to a `page` inside the `pages` directory
-- `as` - Optional decorator for `url`, used to prefetch [dynamic routes](/docs/routing/dynamic-routes). Defaults to `url`
+- `as` - Optional decorator for `url`, used to prefetch [dynamic routes](/docs/routing/dynamic-routes.md). Defaults to `url`
 
 #### Usage
 

diff --git a/docs/basic-features/built-in-css-support.md b/docs/basic-features/built-in-css-support.md
@@ -31,7 +31,7 @@ body {
 }
 ```
 
-Create a [`pages/_app.js` file](/docs/advanced-features/custom-app) if not already present.
+Create a [`pages/_app.js` file](/docs/advanced-features/custom-app.md) if not already present.
 Then, [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file.
 
 ```jsx
@@ -44,7 +44,7 @@ export default function MyApp({ Component, pageProps }) {
 ```
 
 These styles (`styles.css`) will apply to all pages and components in your application.
-Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside [`pages/_app.js`](/docs/advanced-features/custom-app)**.
+Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside [`pages/_app.js`](/docs/advanced-features/custom-app.md)**.
 
 In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state.
 

diff --git a/docs/basic-features/environment-variables.md b/docs/basic-features/environment-variables.md
@@ -30,9 +30,9 @@ DB_USER=myuser
 DB_PASS=mypassword
 ```
 
-This loads `process.env.DB_HOST`, `process.env.DB_USER`, and `process.env.DB_PASS` into the Node.js environment automatically allowing you to use them in [Next.js data fetching methods](/docs/basic-features/data-fetching) and [API routes](/docs/api-routes/introduction).
+This loads `process.env.DB_HOST`, `process.env.DB_USER`, and `process.env.DB_PASS` into the Node.js environment automatically allowing you to use them in [Next.js data fetching methods](/docs/basic-features/data-fetching.md) and [API routes](/docs/api-routes/introduction.md).
 
-For example, using [`getStaticProps`](/docs/basic-features/data-fetching#getstaticprops-static-generation):
+For example, using [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation):
 
 ```js
 // pages/index.js

diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md
@@ -97,7 +97,7 @@ export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
 
 ## Custom `App`
 
-If you have a [custom `App`](/docs/advanced-features/custom-app), you can use the built-in type `AppProps` and change file name to `./pages/_app.tsx` like so:
+If you have a [custom `App`](/docs/advanced-features/custom-app.md), you can use the built-in type `AppProps` and change file name to `./pages/_app.tsx` like so:
 
 ```ts
 // import App from "next/app";

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -51,9 +51,9 @@ Open `package.json` and add the following `scripts`:
 
 These scripts refer to the different stages of developing an application:
 
-- `dev` - Runs [`next dev`](/docs/api-reference/cli#development) which starts Next.js in development mode
-- `build` - Runs [`next build`](/docs/api-reference/cli#build) which builds the application for production usage
-- `start` - Runs [`next start`](/docs/api-reference/cli#production) which starts a Next.js production server
+- `dev` - Runs [`next dev`](/docs/api-reference/cli.md#development) which starts Next.js in development mode
+- `build` - Runs [`next build`](/docs/api-reference/cli.md#build) which builds the application for production usage
+- `start` - Runs [`next start`](/docs/api-reference/cli.md#production) which starts a Next.js production server
 
 Next.js is built around the concept of [pages](/docs/basic-features/pages.md). A page is a [React Component](https://reactjs.org/docs/components-and-props.html) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory.
 

diff --git a/docs/routing/dynamic-routes.md b/docs/routing/dynamic-routes.md
@@ -54,7 +54,7 @@ Multiple dynamic route segments work the same way. The page `pages/post/[pid]/[c
 { "pid": "abc", "comment": "a-comment" }
 ```
 
-**Note:** Client-side navigations to a dynamic route (including [catch all routes](#catch-all-routes)) can be handled with [`next/link`](/docs/api-reference/next/link.md#dynamic-routes). Read our docs for [Linking between pages](/docs/routing/introduction#linking-between-pages) to learn more.
+**Note:** Client-side navigations to a dynamic route (including [catch all routes](#catch-all-routes)) can be handled with [`next/link`](/docs/api-reference/next/link.md#dynamic-routes). Read our docs for [Linking between pages](/docs/routing/introduction.md#linking-between-pages) to learn more.
 
 ### Catch all routes
 

diff --git a/examples/with-styled-components/package.json b/examples/with-styled-components/package.json
@@ -10,6 +10,7 @@
     "next": "latest",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
+    "react-is": "^16.8.0",
     "styled-components": "^5.0.0"
   },
   "devDependencies": {

diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.3-canary.21"
+  "version": "9.5.3-canary.23"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-plugin-google-analytics/package.json b/packages/next-plugin-google-analytics/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"
   },
   "nextjs": {
     "name": "Google Analytics",
     "required-env": [
-      "GA_TRACKING_ID"
+      "NEXT_PUBLIC_GA_TRACKING_ID"
     ]
   },
   "peerDependencies": {

diff --git a/packages/next-plugin-google-analytics/src/document-head-tags-server.js b/packages/next-plugin-google-analytics/src/document-head-tags-server.js
@@ -5,15 +5,15 @@ export default async function headTags() {
     <>
       <script
         async
-        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
       />
       <script
         dangerouslySetInnerHTML={{
           __html: `
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-            gtag('config', '${process.env.GA_TRACKING_ID}');
+            gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');
           `,
         }}
       />

diff --git a/packages/next-plugin-google-analytics/src/on-init-client.js b/packages/next-plugin-google-analytics/src/on-init-client.js
@@ -1,7 +1,7 @@
 export default async function initClient({ router }) {
   router.events.on('routeChangeComplete', (url) => {
     setTimeout(() => {
-      window.gtag('config', process.env.GA_TRACKING_ID, {
+      window.gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
         page_location: url,
         page_title: document.title,
       })

diff --git a/packages/next-plugin-sentry/package.json b/packages/next-plugin-sentry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "9.5.3-canary.21",
+  "version": "9.5.3-canary.23",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
@@ -612,28 +612,49 @@ function doRender({
 
     // Clean up previous render if canceling:
     ;([].slice.call(
-      document.querySelectorAll('link[data-n-staging]')
+      document.querySelectorAll(
+        'link[data-n-staging], noscript[data-n-staging]'
+      )
     ) as HTMLLinkElement[]).forEach((el) => {
       el.parentNode!.removeChild(el)
     })
 
-    let referenceNode: HTMLLinkElement | undefined = ([].slice.call(
+    const referenceNodes: HTMLLinkElement[] = [].slice.call(
       document.querySelectorAll('link[data-n-g], link[data-n-p]')
-    ) as HTMLLinkElement[]).pop()
-
-    const required: Promise<void>[] = styleSheets.map((href) => {
-      const [link, promise] = createLink(href, 'stylesheet')
-      link.setAttribute('data-n-staging', '')
-      // Media `none` does not work in Firefox, so `print` is more
-      // cross-browser. Since this is so short lived we don't have to worry
-      // about style thrashing in a print view (where no routing is going to be
-      // happening anyway).
-      link.setAttribute('media', 'print')
+    ) as HTMLLinkElement[]
+    const referenceHrefs = new Set(
+      referenceNodes.map((e) => e.getAttribute('href'))
+    )
+    let referenceNode: Element | undefined =
+      referenceNodes[referenceNodes.length - 1]
+
+    const required: (Promise<any> | true)[] = styleSheets.map((href) => {
+      let newNode: Element, promise: Promise<any> | true
+      const existingLink = referenceHrefs.has(href)
+      if (existingLink) {
+        newNode = document.createElement('noscript')
+        newNode.setAttribute('data-n-staging', href)
+        promise = true
+      } else {
+        const [link, onload] = createLink(href, 'stylesheet')
+        link.setAttribute('data-n-staging', '')
+        // Media `none` does not work in Firefox, so `print` is more
+        // cross-browser. Since this is so short lived we don't have to worry
+        // about style thrashing in a print view (where no routing is going to be
+        // happening anyway).
+        link.setAttribute('media', 'print')
+        newNode = link
+        promise = onload
+      }
+
       if (referenceNode) {
-        referenceNode.parentNode!.insertBefore(link, referenceNode.nextSibling)
-        referenceNode = link
+        referenceNode.parentNode!.insertBefore(
+          newNode,
+          referenceNode.nextSibling
+        )
+        referenceNode = newNode
       } else {
-        document.head.appendChild(link)
+        document.head.appendChild(newNode)
       }
       return promise
     })
@@ -662,17 +683,34 @@ function doRender({
 
   function onCommit() {
     if (
-      // We can skip this during hydration. Running it wont cause any harm, but
-      // we may as well save the CPU cycles.
-      !isInitialRender &&
       // We use `style-loader` in development, so we don't need to do anything
       // unless we're in production:
-      process.env.NODE_ENV === 'production'
+      process.env.NODE_ENV === 'production' &&
+      // We can skip this during hydration. Running it wont cause any harm, but
+      // we may as well save the CPU cycles:
+      !isInitialRender &&
+      // Ensure this render commit owns the currently staged stylesheets:
+      renderPromiseReject === lastRenderReject
     ) {
-      // Remove old stylesheets:
+      // Remove or relocate old stylesheets:
+      const relocatePlaceholders = [].slice.call(
+        document.querySelectorAll('noscript[data-n-staging]')
+      ) as HTMLElement[]
+      const relocateHrefs = relocatePlaceholders.map((e) =>
+        e.getAttribute('data-n-staging')
+      )
       ;([].slice.call(
         document.querySelectorAll('link[data-n-p]')
-      ) as HTMLLinkElement[]).forEach((el) => el.parentNode!.removeChild(el))
+      ) as HTMLLinkElement[]).forEach((el) => {
+        const currentHref = el.getAttribute('href')
+        const relocateIndex = relocateHrefs.indexOf(currentHref)
+        if (relocateIndex !== -1) {
+          const placeholderElement = relocatePlaceholders[relocateIndex]
+          placeholderElement.parentNode?.replaceChild(el, placeholderElement)
+        } else {
+          el.parentNode!.removeChild(el)
+        }
+      })
 
       // Activate new stylesheets:
       ;[].slice