Merge branch 'canary' into build-deps/update-styled-jsx

.eslintignore

@@ -2,6 +2,7 @@ node_modules
 **/.next/**
 **/_next/**
 **/dist/**
+e2e-tests/**
 examples/with-typescript-eslint-jest/**
 examples/with-kea/**
 packages/next/bundles/webpack/packages/*.runtime.js
@@ -16,4 +17,5 @@ packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
 test/integration/async-modules/**
+test/integration/eslint/**
 test-timings.json

.github/CODEOWNERS

@@ -1,6 +1,6 @@
 # Learn how to add code owners here:
 # https://help.github.com/en/articles/about-code-owners
 
-*          @timneutkens @Timer @ijjk @lfades @divmain
-/docs/     @timneutkens @Timer @ijjk @lfades @divmain @leerob
-/examples/ @timneutkens @Timer @ijjk @lfades @divmain @leerob
+*          @timneutkens @ijjk @lfades @divmain @shuding
+/docs/     @timneutkens @ijjk @lfades @divmain @shuding @leerob
+/examples/ @timneutkens @ijjk @lfades @divmain @shuding @leerob

.github/pull_request_template.md

@@ -0,0 +1,22 @@
+<!--
+Thanks for opening a PR! Your contribution is much appreciated.
+In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below.
+Choose the right checklist for the change that you're making:
+-->
+
+## Bug
+
+- [ ] Related issues linked using `fixes #number`
+- [ ] Integration tests added
+
+## Feature
+
+- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
+- [ ] Related issues linked using `fixes #number`
+- [ ] Integration tests added
+- [ ] Documentation added
+- [ ] Telemetry added. In case of a feature if it's used or not.
+
+## Documentation / Examples
+
+- [ ] Make sure the linting passes

contributing.md

@@ -3,7 +3,7 @@
 Our Commitment to Open Source can be found [here](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`
+2. Create a new branch: `git checkout -b MY_BRANCH_NAME`
 3. Install yarn: `npm install -g yarn`
 4. Install the dependencies: `yarn`
 5. Run `yarn dev` to build and watch for code changes

docs/advanced-features/custom-error-page.md

@@ -21,11 +21,26 @@ export default function Custom404() {
 }
 ```
 
+> **Note**: You can use [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) inside this page if you need to fetch data at build time.
+
 ## 500 Page
 
-By default Next.js provides a 500 error page that matches the default 404 page’s style. This page is not statically optimized as it allows server-side errors to be reported. This is why 404 and 500 (other errors) are separated.
+Server-rendering an error page for every visit adds complexity to responding to errors. To help users get responses to errors as fast as possible, Next.js provides a static 500 page by default without having to add any additional files.
+
+### Customizing The 500 Page
+
+To customize the 500 page you can create a `pages/500.js` file. This file is statically generated at build time.
+
+```jsx
+// pages/500.js
+export default function Custom500() {
+  return <h1>500 - Server-side error occurred</h1>
+}
+```
+
+> **Note**: You can use [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) inside this page if you need to fetch data at build time.
 
-### Customizing The Error Page
+### More Advanced Error Page Customizing
 
 500 errors are handled both client-side and server-side by the `Error` component. If you wish to override it, define the file `pages/_error.js` and add the following code:
 

docs/advanced-features/custom-server.md

@@ -15,7 +15,7 @@ description: Start a Next.js app programmatically using a custom server.
   </ul>
 </details>
 
-Typically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to use custom route patterns.
+By default, Next.js includes its own server with `next start`. If you have an existing backend, you can still use it with Next.js (this is not a custom server). A custom Next.js server allows you to start a server 100% programmatically in order to use custom server patterns. Most of the time, you will not need this – but it's available for complete customization.
 
 > A custom server **can not** be deployed on [Vercel](https://vercel.com/solutions/nextjs), the platform Next.js was made for.
 

docs/advanced-features/customizing-babel-config.md

@@ -13,7 +13,7 @@ description: Extend the babel preset added by Next.js with your own configs.
 
 Next.js includes the `next/babel` preset to your app, which includes everything needed to compile React applications and server-side code. But if you want to extend the default Babel configs, it's also possible.
 
-To start, you only need to define a `.babelrc` file at the top of your app. If such a file is found, it will be considered as the _source of truth_, and therefore it needs to define what Next.js needs as well, which is the `next/babel` preset.
+To start, you only need to define a `.babelrc` file (or `babel.config.js`) at the top of your app. If such a file is found, it will be considered as the _source of truth_, and therefore it needs to define what Next.js needs as well, which is the `next/babel` preset.
 
 Here's an example `.babelrc` file:
 

docs/advanced-features/i18n-routing.md

@@ -217,9 +217,9 @@ export default function IndexPage(props) {
 
 ## Leveraging the NEXT_LOCALE cookie
 
-Next.js supports overriding the accept-language header with a `NEXT_LOCALE=the-locale` cookie. This cookie can be set using a language switcher and then when a user comes back to the site it will leverage the locale specified in the cookie.
+Next.js supports overriding the accept-language header with a `NEXT_LOCALE=the-locale` cookie. This cookie can be set using a language switcher and then when a user comes back to the site it will leverage the locale specified in the cookie when redirecting from `/` to the correct locale location.
 
-For example, if a user prefers the locale `fr` but a `NEXT_LOCALE=en` cookie is set the `en` locale will be used instead until the cookie is removed or expired.
+For example, if a user prefers the locale `fr` in their accept-language header but a `NEXT_LOCALE=en` cookie is set the `en` locale when visiting `/` the user will be redirected to the `en` locale location until the cookie is removed or expired.
 
 ## Search Engine Optimization
 

docs/advanced-features/module-path-aliases.md

@@ -15,6 +15,8 @@ Next.js automatically supports the `tsconfig.json` and `jsconfig.json` `"paths"`
 
 > Note: `jsconfig.json` can be used when you don't use TypeScript
 
+> Note: you need to restart dev server to reflect modifications done in `tsconfig.json` / `jsconfig.json`
+
 These options allow you to configure module aliases, for example a common pattern is aliasing certain directories to use absolute paths.
 
 One useful feature of these options is that they integrate automatically into certain editors, for example vscode.

docs/advanced-features/preview-mode.md

@@ -16,6 +16,7 @@ description: Next.js has the preview mode for statically generated pages. You ca
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prismic">Prismic Example</a> (<a href="https://next-blog-prismic.now.sh/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-contentful">Contentful Example</a> (<a href="https://next-blog-contentful.now.sh/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-strapi">Strapi Example</a> (<a href="https://next-blog-strapi.now.sh/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prepr">Prepr Example</a> (<a href="https://next-blog-prepr.now.sh/">Demo</a>)</li>    
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms">Agility CMS Example</a> (<a href="https://next-blog-agilitycms.now.sh/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic">Cosmic Example</a> (<a href="https://next-blog-cosmic.now.sh/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms">ButterCMS Example</a> (<a href="https://next-blog-buttercms.now.sh/">Demo</a>)</li>

docs/advanced-features/source-maps.md

@@ -4,7 +4,7 @@ description: Enables browser source map generation during the production build.
 
 # Source Maps
 
-Source Maps are enabled by default during development. During production builds they are disabled as generation source maps can significantly increase build times and memory usage while being generated.
+Source Maps are enabled by default during development. During production builds, they are disabled as generating source maps can significantly increase build times and memory usage while being generated.
 
 Next.js provides a configuration flag you can use to enable browser source map generation during the production build:
 
@@ -15,9 +15,9 @@ module.exports = {
 }
 ```
 
-When the `productionBrowserSourceMaps` option is enabled the source maps will be output in the same directory as the JavaScript files, Next.js will automatically serve these files when requested.
+When the `productionBrowserSourceMaps` option is enabled, the source maps will be output in the same directory as the JavaScript files. Next.js will automatically serve these files when requested.
 
 ## Caveats
 
-- Can increase `next build` time
+- Adding source maps can increase `next build` time
 - Increases memory usage during `next build`

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

@@ -22,7 +22,7 @@ Note: this value must be set at build time and can not be changed without re-bui
 
 When linking to other pages using `next/link` and `next/router` the `basePath` will be automatically applied.
 
-For example using `/about` will automatically become `/docs/about` when `basePath` is set to `/docs`.
+For example, using `/about` will automatically become `/docs/about` when `basePath` is set to `/docs`.
 
 ```js
 export default function HomePage() {
@@ -43,3 +43,30 @@ Output html:
 ```
 
 This makes sure that you don't have to change all links in your application when changing the `basePath` value.
+
+## Images
+
+When using the [`next/image`](/docs/api-reference/next/image.md) component, you will need to add the `basePath` in front of `src`.
+
+For example, using `/docs/me.png` will properly serve your image when `basePath` is set to `/docs`.
+
+```jsx
+import Image from 'next/image'
+
+function Home() {
+  return (
+    <>
+      <h1>My Homepage</h1>
+      <Image
+        src="/docs/me.png"
+        alt="Picture of the author"
+        width={500}
+        height={500}
+      />
+      <p>Welcome to my homepage!</p>
+    </>
+  )
+}
+
+export default Home
+```

docs/api-reference/next.config.js/eslint-warnings-errors.md

@@ -0,0 +1,70 @@
+---
+description: Learn how to opt-in and out of ESLint during development mode and production builds.
+---
+
+# ESLint Warnings and Errors
+
+## During builds
+
+Next.js fails your **production build** (`next build`) when ESLint errors are present in your
+project.
+
+If you'd like Next.js to dangerously produce production code even when your application has errors,
+you can disable ESLint running during the build process.
+
+> It's recommended to run ESLint as part of the production build process to ensure your application
+> is resilient against runtime issues.
+
+Open `next.config.js` and disable the `build` option in the `eslint` config:
+
+```js
+module.exports = {
+  eslint: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has ESLint errors.
+    // !! WARN !!
+    build: false,
+  },
+}
+```
+
+## During development
+
+By default, Next.js does not run ESLint during **development** (`next dev`).
+
+If you would like Next.js to lint files separately in development mode, you can enable it in your
+configuration.
+
+> Enabling ESLint during development mode will slow down how fast pages are compiled. Until this is
+> optimized, we recommend that you [integrate ESLint in your code
+> editor](https://eslint.org/docs/user-guide/integrations#editors).
+
+Open `next.config.js` and enable the `dev` option in the `eslint` config:
+
+```js
+module.exports = {
+  eslint: {
+    // !! WARN !!
+    // This can slow down how long pages take to compile during development
+    // !! WARN !!
+    dev: true,
+  },
+}
+```
+
+## Related
+
+<div class="card">
+  <a href="/docs/api-reference/next.config.js/introduction.md">
+    <b>Introduction to next.config.js:</b>
+    <small>Learn more about the configuration file used by Next.js.</small>
+  </a>
+</div>
+
+<div class="card">
+  <a href="/docs/basic-features/eslint.md">
+    <b>ESLint:</b>
+    <small>Learn more about how to use ESLint in Next.js.</small>
+  </a>
+</div>