Merge branch 'canary' into update-link-docs

vercel · Sep 7, 2020 · 4577686 · 4577686
2 parents a57b4b7 + 4c5c7cd
commit 4577686
Show file tree

Hide file tree

Showing 616 changed files with 3,620 additions and 5,749 deletions.
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -96,8 +96,8 @@ jobs:
     steps:
       - run: exit 0
 
-  testWebpack5:
-    name: webpack 5 (Basic, Production, Acceptance)
+  testFutureDependencies:
+    name: React 17 + webpack 5 (Basic, Production, Acceptance)
     runs-on: ubuntu-latest
     env:
       NEXT_TELEMETRY_DISABLED: 1
@@ -108,6 +108,8 @@ jobs:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.22"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: yarn install --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

diff --git a/check-examples.sh b/check-examples.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+cd `dirname $0`
+
+for folder in examples/* ; do
+  cp -n packages/create-next-app/templates/default/gitignore $folder/.gitignore;
+  if [ -f "$folder/package.json" ]; then
+    cat $folder/package.json | jq '.license = "MIT"' | sponge $folder/package.json
+  fi
+done;
+
+if [[ ! -z $(git status -s) ]];then
+  echo "Detected changes"
+  git status
+  exit 1
+fi
diff --git a/check-git-ignore.sh b/check-git-ignore.sh
diff --git a/contributing.md b/contributing.md
@@ -138,8 +138,6 @@ Deploy the example using [Vercel](https://vercel.com/now):
 
 ## How to use
 
-### Using `create-next-app`
-
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
@@ -148,24 +146,5 @@ npx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 ```
 
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/DIRECTORY_NAME
-cd DIRECTORY_NAME
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 ````
diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md
@@ -4,17 +4,49 @@ description: Dynamically import JavaScript modules and React Components and spli
 
 # Dynamic Import
 
-<details>
+<details open>
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-import">Dynamic Import</a></li>
   </ul>
 </details>
 
-Next.js supports ES2020 [dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) for JavaScript. With it you can import JavaScript modules (inc. React Components) dynamically and work with them. They also work with SSR.
+Next.js supports ES2020 [dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) for JavaScript. With it you can import JavaScript modules dynamically and work with them. They also work with SSR.
+
+In the following example, we implement fuzzy search using `fuse.js` and only load the module dynamically in the browser after the user types in the search input:
+
+```jsx
+import { useState } from 'react'
+
+const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']
+
+export default function Page() {
+  const [results, setResults] = useState()
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search"
+        onChange={async (e) => {
+          const { value } = e.currentTarget
+          // Dynamically load fuse.js
+          const Fuse = (await import('fuse.js')).default
+          const fuse = new Fuse(names)
+
+          setResults(fuse.search(value))
+        }}
+      />
+      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
+    </div>
+  )
+}
+```
 
 You can think of dynamic imports as another way to split your code into manageable chunks.
 
+React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works just like any other React Component. Check out the sections below for more details on how it works.
+
 ## Basic usage
 
 In the following example, the module `../components/hello` will be dynamically loaded by the page:

diff --git a/docs/advanced-features/measuring-performance.md b/docs/advanced-features/measuring-performance.md
@@ -158,7 +158,9 @@ export function reportWebVitals(metric) {
 >
 > ```js
 > export function reportWebVitals({ id, name, label, value }) {
->   ga('send', 'event', {
+>   // Use `window.gtag` if you initialized Google Analytics as this example:
+>   // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_document.js
+>   window.gtag('send', 'event', {
 >     eventCategory:
 >       label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
 >     eventAction: name,

diff --git a/docs/advanced-features/preview-mode.md b/docs/advanced-features/preview-mode.md
@@ -203,6 +203,18 @@ You can pass an object to `setPreviewData` and have it be available in `getStati
 
 The preview mode works on `getServerSideProps` as well. It will also be available on the `context` object containing `preview` and `previewData`.
 
+### Works with API Routes
+
+API Routes will have access to `preview` and `previewData` under the request object. For example:
+
+```js
+export default function myApiRoute(req, res) {
+  const isPreview = req.preview
+  const previewData = req.previewData
+  // ...
+}
+```
+
 ### Unique per `next build`
 
 Both the bypass cookie value and the private key for encrypting the `previewData` change when `next build` is completed.

diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md
@@ -8,6 +8,7 @@ description: Enable client-side transitions between routes with the built-in Lin
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/hello-world">Hello World</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/active-class-name">Active className on Link</a></li>
   </ul>
 </details>
 

diff --git a/docs/basic-features/fast-refresh.md b/docs/basic-features/fast-refresh.md
@@ -6,6 +6,13 @@ description:
 
 # Fast Refresh
 
+<details open>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/fast-refresh-demo">Fast Refresh Demo</a></li>
+  </ul>
+</details>
+
 Fast Refresh is a Next.js feature that gives you instantaneous feedback on
 edits made to your React components. Fast Refresh is enabled by default in all
 Next.js applications on **9.4 or newer**. With Next.js Fast Refresh enabled,

diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md
@@ -23,7 +23,7 @@ Next.js will automatically configure this file with default values. Providing yo
 
 > Next.js uses Babel to handle TypeScript, which has some [caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats), and some [compiler options are handled differently](https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options).
 
-Then, run `next` (normally `npm run dev`) and Next.js will guide you through the installation of the required packages to finish the setup:
+Then, run `next` (normally `npm run dev` or `yarn dev`) and Next.js will guide you through the installation of the required packages to finish the setup:
 
 ```bash
 npm run dev

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -37,6 +37,8 @@ Install `next`, `react` and `react-dom` in your project:
 
 ```bash
 npm install next react react-dom
+# or
+yarn add next react react-dom
 ```
 
 Open `package.json` and add the following `scripts`:
@@ -71,7 +73,7 @@ function HomePage() {
 export default HomePage
 ```
 
-To start developing your application run `npm run dev`. This starts the development server on `http://localhost:3000`.
+To start developing your application run `npm run dev` or `yarn dev`. This starts the development server on `http://localhost:3000`.
 
 Visit `http://localhost:3000` to view your application.
 

diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md
@@ -10,8 +10,6 @@ Deploy the example using [Vercel](https://vercel.com):
 
 ## How to use
 
-### Using `create-next-app`
-
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
@@ -20,23 +18,4 @@ npx create-next-app --example active-class-name active-class-name-app
 yarn create next-app --example active-class-name active-class-name-app
 ```
 
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/active-class-name
-cd active-class-name
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/active-class-name/package.json b/examples/active-class-name/package.json
@@ -12,5 +12,5 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
-  "license": "ISC"
+  "license": "MIT"
 }
diff --git a/examples/amp-first/README.md b/examples/amp-first/README.md
@@ -15,8 +15,6 @@ Deploy the example using [Vercel](https://vercel.com):
 
 ## How to use
 
-### Using `create-next-app`
-
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
@@ -25,25 +23,6 @@ npx create-next-app --example amp-first amp-first-app
 yarn create next-app --example amp-first amp-first-app
 ```
 
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/amp-first
-cd amp-first
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits. You will also see AMP validation errors in the console.
 
 ## Todo

diff --git a/examples/amp-first/package.json b/examples/amp-first/package.json
@@ -11,5 +11,5 @@
     "react": "^16.10.2",
     "react-dom": "^16.10.2"
   },
-  "license": "ISC"
+  "license": "MIT"
 }
diff --git a/examples/amp-story/README.md b/examples/amp-story/README.md
@@ -10,8 +10,6 @@ Deploy the example using [Vercel](https://vercel.com):
 
 ## How to use
 
-### Using `create-next-app`
-
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
@@ -20,23 +18,4 @@ npx create-next-app --example amp-story amp-app
 yarn create next-app --example amp-story amp-app
 ```
 
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/amp-story
-cd amp-story
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/amp-story/package.json b/examples/amp-story/package.json
@@ -11,5 +11,5 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
-  "license": "ISC"
+  "license": "MIT"
 }
diff --git a/examples/amp/README.md b/examples/amp/README.md
@@ -10,8 +10,6 @@ Deploy the example using [Vercel](https://vercel.com):
 
 ## How to use
 
-### Using `create-next-app`
-
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
@@ -20,23 +18,4 @@ npx create-next-app --example amp amp-app
 yarn create next-app --example amp amp-app
 ```
 
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/amp
-cd amp
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/amp/package.json b/examples/amp/package.json
@@ -11,5 +11,5 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
-  "license": "ISC"
+  "license": "MIT"
 }