Merge branch 'canary' into eslint/next-script-for-ga

vercel · May 20, 2021 · 404c23d · 404c23d
2 parents e58344c + 1f9e958
commit 404c23d
Show file tree

Hide file tree

Showing 97 changed files with 1,925 additions and 655 deletions.
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
@@ -86,7 +86,7 @@ stages:
               path: $(System.DefaultWorkingDirectory)
             displayName: Cache Build
           - script: |
-              yarn testie --forceExit test/integration/production/ test/integration/css-client-nav/
+              yarn testie --forceExit test/integration/production/ test/integration/css-client-nav/ test/integration/rewrites-has-condition/
             displayName: 'Run tests'
 
       - job: test_unit

diff --git a/data.sqlite b/data.sqlite
diff --git a/docs/api-reference/create-next-app.md b/docs/api-reference/create-next-app.md
@@ -18,7 +18,7 @@ yarn create next-app
 
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
-- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app`
 
 ### Why use Create Next App?
 

diff --git a/docs/api-reference/next.config.js/custom-webpack-config.md b/docs/api-reference/next.config.js/custom-webpack-config.md
@@ -23,10 +23,6 @@ In order to extend our usage of `webpack`, you can define a function that extend
 ```js
 module.exports = {
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
-    // Note: we provide webpack above so you should not `require` it
-    // Perform customizations to webpack config
-    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
-
     // Important: return the modified config
     return config
   },

diff --git a/docs/api-reference/next.config.js/rewrites.md b/docs/api-reference/next.config.js/rewrites.md
@@ -25,8 +25,6 @@ Rewrites allow you to map an incoming request path to a different destination pa
 
 Rewrites act as a URL proxy and mask the destination path, making it appear the user hasn't changed their location on the site. In contrast, [redirects](/docs/api-reference/next.config.js/redirects.md) will reroute to a new page a show the URL changes.
 
-Rewrites are only available on the Node.js environment and do not affect client-side routing.
-
 To use rewrites you can use the `rewrites` key in `next.config.js`:
 
 ```js
@@ -42,6 +40,8 @@ module.exports = {
 }
 ```
 
+Rewrites are applied to client-side routing, a `<Link href="/about">` will have the rewrite applied in the above example.
+
 `rewrites` is an async function that expects an array to be returned holding objects with `source` and `destination` properties:
 
 - `source`: `String` - is the incoming request path pattern.
@@ -58,8 +58,8 @@ module.exports = {
     return {
       beforeFiles: [
         // These rewrites are checked after headers/redirects
-        // and before pages/public files which allows overriding
-        // page files
+        // and before all files including _next/public files which
+        // allows overriding page files
         {
           source: '/some-page',
           destination: '/somewhere-else',

diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
@@ -101,8 +101,7 @@ When `responsive`, the image will scale the dimensions down for smaller
 viewports and scale up for larger viewports.
 
 When `fill`, the image will stretch both width and height to the dimensions of
-the parent element, usually paired with
-[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+the parent element, usually paired with the [`objectFit`](#objectFit) property.
 
 Try it out:
 

diff --git a/docs/basic-features/data-fetching.md b/docs/basic-features/data-fetching.md
@@ -72,8 +72,8 @@ The `context` parameter is an object containing the following keys:
 
 `getStaticProps` should return an object with:
 
-- `props` - A **required** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
-- `revalidate` - An **optional** amount in seconds after which a page re-generation can occur. More on [Incremental Static Regeneration](#incremental-static-regeneration)
+- `props` - An **optional** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
+- `revalidate` - An **optional** amount in seconds after which a page re-generation can occur (defaults to: `false` or no revalidating). More on [Incremental Static Regeneration](#incremental-static-regeneration)
 - `notFound` - An **optional** boolean value to allow the page to return a 404 status and page. Below is an example of how it works:
 
   ```js
@@ -672,7 +672,7 @@ The `context` parameter is an object containing the following keys:
 
 `getServerSideProps` should return an object with:
 
-- `props` - A **required** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
+- `props` - An **optional** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
 - `notFound` - An **optional** boolean value to allow the page to return a 404 status and page. Below is an example of how it works:
 
   ```js

diff --git a/docs/basic-features/typescript.md b/docs/basic-features/typescript.md
@@ -127,3 +127,26 @@ export default MyApp
 Next.js automatically supports the `tsconfig.json` `"paths"` and `"baseUrl"` options.
 
 You can learn more about this feature on the [Module Path aliases documentation](/docs/advanced-features/module-path-aliases.md).
+
+## Type checking next.config.js
+
+The `next.config.js` file must be a JavaScript file as it does not get parsed by Babel or TypeScript, however you can add some type checking in your IDE using JSDoc as below:
+
+```js
+// @ts-check
+
+/**
+ * @type {import('next/dist/next-server/server/config').NextConfig}
+ **/
+const nextConfig = {
+  /* config options here */
+}
+
+module.exports = nextConfig
+```
+
+## Incremental type checking
+
+Since `v10.2.1` Next.js supports [incremental type checking](https://www.typescriptlang.org/tsconfig#incremental) when enabled in your `tsconfig.json`, this can help speed up type checking in larger applications.
+
+It is highly recommended to be on at least `v4.3.0-beta` of TypeScript to experience the best performance when leveraging this feature.
diff --git a/errors/no-img-element.md b/errors/no-img-element.md
@@ -0,0 +1,32 @@
+# No Img Element
+
+### Why This Error Occurred
+
+An HTML `<img>` element was used to display an image. For better performance and automatic image optimization, use Next.js' built-in image component instead.
+
+### Possible Ways to Fix It
+
+Import and use the `<Image />` component:
+
+```jsx
+import { Image } from 'next/image'
+
+function Home() {
+  return (
+    <>
+      <Image
+        src="https://example.com/test"
+        alt="Landscape picture"
+        width={500}
+        height={500}
+      />
+    </>
+  )
+}
+
+export default Home
+```
+
+### Useful Links
+
+- [Image Component and Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)
diff --git a/errors/no-sync-scripts.md b/errors/no-sync-scripts.md
@@ -16,7 +16,7 @@ import Script from 'next/experimental-script'
 const Home = () => {
   return (
     <div class="container">
-      <Script src="https://third-party-script.js" strategy="defer"></Script>
+      <Script src="https://third-party-script.js"></Script>
       <div>Home Page</div>
     </div>
   )

diff --git a/examples/cms-ghost/README.md b/examples/cms-ghost/README.md
@@ -2,7 +2,7 @@
 
 This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Ghost](https://ghost.org/) as the data source.
 
-> This boilerplate demonstrates simple usage and best practices. If you are looking for a more feature richt Next.js generator for Ghost including the Casper theme,
+> This boilerplate demonstrates simple usage and best practices. If you are looking for a more feature rich Next.js generator for Ghost including the Casper theme,
 > check out [next-cms-ghost](https://github.com/styxlab/next-cms-ghost).
 
 ## Deploy your own

diff --git a/examples/with-supertokens/package.json b/examples/with-supertokens/package.json
@@ -11,7 +11,7 @@
     "next": "latest",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "supertokens-auth-react": "^0.12.0",
+    "supertokens-auth-react": "^0.13.0",
     "supertokens-node": "^5.0.0"
   },
   "license": "MIT"

diff --git a/examples/with-supertokens/pages/index.js b/examples/with-supertokens/pages/index.js
@@ -42,13 +42,17 @@ export default function Home(props) {
 function ProtectedPage({ userId }) {
   async function logoutClicked() {
     await ThirdPartyEmailPassword.signOut()
-    window.location.href = '/auth'
+    ThirdPartyEmailPassword.redirectToAuth()
   }
 
   async function fetchUserData() {
     const res = await fetch('/api/user')
-    const json = await res.json()
-    alert(JSON.stringify(json))
+    if (res.status === 401) {
+      ThirdPartyEmailPassword.redirectToAuth()
+    } else {
+      const json = await res.json()
+      alert(JSON.stringify(json))
+    }
   }
 
   return (

diff --git a/examples/with-tailwindcss/pages/index.js b/examples/with-tailwindcss/pages/index.js
@@ -8,7 +8,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="flex flex-col items-center justify-center flex-1 px-20 text-center">
+      <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
         <h1 className="text-6xl font-bold">
           Welcome to{' '}
           <a className="text-blue-600" href="https://nextjs.org">

diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.2.1-canary.5"
+  "version": "10.2.2"
 }
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "image-size": "0.9.3",
     "is-animated": "2.0.0",
     "isomorphic-unfetch": "3.0.0",
+    "jest": "27.0.0-next.8",
     "ky": "0.19.1",
     "ky-universal": "0.6.0",
     "lerna": "4.0.0",
@@ -119,6 +120,8 @@
     "selenium-standalone": "6.18.0",
     "selenium-webdriver": "4.0.0-alpha.7",
     "shell-quote": "1.7.2",
+    "sqlite": "4.0.22",
+    "sqlite3": "5.0.2",
     "styled-components": "5.1.0",
     "styled-jsx-plugin-postcss": "3.0.2",
     "tailwindcss": "1.1.3",
@@ -128,12 +131,11 @@
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
     "webpack-bundle-analyzer": "4.3.0",
-    "worker-loader": "3.0.7",
-    "jest": "27.0.0-next.8"
+    "worker-loader": "3.0.7"
   },
   "resolutions": {
-    "browserslist": "4.16.1",
-    "caniuse-lite": "1.0.30001179"
+    "browserslist": "4.16.6",
+    "caniuse-lite": "1.0.30001228"
   },
   "engines": {
     "node": ">= 10.13.0"

diff --git a/packages/create-next-app/README.md b/packages/create-next-app/README.md
@@ -19,7 +19,7 @@ npx create-next-app blog-app
 - **--ts, --typescript** - Initialize as a TypeScript project.
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path &lt;path-to-example&gt;** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
-- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app`
 
 ## Why use Create Next App?
 

diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts
@@ -212,7 +212,7 @@ export async function createApp({
      * TypeScript projects will have type definitions and other devDependencies.
      */
     if (typescript) {
-      devDependencies.push('typescript', '@types/react', '@types/next')
+      devDependencies.push('typescript', '@types/react')
     }
     /**
      * Install package.json dependencies if they exist.

diff --git a/packages/create-next-app/helpers/install.ts b/packages/create-next-app/helpers/install.ts
@@ -30,7 +30,7 @@ export function install(
   /**
    * NPM-specific command-line flags.
    */
-  const npmFlags: string[] = ['--logLevel', 'error']
+  const npmFlags: string[] = []
   /**
    * Yarn-specific command-line flags.
    */

diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.2",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.2",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "^10.1.3",
+    "@next/eslint-plugin-next": "10.2.2",
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",

diff --git a/packages/eslint-plugin-next/lib/index.js b/packages/eslint-plugin-next/lib/index.js
@@ -3,6 +3,7 @@ module.exports = {
     'no-css-tags': require('./rules/no-css-tags'),
     'no-sync-scripts': require('./rules/no-sync-scripts'),
     'no-html-link-for-pages': require('./rules/no-html-link-for-pages'),
+    'no-img-element': require('./rules/no-img-element'),
     'no-unwanted-polyfillio': require('./rules/no-unwanted-polyfillio'),
     'no-page-custom-font': require('./rules/no-page-custom-font'),
     'no-title-in-document-head': require('./rules/no-title-in-document-head'),
@@ -19,6 +20,7 @@ module.exports = {
         '@next/next/no-css-tags': 1,
         '@next/next/no-sync-scripts': 1,
         '@next/next/no-html-link-for-pages': 1,
+        '@next/next/no-img-element': 1,
         '@next/next/no-unwanted-polyfillio': 1,
         '@next/next/no-page-custom-font': 1,
         '@next/next/no-title-in-document-head': 1,

diff --git a/packages/eslint-plugin-next/lib/rules/no-img-element.js b/packages/eslint-plugin-next/lib/rules/no-img-element.js
@@ -0,0 +1,29 @@
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prohibit usage of HTML <img> element',
+      category: 'HTML',
+      recommended: true,
+    },
+    fixable: 'code',
+  },
+
+  create: function (context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.name !== 'img') {
+          return
+        }
+
+        if (node.attributes.length === 0) {
+          return
+        }
+
+        context.report({
+          node,
+          message: `Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.`,
+        })
+      },
+    }
+  },
+}
diff --git a/packages/eslint-plugin-next/lib/rules/no-page-custom-font.js b/packages/eslint-plugin-next/lib/rules/no-page-custom-font.js
@@ -46,7 +46,7 @@ module.exports = {
           context.report({
             node,
             message:
-              'Custom fonts should be added at the document level. See https://nextjs.org/docs/messages/no-page-custom-font.',
+              'Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font.',
           })
         }
       },

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.2",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.2",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.2",
   "keywords": [
     "react",
     "next",

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.2",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"