Merge branch 'canary' into add-good-first-issue-section-to-readme

vercel · May 18, 2021 · 71ad268 · 71ad268
2 parents b45ddd1 + fa5d41b
commit 71ad268
Show file tree

Hide file tree

Showing 69 changed files with 1,295 additions and 486 deletions.
diff --git a/data.sqlite b/data.sqlite
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,7 +72,7 @@ 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)
+- `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. 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:
 
@@ -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/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/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/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.2.1-canary.5"
+  "version": "10.2.1-canary.10"
 }
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/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/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.1-canary.10",
   "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.1-canary.10",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",

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/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.1-canary.10",
   "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.1-canary.10",
   "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.1-canary.10",
   "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.1-canary.10",
   "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.1-canary.10",
   "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.1-canary.10",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.1-canary.10",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "10.2.1-canary.5",
+  "version": "10.2.1-canary.10",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next/build/babel/preset.ts b/packages/next/build/babel/preset.ts
@@ -41,7 +41,6 @@ type NextBabelPresetOptions = {
   'preset-react'?: any
   'class-properties'?: any
   'transform-runtime'?: any
-  'experimental-modern-preset'?: PluginItem
   'styled-jsx'?: StyledJsxBabelOptions
   'preset-typescript'?: any
 }
@@ -89,10 +88,6 @@ export default (
     (Boolean(api.caller((caller: any) => !!caller && caller.hasJsxRuntime)) &&
       options['preset-react']?.runtime !== 'classic')
 
-  const isLaxModern =
-    options['preset-env']?.targets &&
-    options['preset-env'].targets.esmodules === true
-
   const presetEnvConfig = {
     // In the test environment `modules` is often needed to be set to true, babel figures that out by itself using the `'auto'` option
     // In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking
@@ -122,17 +117,10 @@ export default (
     }
   }
 
-  // specify a preset to use instead of @babel/preset-env
-  const customModernPreset =
-    isLaxModern && options['experimental-modern-preset']
-
   return {
     sourceType: 'unambiguous',
     presets: [
-      customModernPreset || [
-        require('next/dist/compiled/babel/preset-env'),
-        presetEnvConfig,
-      ],
+      [require('next/dist/compiled/babel/preset-env'), presetEnvConfig],
       [
         require('next/dist/compiled/babel/preset-react'),
         {

diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
@@ -58,7 +58,7 @@ export type WebpackEntrypoints = {
     | string[]
     | {
         import: string | string[]
-        dependOn: string | string[]
+        dependOn?: string | string[]
       }
 }