Merge branch 'canary' into update-tailwind-to-v2

docs/advanced-features/i18n-routing.md

@@ -269,3 +269,5 @@ export const getStaticPaths = ({ locales }) => {
   }
 }
 ```
+
+Note: i18n routing does not currently support [`next export`](https://nextjs.org/docs/advanced-features/i18n-routing) mode as you are no longer leveraging Next.js' server-side routing.

docs/api-reference/next/link.md

@@ -57,7 +57,7 @@ export default Home
 - `href` - The path or URL to navigate to. This is the only required prop
 - `as` - Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked
 - [`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.md#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. Prefetch can be disabled by passing `prefetch={false}`. 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`

docs/migrating/incremental-adoption.md

@@ -13,15 +13,15 @@ description: Learn different strategies for incrementally adopting Next.js into
   </ul>
 </details>
 
-Next.js has been designed from the start for gradual adoption. You can use as much (or as little) React as you need. By starting small and incrementally adding more pages, you can prevent derailing feature work by avoiding a complete rewrite.
+Next.js has been designed for gradual adoption. With Next.js, you can continue using your existing code and add as much (or as little) React as you need. By starting small and incrementally adding more pages, you can prevent derailing feature work by avoiding a complete rewrite.
 
 ## Strategies
 
 ### Subpath
 
-If you need multiple applications on a single domain, you can take over an entire subpath. For example, you might deploy your Next.js e-commerce store at `acme.com/store`.
+The first strategy is to configure your server or proxy such that, everything under a specific subpath points to a Next.js app. For example, your existing website might be at `example.com`, and you might configure your proxy such that `example.com/store` serves a Next.js e-commerce store.
 
-Using [`basePath`](/docs/api-reference/next.config.js/basepath.md), you can configure your Next.js application's assets and links to automatically work with your new subpath `/store`. Since each page in Next.js is its own [standalone route](/docs/routing/introduction.md), new files like `pages/products.js` will route to `acme.com/store/products` in your new application.
+Using [`basePath`](/docs/api-reference/next.config.js/basepath.md), you can configure your Next.js application's assets and links to automatically work with your new subpath `/store`. Since each page in Next.js is its own [standalone route](/docs/routing/introduction.md), pages like `pages/products.js` will route to `example.com/store/products` in your application.
 
 ```jsx
 // next.config.js
@@ -31,13 +31,15 @@ module.exports = {
 }
 ```
 
+To learn more about `basePath`, take a look at our [documentation](/docs/api-reference/next.config.js/basepath.md).
+
 > This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
 
 ### Rewrites
 
-If you plan on fully migrating your domain to Next.js, you can use [`rewrites`](/docs/api-reference/next.config.js/rewrites.md) inside `next.config.js`. This allows you to check your new routes before falling back to proxying your existing website.
+The second strategy is to create a new Next.js app that points to the root URL of your domain. Then, you can use [`rewrites`](/docs/api-reference/next.config.js/rewrites.md) inside `next.config.js` to have some subpaths to be proxied to your existing app.
 
-For example, let's say you took over `/about` with Next.js. When a request for `acme.com/about` hits your Next.js application, it will serve the new page. A request for any other route (e.g. `acme.com/dashboard`) will fall back and proxy the URL you specify.
+For example, let's say you created a Next.js app to be served from `example.com` with the following `next.config.js`. Now, requests for the pages you’ve added to this Next.js app (e.g. `/about` if you’ve added `pages/about.js`) will be handled by Next.js, and requests for any other route (e.g. `/dashboard`) will be proxied to `proxy.example.com`.
 
 ```jsx
 // next.config.js
@@ -53,16 +55,18 @@ module.exports = {
       },
       {
         source: '/:path*',
-        destination: `https://acme-proxy.com/:path*`,
+        destination: `https://proxy.example.com/:path*`,
       },
     ]
   },
 }
 ```
 
+To learn more about rewrites, take a look at our [documentation](/docs/api-reference/next.config.js/rewrites.md).
+
 > This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
 
-### Micro-Frontends
+### Micro-Frontends with Monorepos and Subdomains
 
 Next.js and [Vercel](https://vercel.com) make it easy to adopt [micro-frontends](https://martinfowler.com/articles/micro-frontends.html) and deploy as a [Monorepo](https://vercel.com/blog/monorepos). This allows you to use [subdomains](https://en.wikipedia.org/wiki/Subdomain) to adopt new applications incrementally. Some benefits of micro-frontends:
 

examples/with-emotion/.babelrc

@@ -1,3 +1,14 @@
 {
-  "presets": ["next/babel", "@emotion/babel-preset-css-prop"]
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
 }

examples/with-emotion/README.md

@@ -1,4 +1,4 @@
-# Pass Server Data Directly to a Next.js Page during SSR
+# Emotion Example
 
 Extract and inline critical css with
 [emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion),

examples/with-emotion/package.json

@@ -1,24 +1,20 @@
 {
   "name": "with-emotion",
   "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   },
-  "keywords": [],
-  "author": "Thomas Greco",
   "license": "MIT",
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "10.0.27"
+    "@emotion/babel-plugin": "11.0.0"
   },
   "dependencies": {
-    "@emotion/core": "10.0.35",
-    "@emotion/styled": "10.0.27",
+    "@emotion/react": "11.1.1",
+    "@emotion/styled": "11.0.0",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }

examples/with-emotion/shared/styles.js

@@ -1,4 +1,4 @@
-import { css, Global, keyframes } from '@emotion/core'
+import { css, Global, keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
 
 export const globalStyles = (

packages/next/build/webpack/loaders/next-serverless-loader.ts

@@ -631,7 +631,7 @@ const nextServerlessLoader: loader.Loader = function () {
           const {
             default: getRouteNoAssetPath,
           } = require('next/dist/next-server/lib/router/utils/get-route-from-asset-path');
-          _nextData = true;
+          _nextData = ${page === '/_error' ? 'false' : 'true'};
           parsedUrl.pathname = getRouteNoAssetPath(
             parsedUrl.pathname.replace(
               new RegExp('/_next/data/${escapedBuildId}/'),

packages/next/export/index.ts

@@ -51,7 +51,9 @@ const exists = promisify(existsOrig)
 function divideSegments(number: number, segments: number): number[] {
   const result = []
   while (number > 0 && segments > 0) {
-    const dividedNumber = Math.floor(number / segments)
+    const dividedNumber =
+      number < segments ? number : Math.floor(number / segments)
+
     number -= dividedNumber
     segments--
     result.push(dividedNumber)

packages/next/lib/load-custom-routes.ts

@@ -203,7 +203,7 @@ function checkCustomRoutes(
     }
 
     if (typeof route.locale !== 'undefined' && route.locale !== false) {
-      invalidParts.push('`locale` must be undefined or true')
+      invalidParts.push('`locale` must be undefined or false')
     }
 
     if (!route.source) {

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

@@ -637,6 +637,13 @@ export default class Router implements BaseRouter {
         this.locale = localePathResult.detectedLocale
         url = addBasePath(localePathResult.pathname)
       }
+
+      // if the locale isn't configured hard navigate to show 404 page
+      if (!this.locales?.includes(this.locale!)) {
+        parsedAs.pathname = addLocale(parsedAs.pathname, this.locale)
+        window.location.href = formatWithValidation(parsedAs)
+        return new Promise(() => {})
+      }
     }
 
     if (!(options as any)._h) {