Merge branch 'canary' into update-json5-and-remove-types

contributing.md

@@ -1,6 +1,6 @@
 # Contributing to Next.js
 
-Our Commitment to Open Source can be found [here](https://vercel.com/oss).
+Read about our [Commitment to Open Source](https://vercel.com/oss).
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 2. Create a new branch: `git checkout -b MY_BRANCH_NAME`

docs/advanced-features/amp-support/typescript.md

@@ -6,4 +6,4 @@ description: Using AMP with TypeScript? Extend your typings to allow AMP compone
 
 AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap ([#13791](https://github.com/ampproject/amphtml/issues/13791)).
 
-As a workaround you can manually create a file called `amp.d.ts` inside your project and add the custom types described [here](https://stackoverflow.com/a/50601125).
+As a workaround you can manually create a file called `amp.d.ts` inside your project and add these [custom types](https://stackoverflow.com/a/50601125).

docs/advanced-features/codemods.md

@@ -17,6 +17,14 @@ Codemods are transformations that run on your codebase programmatically. This al
 - `--dry` Do a dry-run, no code will be edited
 - `--print` Prints the changed output for comparison
 
+## Next.js 11
+
+### `cra-to-next` (experimental)
+
+Migrates a Create React App project to Next.js; creating a pages directory and necessary config to match behavior. Client-side only rendering is leveraged initially to prevent breaking compatibility due to `window` usage during SSR and can be enabled seamlessly to allow gradual adoption of Next.js specific features.
+
+Please share any feedback related to this transform [in this discussion](https://github.com/vercel/next.js/discussions/25858).
+
 ## Next.js 10
 
 ### `add-missing-react-import`

docs/advanced-features/measuring-performance.md

@@ -175,7 +175,7 @@ export function reportWebVitals(metric) {
 > }
 > ```
 >
-> Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
+> Read more about [sending results to Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
 
 ## TypeScript
 

docs/api-reference/cli.md

@@ -74,6 +74,12 @@ The application will start at `http://localhost:3000` by default. The default po
 npx next dev -p 4000
 ```
 
+Similarly, you can also set the hostname to be different from the default of `0.0.0.0`, this can be useful for making the application available for other devices on the network. The default hostname can be changed with `-H`, like so:
+
+```bash
+npx next dev -H 192.168.1.2
+```
+
 ## Production
 
 `next start` starts the application in production mode. The application should be compiled with [`next build`](#build) first.

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

@@ -26,7 +26,7 @@ module.exports = (phase, { defaultConfig }) => {
 }
 ```
 
-`phase` is the current context in which the configuration is loaded. You can see the available phases [here](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/lib/constants.ts#L1-L4). Phases can be imported from `next/constants`:
+`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/lib/constants.ts#L1-L4). Phases can be imported from `next/constants`:
 
 ```js
 const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
@@ -44,7 +44,7 @@ module.exports = (phase, { defaultConfig }) => {
 }
 ```
 
-The commented lines are the place where you can put the configs allowed by `next.config.js`, which are defined [here](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config-shared.ts#L68).
+The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config-shared.ts#L68).
 
 However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do.
 

docs/api-reference/next/amp.md

@@ -11,7 +11,7 @@ description: Enable AMP in a page, and control the way Next.js adds AMP to the p
   </ul>
 </details>
 
-> AMP support is one of our advanced features, you can read more about it [here](/docs/advanced-features/amp-support/introduction.md).
+> AMP support is one of our advanced features, you can [read more about AMP here](/docs/advanced-features/amp-support/introduction.md).
 
 To enable AMP, add the following config to your page:
 

docs/api-reference/next/image.md

@@ -132,7 +132,7 @@ const MyImage = (props) => {
   return (
     <Image
       loader={myLoader}
-      src="/me.png"
+      src="me.png"
       alt="Picture of the author"
       width={500}
       height={500}

docs/api-routes/introduction.md

@@ -29,8 +29,8 @@ export default function handler(req, res) {
 
 For an API route to work, you need to export a function as default (a.k.a **request handler**), which then receives the following parameters:
 
-- `req`: An instance of [http.IncomingMessage](https://nodejs.org/api/http.html#http_class_http_incomingmessage), plus some pre-built middlewares you can see [here](/docs/api-routes/api-middlewares.md)
-- `res`: An instance of [http.ServerResponse](https://nodejs.org/api/http.html#http_class_http_serverresponse), plus some helper functions you can see [here](/docs/api-routes/response-helpers.md)
+- `req`: An instance of [http.IncomingMessage](https://nodejs.org/api/http.html#http_class_http_incomingmessage), plus some [pre-built middlewares](/docs/api-routes/api-middlewares.md)
+- `res`: An instance of [http.ServerResponse](https://nodejs.org/api/http.html#http_class_http_serverresponse), plus some [helper functions](/docs/api-routes/response-helpers.md)
 
 To handle different HTTP methods in an API route, you can use `req.method` in your request handler, like so:
 

docs/authentication.md

@@ -48,7 +48,7 @@ const Profile = () => {
 export default Profile
 ```
 
-You can view this example in action [here](https://next-with-iron-session.vercel.app/). Check out the [`with-iron-session`](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session) example to see how it works.
+You can view this [example in action](https://next-with-iron-session.vercel.app/). Check out the [`with-iron-session`](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session) example to see how it works.
 
 ### Authenticating Server-Rendered Pages
 

errors/placeholder-blur-data-url.md

@@ -0,0 +1,15 @@
+# `placeholder=blur` without `blurDataURL`
+
+#### Why This Error Occurred
+
+You are attempting use the `next/image` component with `placeholder=blur` property but no `blurDataURL` property.
+
+The `blurDataURL` might be missing because your using a string for `src` instead of a static import.
+
+Or `blurDataURL` might be missing because the static import is an unsupported image format. Only jpg, png, and webp are supported at this time.
+
+#### Possible Ways to Fix It
+
+- Add a [`blurDataURL`](https://nextjs.org/docs/api-reference/next/image#blurdataurl) property, the contents should be a small Data URL to represent the image
+- Change the [`src`](https://nextjs.org/docs/api-reference/next/image#src) property to a static import with one of the supported file types: jpg, png, or webp
+- Remove the [`placeholder`](https://nextjs.org/docs/api-reference/next/image#placeholder) property, effectively no blur effect

errors/postcss-ignored-plugin.md

@@ -17,4 +17,4 @@ Remove the plugin specified in the error message from your custom PostCSS config
 #### How do I configure CSS Modules?
 
 CSS Modules are supported in [Next.js' built-in CSS support](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
-You can [read more](https://nextjs.org/docs/advanced-features/customizing-postcss-config) about how to use them [here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
+You can [read more about how to use CSS Modules here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).

errors/postcss-shape.md

@@ -39,7 +39,7 @@ module.exports = {
 }
 ```
 
-You can [read more](https://nextjs.org/docs/advanced-features/customizing-postcss-config) about configuring PostCSS in Next.js [here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
+You can [read more about configuring PostCSS in Next.js here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
 
 #### Common Errors
 

examples/amp-first/README.md

@@ -1,6 +1,6 @@
 # AMP First Boilerplate ⚡
 
-This example sets up the boilerplate for an AMP First Site. You can see a live version [here](https://my-next-app.sebastianbenz.vercel.app). The boilerplate includes the following features:
+This example sets up the boilerplate for an AMP First Site. You can see a [live version here](https://my-next-app.sebastianbenz.vercel.app). The boilerplate includes the following features:
 
 - AMP Extension helpers (`amp-state`, `amp-script`, ...)
 - AMP Serviceworker integration

examples/auth0/package.json

@@ -11,6 +11,7 @@
     "@auth0/nextjs-auth0": "^0.8.0",
     "next": "latest",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "tslib": "^2.2.0"
   }
 }

examples/blog-starter/README.md

@@ -42,10 +42,16 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 
 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
+```
 npx create-next-app --example blog-starter blog-starter-app
-# or
+
+```
+
+or
+
+```
 yarn create next-app --example blog-starter blog-starter-app
+
 ```
 
 Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).

examples/i18n-routing/README.md

@@ -2,7 +2,7 @@
 
 This example shows how to create internationalized pages using Next.js and the i18n routing feature. It shows a normal page, a non-dynamic `getStaticProps` page, a dynamic `getStaticProps` page, and a `getServerSideProps` page.
 
-For further documentation on this feature see the documentation [here](https://nextjs.org/docs/advanced-features/i18n-routing)
+For further documentation on this feature see the [Internationalized Routing docs](https://nextjs.org/docs/advanced-features/i18n-routing).
 
 ## Preview
 

examples/image-component/pages/index.js

@@ -2,6 +2,7 @@ import styles from '../styles.module.css'
 import Image from 'next/image'
 import Link from 'next/link'
 import ViewSource from '../components/view-source'
+import vercel from '../public/vercel.png'
 
 const Code = (p) => <code className={styles.inlineCode} {...p} />
 
@@ -62,6 +63,17 @@ const Index = () => (
         </li>
       </ul>
       <hr className={styles.hr} />
+      <h2 id="placeholder">Placeholder</h2>
+      <p>
+        Adding <Code>placeholder="blur"</Code> to an image enables a blurry
+        placeholder effect while that image loads.
+      </p>
+      <p>
+        <Link href="/background">
+          <a>See an example of the blurry placeholder.</a>
+        </Link>
+      </p>
+      <hr className={styles.hr} />
       <h2 id="internal">Internal Image</h2>
       <p>
         The following is an example of a reference to an interal image from the{' '}
@@ -71,7 +83,7 @@ const Index = () => (
         This image is intentionally large so you have to scroll down to the next
         image.
       </p>
-      <Image alt="Vercel logo" src="/vercel.png" width={1000} height={1000} />
+      <Image alt="Vercel logo" src={vercel} width={1000} height={1000} />
       <hr className={styles.hr} />
       <h2 id="external">External Image</h2>
       <p>

examples/image-component/pages/layout-fill.js

@@ -1,30 +1,26 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
 
 const Fill = () => (
   <div>
     <ViewSource pathname="pages/layout-fill.js" />
     <h1>Image Component With Layout Fill</h1>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
-      <Image
-        alt="Mountains"
-        src="/mountains.jpg"
-        layout="fill"
-        objectFit="cover"
-      />
+      <Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />
     </div>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image
         alt="Mountains"
-        src="/mountains.jpg"
+        src={mountains}
         layout="fill"
         objectFit="contain"
       />
     </div>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image
         alt="Mountains"
-        src="/mountains.jpg"
+        src={mountains}
         layout="fill"
         objectFit="none"
         quality={100}

examples/image-component/pages/layout-fixed.js

@@ -1,13 +1,14 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
 
 const Fixed = () => (
   <div>
     <ViewSource pathname="pages/layout-fixed.js" />
     <h1>Image Component With Layout Fixed</h1>
     <Image
       alt="Mountains"
-      src="/mountains.jpg"
+      src={mountains}
       layout="fixed"
       width={700}
       height={475}

examples/image-component/pages/layout-intrinsic.js

@@ -1,13 +1,14 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
 
 const Intrinsic = () => (
   <div>
     <ViewSource pathname="pages/layout-intrinsic.js" />
     <h1>Image Component With Layout Intrinsic</h1>
     <Image
       alt="Mountains"
-      src="/mountains.jpg"
+      src={mountains}
       layout="intrinsic"
       width={700}
       height={475}

examples/image-component/pages/layout-responsive.js

@@ -1,13 +1,14 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
 
 const Responsive = () => (
   <div>
     <ViewSource pathname="pages/layout-responsive.js" />
     <h1>Image Component With Layout Responsive</h1>
     <Image
       alt="Mountains"
-      src="/mountains.jpg"
+      src={mountains}
       layout="responsive"
       width={700}
       height={475}

examples/image-component/pages/placeholder.js

@@ -0,0 +1,20 @@
+import Image from 'next/image'
+import ViewSource from '../components/view-source'
+import mountains from '../public/mountains.jpg'
+
+const Responsive = () => (
+  <div>
+    <ViewSource pathname="pages/layout-responsive.js" />
+    <h1>Image Component With Layout Responsive</h1>
+    <Image
+      alt="Mountains"
+      src={mountains}
+      layout="responsive"
+      placeholder="blur"
+      width={700}
+      height={475}
+    />
+  </div>
+)
+
+export default Responsive

examples/with-electron/README.md

@@ -4,7 +4,7 @@ This example shows how you can use Next.js inside an Electron application to avo
 
 For development it's going to run an HTTP server and let Next.js handle routing. In production it uses `next export` to pre-generate HTML static files and uses them in your app instead of running an HTTP server.
 
-**You can find a detailed documentation about how to build Electron apps with Next.js [here](https://leo.im/2017/electron-next)!**
+**For detailed documentation about how to build Electron apps with Next.js, see [this blog post](https://leo.im/2017/electron-next)!**
 
 ## How to use
 

examples/with-netlify-cms/content/home.md

@@ -5,4 +5,4 @@ date: 2019-03-17T19:31:20.591Z
 
 ## Welcome to the Home Page
 
-If you want to know more about Next.js + Netlifycms go to the official tutorial [here](https://www.netlifycms.org/docs/nextjs/).
+If you want to know more about Next.js + Netlify CMS go to their [official tutorial](https://www.netlifycms.org/docs/nextjs/).

examples/with-passport/README.md

@@ -4,7 +4,7 @@ This example show how to use [Passport.js](http://www.passportjs.org) with Next.
 
 The example shows how to do a login, signup and logout; and to get the user info using a hook with [SWR](https://swr.vercel.app).
 
-A DB is not included. You can use any db you want and add it [here](lib/user.js).
+A database is not included. You can use any database you want and add it [in this file](lib/user.js).
 
 The login cookie is httpOnly, meaning it can only be accessed by the API, and it's encrypted using [@hapi/iron](https://hapi.dev/family/iron) for more security.
 

examples/with-redux-persist/README.md

@@ -4,6 +4,12 @@ This example shows how to integrate Redux with the power of Redux Persist in Nex
 
 With the advantage of having a global state for your app using `redux`. You'll also require some of your state values to be available offline. There comes `redux-persist` using which you can persist your states in browser's local storage. While there are various ways of persisting your states which you can always find in there [documentation](https://github.com/rt2zz/redux-persist/blob/master/README.md). This is an example of how you can integrate `redux-persist` with redux along with Next.js's universal rendering approach.
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-redux-persist)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

examples/with-rematch/README.md

@@ -2,7 +2,7 @@
 
 This example has two pages. The first page has a counter which can be incremented synchronously or asynchronously. The second page is a page which shows a list of github users. It fetches data from the github api using this [endpoint](api.github.com/users).
 
-Since rematch is utility which uses redux under the hood, some elements like `store.js` and `withRematch` are very similar to the `with-redux` example. Please go through the `with-redux` example [here](https://github.com/vercel/next.js/tree/master/examples/with-redux) before reading further if you are not familiar with how redux is integrated with nextjs. Rematch is just an extension for Redux so a lot of elements are the same.
+Since rematch is utility which uses redux under the hood, some elements like `store.js` and `withRematch` are very similar to the `with-redux` example. Please go through the [`with-redux` example](https://github.com/vercel/next.js/tree/master/examples/with-redux) before reading further if you are not familiar with how redux is integrated with Next.js. Rematch is just an extension for Redux so a lot of elements are the same.
 
 ## Preview
 

examples/with-stencil/packages/test-component/readme.md

@@ -43,7 +43,7 @@ To run the unit tests for the components, run:
 npm test
 ```
 
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+Need help? [Check out our docs](https://stenciljs.com/docs/my-first-component).
 
 ## Naming Components
 

examples/with-unsplash/README.md

@@ -24,7 +24,7 @@ First, you'll need to [create an account on Unsplash](https://unsplash.com/) if
 
 ### Step 1. Create an app on Unsplash
 
-To create a new application on Unsplash, click [here](https://unsplash.com/oauth/applications/new) or go to https://unsplash.com/oauth/applications/new.
+Create a [new application on Unsplash](https://unsplash.com/oauth/applications/new).
 
 Before creating an app you'll have to accept the terms for API use:
 

examples/with-urql/README.md

@@ -2,6 +2,12 @@
 
 Use [urql](https://github.com/FormidableLabs/urql) with Next.js using SSG.
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-urql)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):