Merge remote-tracking branch 'upstream/canary' into de-experimentaliz…

…e-public

azure-pipelines.yml

@@ -3,36 +3,39 @@ pool:
 
 variables:
   NEXT_TELEMETRY_DISABLED: '1'
+  YARN_CACHE_FOLDER: $(Pipeline.Workspace)/.yarn
 
 strategy:
   maxParallel: 10
   matrix:
     node-10-1:
-      group: 1/2
+      group: 1/4
       node_version: ^10.10.0
     node-10-2:
-      group: 2/2
+      group: 2/4
+      node_version: ^10.10.0
+    node-10-3:
+      group: 3/4
+      node_version: ^10.10.0
+    node-10-4:
+      group: 4/4
       node_version: ^10.10.0
-    node-8-1:
-      group: 1/2
-      node_version: ^8.12.0
-    node-8-2:
-      group: 2/2
-      node_version: ^8.12.0
 
 steps:
   - task: NodeTool@0
     inputs:
       versionSpec: $(node_version)
     displayName: 'Install Node.js'
 
-  - script: |
-      yarn install
-    displayName: 'Install dependencies'
+  - task: CacheBeta@0
+    inputs:
+      key: yarn | $(Agent.OS) | yarn.lock
+      path: $(YARN_CACHE_FOLDER)
+    displayName: Cache Yarn packages
 
   - script: |
-      yarn check
-    displayName: 'Yarn check'
+      yarn --frozen-lockfile --check-files
+    displayName: 'Install dependencies'
 
   - script: |
       node run-tests.js -c 2 -g $(group)

errors/empty-object-getInitialProps.md

@@ -2,12 +2,12 @@
 
 #### Why This Error Occurred
 
-In one of your page components you added a `getInitialProps` that returned an empty object. This de-optimizes automatic prerendering. If you **meant** to do this and understand the **consequences** you can ignore this message as it is only shown in development.
+In one of your page components you added a `getInitialProps` that returned an empty object. This de-optimizes automatic static optimization. If you **meant** to do this and understand the **consequences** you can ignore this message as it is only shown in development.
 
 #### Possible Ways to Fix It
 
 Look for any page's using `getInitialProps` that return an empty object `{}`. You might also need to update higher order components (HOCs) to only add `getInitialProps` if they are present on the passed component.
 
 ### Useful Links
 
-- [Automatic Prerendering Documentation](https://nextjs.org/docs/#automatic-prerendering)
+- [Automatic Static Optimization Documentation](https://nextjs.org/docs/#automatic-static-optimization)

errors/global-css.md

@@ -0,0 +1,11 @@
+# Global CSS Must Be in Your Custom <App>
+
+#### Why This Error Occurred
+
+An attempt to import Global CSS from a file other than `pages/_app.js` was made.
+
+Global CSS cannot be used in files other than your Custom `<App>` due to its side-effects and ordering problems.
+
+#### Possible Ways to Fix It
+
+Relocate all Global CSS imports to your `pages/_app.js` file.

errors/opt-out-auto-static-optimization.md

@@ -0,0 +1,35 @@
+# Opt-out of Automatic Static Optimization
+
+#### Why This Warning Occurred
+
+You are using `getInitialProps` in your [Custom `<App>`](https://nextjs.org/docs#custom-app).
+
+This causes **all pages** to be executed on the server -- disabling [Automatic Static Optimization](https://nextjs.org/docs#automatic-static-optimization).
+
+#### Possible Ways to Fix It
+
+Be sure you meant to use `getInitialProps` in `pages/_app`!
+There are some valid use cases for this, but it is often better to handle `getInitialProps` on a _per-page_ basis.
+
+If you previously copied the [Custom `<App>`](https://nextjs.org/docs#custom-app) example, you may be able to remove your `getInitialProps`.
+
+The following `getInitialProps` does nothing and may be removed:
+
+```js
+class MyApp extends App {
+  // Remove me, I do nothing!
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  render() {
+    // ...
+  }
+}
+```

errors/opt-out-automatic-prerendering.md

@@ -1,10 +1,10 @@
-# Opt-out of Automatic Prerendering
+# Opt-out of Automatic Static Optimization
 
 #### Why This Warning Occurred
 
 You are using `getInitialProps` in your [Custom `<App>`](https://nextjs.org/docs#custom-app).
 
-This causes **all pages** to be executed on the server -- disabling [Automatic Prerendering](https://nextjs.org/docs#automatic-prerendering).
+This causes **all pages** to be executed on the server -- disabling [Automatic Static Optimization](https://nextjs.org/docs#automatic-static-optimization).
 
 #### Possible Ways to Fix It
 

examples/amp-story/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+.next
+node_modules

examples/amp-story/README.md

@@ -0,0 +1,42 @@
+# Google AMP Story
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example amp-story amp-app
+# or
+yarn create next-app --example amp-story amp-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/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 [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to create an AMP page with `amp-story` using Next.js and the AMP feature.

examples/amp-story/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "amp-story",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "license": "ISC"
+}

examples/amp-story/pages/index.js

@@ -0,0 +1,123 @@
+import Head from 'next/head'
+
+export const config = { amp: true }
+
+export default () => (
+  <>
+    <Head>
+      <title>Example AMP Story in Next.js</title>
+      <script
+        async
+        key='amp-story'
+        custom-element='amp-story'
+        src='https://cdn.ampproject.org/v0/amp-story-1.0.js'
+      />
+      <script
+        async
+        key='amp-video'
+        custom-element='amp-video'
+        src='https://cdn.ampproject.org/v0/amp-video-0.1.js'
+      />
+    </Head>
+
+    <amp-story
+      standalone=''
+      title='Stories in AMP - Hello World'
+      publisher='AMP Project'
+      publisher-logo-src='https://amp.dev/favicons/coast-228x228.png'
+      poster-portrait-src='https://amp.dev/static/samples/img/story_dog2_portrait.jpg'
+      poster-square-src='https://amp.dev/static/samples/img/story_dog2_square.jpg'
+      poster-landscape-src='https://amp.dev/static/samples/img/story_dog2_landscape.jpg'
+    >
+      {/* <!-- A story consists of one or more pages. Each page is declared by an `amp-story-page` element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading. --> */}
+      <amp-story-page id='page-1'>
+        <amp-story-grid-layer template='fill'>
+          <amp-img
+            src='https://amp.dev/static/samples/img/story_dog2.jpg'
+            width='720'
+            height='1280'
+            layout='responsive'
+          />
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template='vertical'>
+          <h1>Hello World</h1>
+          <p>This is an AMP Story.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      {/* <!-- Here we have a page consisting of a video which autoplays and loops. --> */}
+      <amp-story-page id='page-2'>
+        <amp-story-grid-layer template='fill'>
+          <amp-video
+            autoplay=''
+            loop=''
+            width='720'
+            height='960'
+            poster='https://amp.dev/static/samples/img/story_video_dog_cover.jpg'
+            layout='responsive'
+          >
+            <source
+              src='https://amp.dev/static/samples/video/story_video_dog.mp4'
+              type='video/mp4'
+            />
+          </amp-video>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      {/* <!-- Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the `animate-in-duration` and `animate-in-delay` properties. The [animations sample](/documentation/examples/visual-effects/amp_story_animations/) shows all available animantions in action. --> */}
+      <amp-story-page id='animation-demo'>
+        <amp-story-grid-layer template='fill'>
+          <amp-img
+            src='https://amp.dev/static/samples/img/story_dog4.jpg'
+            animate-in='fly-in-top'
+            width='720'
+            height='1280'
+            layout='responsive'
+          />
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template='thirds'>
+          <h2
+            animate-in='fly-in-bottom'
+            grid-area='lower-third'
+            animate-in-delay='0.4s'
+          >
+            Best walk ever!
+          </h2>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      {/* <!-- Stories can use predefined layouts to style the page. Here we're using the `thirds` template. For an overview about the available layouts take a look at the [layouts sample](/documentation/examples/style-layout/amp_story_layouts/). --> */}
+      <amp-story-page id='layout-demo'>
+        <amp-story-grid-layer template='thirds'>
+          <amp-img
+            grid-area='upper-third'
+            src='https://amp.dev/static/samples/img/story_thirds_1.jpg'
+            width='560'
+            height='420'
+            layout='responsive'
+          />
+          <amp-img
+            grid-area='middle-third'
+            src='https://amp.dev/static/samples/img/story_thirds_2.jpg'
+            width='560'
+            height='420'
+            layout='responsive'
+          />
+          <amp-img
+            grid-area='lower-third'
+            src='https://amp.dev/static/samples/img/story_thirds_3.jpg'
+            width='560'
+            height='420'
+            layout='responsive'
+          />
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      {/* <!-- A "bookend" panel containing links to other resources will appear on the last page of your story if you include an `amp-story-bookend` that references a [bookend JSON config](/static/samples/json/bookend.json). --> */}
+      <amp-story-bookend
+        src='https://amp.dev/static/samples/json/bookend.json'
+        layout='nodisplay'
+      />
+    </amp-story>
+  </>
+)

examples/amp/README.md

@@ -39,4 +39,4 @@ now
 
 ## The idea behind the example
 
-This example shows how to create AMP pages using Next.js and the experimental AMP feature. It shows a normal page (non-AMP), an AMP only page, and a hybrid AMP page.
+This example shows how to create AMP pages using Next.js and the AMP feature. It shows a normal page (non-AMP), an AMP only page, and a hybrid AMP page.

examples/api-routes-apollo-server-and-client/apollo/client.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import Head from 'next/head'
 import { ApolloProvider } from '@apollo/react-hooks'
 import { ApolloClient } from 'apollo-client'
@@ -16,10 +16,7 @@ let apolloClient = null
  */
 export function withApollo (PageComponent, { ssr = true } = {}) {
   const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
-    const client = useMemo(
-      () => apolloClient || initApolloClient(apolloState),
-      []
-    )
+    const client = apolloClient || initApolloClient(apolloState)
     return (
       <ApolloProvider client={client}>
         <PageComponent {...pageProps} />

examples/auth0/.env.template

@@ -0,0 +1,6 @@
+AUTH0_CLIENT_ID=
+AUTH0_DOMAIN=
+AUTH0_CLIENT_SECRET=
+REDIRECT_URI=
+POST_LOGOUT_REDIRECT_URI=
+SESSION_COOKIE_SECRET=

examples/auth0/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.env
+.next