Merge branch 'canary' into canary

.github/workflows/build_test_deploy.yml

@@ -77,23 +77,6 @@ jobs:
     steps:
       - run: exit 0
 
-  testMacOS:
-    name: macOS (Basic, Production, Acceptance)
-    runs-on: macos-latest
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      HEADLESS: true
-
-    steps:
-      - uses: actions/checkout@v2
-      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      # Installing dependencies again since OS changed
-      - run: yarn install --frozen-lockfile --check-files || yarn install --frozen-lockfile --check-files
-      - run: node run-tests.js test/integration/production/test/index.test.js
-      - run: node run-tests.js test/integration/basic/test/index.test.js
-      - run: node run-tests.js test/acceptance/*
-
   testWebpack5:
     name: webpack 5 (Basic, Production, Acceptance)
     runs-on: ubuntu-latest

.github/workflows/test_macos.yml

@@ -0,0 +1,22 @@
+on:
+  push:
+    branches: [canary]
+
+name: Test macOS
+
+jobs:
+  testMacOS:
+    name: macOS (Basic, Production, Acceptance)
+    runs-on: macos-latest
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_JOB: 1
+      HEADLESS: true
+
+    steps:
+      - uses: actions/checkout@v2
+      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
+      - run: yarn install --frozen-lockfile --check-files || yarn install --frozen-lockfile --check-files
+      - run: node run-tests.js test/integration/production/test/index.test.js
+      - run: node run-tests.js test/integration/basic/test/index.test.js
+      - run: node run-tests.js test/acceptance/*

docs/api-reference/cli.md

@@ -48,6 +48,14 @@ NODE_OPTIONS='--inspect' next
 
 The first load is colored green, yellow, or red. Aim for green for performant applications.
 
+You can enable production profiling for React with the `--profile` flag in `next build`. This requires Next.js 9.5:
+
+```bash
+next build --profile
+```
+
+After that, you can use the profiler in the same way as you would in development.
+
 ## Development
 
 `next dev` starts the application in development mode with hot-code reloading, error reporting, and more:

docs/api-reference/next.config.js/redirects.md

@@ -6,6 +6,13 @@ description: Add redirects to your Next.js app.
 
 > 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.
 
+<details open>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/redirects">Redirects</a></li>
+  </ul>
+</details>
+
 Redirects allow you to redirect an incoming request path to a different destination path.
 
 Redirects are only available on the Node.js environment and do not affect client-side routing.

docs/api-reference/next.config.js/runtime-configuration.md

@@ -6,8 +6,6 @@ description: Add client and server runtime configuration to your Next.js app.
 
 > Generally you'll want to use [build-time environment variables](/docs/api-reference/next.config.js/environment-variables.md) to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
 
-> Runtime configuration is not available when using the [`serverless` target](/docs/api-reference/next.config.js/build-target.md#serverless-target).
-
 To add runtime configuration to your app open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
 
 ```js

docs/basic-features/built-in-css-support.md

@@ -117,6 +117,13 @@ npm install sass
 
 Sass support has the same benefits and restrictions as the built-in CSS support detailed above.
 
+> **Note**: Sass supports [two different syntaxes](https://sass-lang.com/documentation/syntax), each with their own extension.
+> The `.scss` extension requires you use the [SCSS syntax](https://sass-lang.com/documentation/syntax#scss),
+> while the `.sass` extension requires you use the [Indented Syntax ("Sass")](https://sass-lang.com/documentation/syntax#the-indented-syntax).
+>
+> If you're not sure which to choose, start with the `.scss` extension which is a superset of CSS, and doesn't require you learn the
+> Indented Syntax ("Sass").
+
 ### Customizing Sass Options
 
 If you want to configure the Sass compiler you can do so by using `sassOptions` in `next.config.js`.

docs/basic-features/environment-variables.md

@@ -46,6 +46,27 @@ export async function getStaticProps() {
 }
 ```
 
+> **Note**: Next.js will automatically expand variables (`$VAR`) inside of your `.env*` files.
+> This allows you to reference other secrets, like so:
+>
+> ```bash
+> # .env
+> HOSTNAME=localhost
+> PORT=8080
+> HOST=http://$HOSTNAME:$PORT
+> ```
+>
+> If you are trying to use a variable with a `$` in the actual value, it needs to be escaped like so: `\$`.
+>
+> For example:
+>
+> ```bash
+> # .env
+> A=abc
+> WRONG=pre$A # becomes "preabc"
+> CORRECT=pre\$A # becomes "pre$A"
+> ```
+
 ## Exposing Environment Variables to the Browser
 
 By default all environment variables loaded through `.env.local` are only available in the Node.js environment, meaning they won't be exposed to the browser.

docs/basic-features/fast-refresh.md

@@ -105,6 +105,8 @@ screen!
 
 Sometimes, this can lead to unexpected results. For example, even a `useEffect`
 with an empty array of dependencies would still re-run once during Fast Refresh.
-However, writing code resilient to occasional re-running of `useEffect` is a
-good practice even without Fast Refresh. This makes it easier for you to later
-introduce new dependencies to it.
+
+However, writing code resilient to occasional re-running of `useEffect` is a good practice even
+without Fash Refresh. It will make it easier for you to introduce new dependencies to it later on
+and it's enforced by [React Strict Mode](/docs/api-reference/next.config.js/react-strict-mode),
+which we highly recommend enabling.

docs/create-next-app.md

@@ -0,0 +1,55 @@
+---
+description: Create Next.js apps in one command with create-next-app.
+---
+
+# Create Next App
+
+The easiest way to get started with Next.js is by using `create-next-app`. This simple CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:
+
+```bash
+npx create-next-app
+# or
+yarn create next-app
+```
+
+### Options
+
+`create-next-app` comes with the following options:
+
+- **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
+- **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
+
+### Why use Create Next App?
+
+`create-next-app` allows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes a number of benefits:
+
+- **Interactive Experience**: Running `npx create-next-app` (with no arguments) launches an interactive experience that guides you through setting up a project.
+- **Zero Dependencies**: Initializing a project is as quick as one second. Create Next App has zero dependencies.
+- **Offline Support**: Create Next App will automatically detect if you're offline and bootstrap your project using your local package cache.
+- **Support for Examples**: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. `npx create-next-app --example api-routes`).
+- **Tested**: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.
+
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
+<div class="card">
+  <a href="/docs/basic-features/pages.md">
+    <b>Pages:</b>
+    <small>Learn more about what pages are in Next.js.</small>
+  </a>
+</div>
+
+<div class="card">
+  <a href="/docs/basic-features/built-in-css-support.md">
+    <b>CSS Support:</b>
+    <small>Use the built-in CSS support to add custom styles to your app.</small>
+  </a>
+</div>
+
+<div class="card">
+  <a href="/docs/api-reference/cli.md">
+    <b>CLI:</b>
+    <small>Learn more about the Next.js CLI.</small>
+  </a>
+</div>

docs/faq.md

@@ -72,3 +72,8 @@ description: Get to know more about Next.js with the frequently asked questions.
 
   <p>As we were researching options for server-rendering React that didn’t involve a large number of steps, we came across <a href="https://github.com/facebookarchive/react-page">react-page</a> (now deprecated), a similar approach to Next.js by the creator of React Jordan Walke.</p>
 </details>
+
+<details>
+  <summary>Can I make a Next.js Progressive Web App?</summary>
+   <p>Yes! Here's an <a href="https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app">example</a>.</p>
+</details>

docs/getting-started.md

@@ -29,6 +29,8 @@ yarn create next-app
 
 After the installation is complete, follow the instructions to start the development server. Try editing `pages/index.js` and see the result on your browser.
 
+For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/create-next-app.md)
+
 ## Manual Setup
 
 Install `next`, `react` and `react-dom` in your project:

errors/export-all-in-page.md

@@ -0,0 +1,54 @@
+# Re-exporting all exports from a page is disallowed
+
+#### Why This Error Occurred
+
+The following export can potentially break Next.js' compilation of pages:
+
+```ts
+export * from '...'
+```
+
+This is because Node.js code may be leaked to the browser build, causing an error. For example, the following two pages:
+
+```ts
+// pages/one.js
+import fs from 'fs'
+
+export default function A() {
+  return <main />
+}
+
+export function getStaticProps() {
+  fs
+  return { props: {} }
+}
+```
+
+```ts
+// pages/two.js
+export * from './one'
+```
+
+Would cause the following error:
+
+```
+Module not found: Can't resolve 'fs' in './pages/two.js'
+```
+
+#### Possible Ways to Fix It
+
+Update your page to re-export the default component only:
+
+```ts
+export { default } from './other-page'
+```
+
+If the other page uses `getServerSideProps` or `getStaticProps`, you can re-export those individually too:
+
+```ts
+export { default, getServerSideProps } from './other-page'
+// or
+export { default, getStaticProps } from './other-page'
+// or
+export { default, getStaticProps, getStaticPaths } from './other-page/[dynamic]'
+```

errors/invalid-external-rewrite.md

@@ -0,0 +1,13 @@
+# Invalid External Rewrite
+
+#### Why This Error Occurred
+
+A rewrite was defined with both `basePath: false` and an internal `destination`. Rewrites that capture urls outside of the `basePath` must route externally, as they are intended for proxying in the case of incremental adoption of Next.js in a project.
+
+#### Possible Ways to Fix It
+
+Look for any rewrite where `basePath` is `false` and make sure its `destination` starts with `http://` or `https://`.
+
+### Useful Links
+
+- [Rewrites section in Documentation](https://nextjs.org/docs/api-reference/next.config.js/rewrites)

errors/react-version.md

@@ -0,0 +1,51 @@
+# Minimum React Version
+
+#### Why This Error Occurred
+
+Your project is using an old version of `react` or `react-dom` that does not
+meet the suggested minimum version requirement.
+
+Next.js suggests using, at a minimum, `[email protected]` and `[email protected]`.
+Older versions of `react` and `react-dom` do work with Next.js, however, they do
+not enable all of Next.js' features.
+
+For example, the following features are not enabled with old React versions:
+
+- [Fast Refresh](https://nextjs.org/docs/basic-features/fast-refresh): instantly
+  view edits to your app without losing component state
+- Component stack trace in development: see the component tree that lead up to
+  an error
+- Hydration mismatch warnings: trace down discrepancies in your React tree that
+  cause performance problems
+
+This list is not exhaustive, but illustrative in the value of upgrading React!
+
+#### Possible Ways to Fix It
+
+**Via npm**
+
+```bash
+npm upgrade react@latest react-dom@latest
+```
+
+**Via Yarn**
+
+```bash
+yarn add react@latest react-dom@latest
+```
+
+**Manually** Open your `package.json` and upgrade `react` and `react-dom`:
+
+```json
+{
+  "dependencies": {
+    "react": "^16.10.0",
+    "react-dom": "^16.10.0"
+  }
+}
+```
+
+### Useful Links
+
+- [Fast Refresh blog post](https://nextjs.org/blog/next-9-4#fast-refresh)
+- [Fast Refresh docs](https://nextjs.org/docs/basic-features/fast-refresh)

examples/active-class-name/components/ActiveLink.js

@@ -8,8 +8,11 @@ const ActiveLink = ({ children, activeClassName, ...props }) => {
   const child = Children.only(children)
   const childClassName = child.props.className || ''
 
+  // pages/index.js will be matched via props.href
+  // pages/about.js will be matched via props.href
+  // pages/[slug].js will be matched via props.as
   const className =
-    asPath === props.href
+    asPath === props.href || asPath === props.as
       ? `${childClassName} ${activeClassName}`.trim()
       : childClassName
 

examples/active-class-name/components/Nav.js

@@ -22,6 +22,11 @@ const Nav = () => (
           <a className="nav-link">About</a>
         </ActiveLink>
       </li>
+      <li>
+        <ActiveLink activeClassName="active" href="/[slug]" as="/dynamic-route">
+          <a className="nav-link">Dynamic Route</a>
+        </ActiveLink>
+      </li>
     </ul>
   </nav>
 )

examples/active-class-name/pages/[slug].js

@@ -0,0 +1,14 @@
+import { useRouter } from 'next/router'
+import Nav from '../components/Nav'
+
+const SlugPage = () => {
+  const { asPath } = useRouter()
+  return (
+    <>
+      <Nav />
+      <p>Hello, I'm the {asPath} page</p>
+    </>
+  )
+}
+
+export default SlugPage

examples/auth0/.env.local.example

@@ -0,0 +1,11 @@
+# Public Environment variables that can be used in the browser.
+NEXT_PUBLIC_AUTH0_CLIENT_ID=
+NEXT_PUBLIC_AUTH0_SCOPE="openid profile"
+NEXT_PUBLIC_AUTH0_DOMAIN=
+NEXT_PUBLIC_REDIRECT_URI="http://localhost:3000/api/callback"
+NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI="http://localhost:3000"
+
+# Secret environment variables only available to Node.js
+AUTH0_CLIENT_SECRET=
+SESSION_COOKIE_SECRET=
+SESSION_COOKIE_LIFETIME=7200