Merge remote-tracking branch 'upstream/canary' into update/spr-data-r…

…oute

contributing.md

@@ -7,7 +7,7 @@ Our Commitment to Open Source can be found [here](https://zeit.co/blog/oss)
 3. Install the dependencies: `yarn`
 4. Run `yarn dev` to build and watch for code changes
 5. In a new terminal, run `yarn types` to compile declaration files from TypeScript
-6. The development branch is `canary`. On a release, the relevant parts of the changes in the `canary` branch are rebased into `master`.
+6. The development branch is `canary` (this is the branch pull requests should be made against). On a release, the relevant parts of the changes in the `canary` branch are rebased into `master`.
 
 > You may need to run `yarn types` again if your types get outdated.
 

errors/can-not-output-to-public.md

@@ -0,0 +1,15 @@
+# Cannot output to /public
+
+#### Why This Error Occurred
+
+Either you set `distDir` to `public` in your `next.config.js` or during `next export` you tried to export to the `public` directory.
+
+This is not allowed due to `public` being a special folder in Next.js used to serve static assets.
+
+#### Possible Ways to Fix It
+
+Use a different `distDir` or export to a different folder.
+
+### Useful Links
+
+- [Static file serving docs](https://nextjs.org/docs#static-file-serving-eg-images)

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
 

errors/static-dir-deprecated.md

@@ -0,0 +1,38 @@
+# Static directory is deprecated
+
+#### Why This Error Occurred
+
+In versions prior to 9.0.6 the `static` directory was used to serve static assets in a Next.js application. This has been deprecated in favor of a `public` directory.
+
+The reason we want to support a `public` directory instead is to not require the `/static` prefix for assets anymore and there is no reason to maintain both paths.
+
+#### Possible Ways to Fix It
+
+You can move your `static` directory inside of the `public` directory and all URLs will remain the same as they were before.
+
+**Before**
+
+```sh
+static/
+  my-image.jpg
+pages/
+  index.js
+components/
+  my-image.js
+```
+
+**After**
+
+```sh
+public/
+  static/
+    my-image.jpg
+pages/
+  index.js
+components/
+  my-image.js
+```
+
+### Useful Links
+
+- [Static file serving docs](https://nextjs.org/docs#static-file-serving-eg-images)

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.