Merge branch 'canary' into create-next-app-page-type

.eslintignore

@@ -6,6 +6,10 @@ e2e-tests/**
 examples/with-eslint/**
 examples/with-typescript-eslint-jest/**
 examples/with-kea/**
+examples/with-custom-babel-config/**
+examples/with-flow/**
+examples/with-mobx-state-tree/**
+examples/with-mobx/**
 packages/next/bundles/webpack/packages/*.runtime.js
 packages/next/compiled/**/*
 packages/react-refresh-utils/**/*.js
@@ -18,6 +22,5 @@ packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
 packages/create-next-app/templates/**
-test/integration/async-modules/**
 test/integration/eslint/**
 test-timings.json

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": ["react", "react-hooks", "jest", "import"],
   "env": {
     "browser": true,
@@ -9,10 +9,17 @@
     "node": true
   },
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "requireConfigFile": false,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
+    },
+    "babelOptions": {
+      "presets": ["@babel/preset-env", "@babel/preset-react"],
+      "caller": {
+        // Eslint supports top level await when a parser for it is included. We enable the parser by default for Babel.
+        "supportsTopLevelAwait": true
+      }
     }
   },
   "settings": {

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

@@ -89,6 +89,15 @@ module.exports = {
 
 Note: rewrites in `beforeFiles` do not check the filesystem/dynamic routes immediately after matching a source, they continue until all `beforeFiles` have been checked.
 
+The order Next.js routes are checked is:
+
+1. [headers](/docs/api-reference/next.config.js/headers) are checked/applied
+2. [redirects](/docs/api-reference/next.config.js/redirects) are checked/applied
+3. `beforeFiles` rewrites are checked/applied
+4. static files from the [public directory](/docs/basic-features/static-file-serving), `_next/static` files, and non-dynamic pages are checked/served
+5. `afterFiles` rewrites are checked/applied, if one of these rewrites is matched we check dynamic routes/static files after each match
+6. `fallback` rewrites are checked/applied, these are applied before rendering the 404 page and after dynamic routes/all static assets have been checked.
+
 ## Rewrite parameters
 
 When using parameters in a rewrite the parameters will be passed in the query by default when none of the parameters are used in the `destination`.

docs/basic-features/script.md

@@ -23,7 +23,10 @@ With `next/script`, you can define the `strategy` property and Next.js will o
 - `afterInteractive` (**default**): For scripts that can fetch and execute **after** the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.
 - `lazyOnload` For scripts that can wait to load during idle time, such as chat support and social media widgets.
 
-> **Note:** These loading strategies work the same for inline scripts wrapped with `<Script>`. See the inline scripts example below.
+> **Note:**
+>
+> - `<Script>` supports inline scripts with `afterInteractive` and `lazyOnload` strategy.
+> - Inline scripts wrapped with `<Script>` _require an `id` attribute to be defined_ to track and optimize the script.
 
 ## Usage
 

examples/with-flow/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "parser": "babel-eslint"
+  "extends": "next"
 }

examples/with-flow/package.json

@@ -12,7 +12,8 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "babel-eslint": "8.2.6",
+    "eslint": "7.30.0",
+    "eslint-config-next": "latest",
     "babel-plugin-transform-flow-strip-types": "6.22.0",
     "flow-bin": "0.77.0"
   }

package.json

@@ -40,6 +40,7 @@
   },
   "pre-commit": "lint-staged",
   "devDependencies": {
+    "@babel/eslint-parser": "7.14.7",
     "@babel/plugin-proposal-object-rest-spread": "7.12.1",
     "@babel/preset-flow": "7.12.1",
     "@babel/preset-react": "7.12.10",
@@ -62,7 +63,6 @@
     "amphtml-validator": "1.0.33",
     "async-sema": "3.0.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.0.3",
     "babel-jest": "27.0.0-next.5",
     "browserslist": "^4.14.7",
     "browserstack-local": "1.4.0",

packages/eslint-config-next/index.js

@@ -32,6 +32,10 @@ module.exports = {
     allowImportExportEverywhere: true,
     babelOptions: {
       presets: ['next/babel'],
+      caller: {
+        // Eslint supports top level await when a parser for it is included. We enable the parser by default for Babel.
+        supportsTopLevelAwait: true,
+      },
     },
   },
   overrides: [

packages/next/cli/next-lint.ts

@@ -28,7 +28,9 @@ const eslintOptions = (args: arg.Spec) => ({
     args['--report-unused-disable-directives'] || null,
   cache: args['--cache'] ?? false,
   cacheLocation: args['--cache-location'] || '.eslintcache',
-  errorOnUnmatchedPattern: !Boolean(args['--no-error-on-unmatched-pattern']),
+  errorOnUnmatchedPattern: args['--error-on-unmatched-pattern']
+    ? Boolean(args['--error-on-unmatched-pattern'])
+    : false,
 })
 
 const nextLint: cliCommand = (argv) => {
@@ -60,7 +62,7 @@ const nextLint: cliCommand = (argv) => {
     '--report-unused-disable-directives': String,
     '--cache': Boolean,
     '--cache-location': String,
-    '--no-error-on-unmatched-pattern': Boolean,
+    '--error-on-unmatched-pattern': Boolean,
 
     // Aliases
     '-c': '--config',
@@ -120,7 +122,7 @@ const nextLint: cliCommand = (argv) => {
           --cache-location path::String  Path to the cache file or directory - default: .eslintcache
         
         Miscellaneous:
-          --no-error-on-unmatched-pattern  Prevent errors when pattern is unmatched - default: false
+          --error-on-unmatched-pattern   Show errors when any file patterns are unmatched - default: false
           `,
       0
     )

packages/next/client/script.tsx

@@ -39,12 +39,17 @@ const loadScript = (props: ScriptProps): void => {
   } = props
 
   const cacheKey = id || src
+
+  // Script has already loaded
+  if (cacheKey && LoadCache.has(cacheKey)) {
+    return
+  }
+
+  // Contents of this script are already loading/loaded
   if (ScriptCache.has(src)) {
-    if (!LoadCache.has(cacheKey)) {
-      LoadCache.add(cacheKey)
-      // Execute onLoad since the script loading has begun
-      ScriptCache.get(src).then(onLoad, onError)
-    }
+    LoadCache.add(cacheKey)
+    // Execute onLoad since the script loading has begun
+    ScriptCache.get(src).then(onLoad, onError)
     return
   }
 
@@ -67,8 +72,8 @@ const loadScript = (props: ScriptProps): void => {
 
   if (src) {
     ScriptCache.set(src, loadPromise)
-    LoadCache.add(cacheKey)
   }
+  LoadCache.add(cacheKey)
 
   if (dangerouslySetInnerHTML) {
     el.innerHTML = dangerouslySetInnerHTML.__html || ''

packages/next/lib/eslint/runLintCheck.ts

@@ -64,6 +64,7 @@ async function lint(
   let options: any = {
     useEslintrc: true,
     baseConfig: {},
+    errorOnUnmatchedPattern: false,
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
     ...eslintOptions,
   }

test/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": ["next"],
+  "rules": {
+    "import/no-anonymous-default-export": "off",
+    "react/display-name": "off",
+    "@next/next/no-img-element": "off",
+    "jsx-a11y/alt-text": "off",
+    "@next/next/no-css-tags": "off",
+    "@next/next/no-page-custom-font": "off",
+    "@next/next/no-sync-scripts": "off",
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-html-link-for-pages": "off",
+    "react/no-unknown-property": "off",
+    "@next/next/google-font-display": "off"
+  }
+}

test/integration/client-navigation/pages/nav/pass-href-prop.js

@@ -18,6 +18,7 @@ export default () => (
       <FakeA id="with-href">Will redirect as an `a` tag</FakeA>
     </Link>
 
+    {/* eslint-disable-next-line @next/next/link-passhref */}
     <Link href="/nav">
       <FakeA id="without-href">Will not redirect as an `a` tag</FakeA>
     </Link>

test/integration/css-fixtures/next-issue-12343/pages/another-page.js

@@ -5,7 +5,7 @@ function AnotherPage() {
   return (
     <div>
       <h1>Another page</h1>
-      <Link href="/">
+      <Link href="/" passHref>
         <Button id="link-index">Another Button instance</Button>
       </Link>
     </div>

test/integration/css-fixtures/next-issue-12343/pages/index.js

@@ -6,7 +6,7 @@ function HomePage() {
   return (
     <div>
       <h1>Home page</h1>
-      <Link href="/another-page">
+      <Link href="/another-page" passHref>
         <Button id="link-other" className={styles.button}>
           Another page
         </Button>

test/integration/document-head-warnings/pages/_document.js

@@ -1,3 +1,5 @@
+/* eslint-disable @next/next/no-title-in-document-head */
+
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class MyDocument extends Document {

test/integration/eslint/empty-directory/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "next",
+  "root": true,
+  "rules": {
+    "@next/next/no-html-link-for-pages": 0,
+    "@next/next/no-sync-scripts": 1
+  }
+}

test/integration/eslint/empty-directory/pages/index.js

@@ -0,0 +1,8 @@
+const Home = () => (
+  <div>
+    <p>Home</p>
+    <script src="https://example.com" />
+  </div>
+)
+
+export default Home

test/integration/eslint/eslint-ignore/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": "next",
+  "root": true,
+  "rules": {
+    "@next/next/no-html-link-for-pages": 0,
+    "@next/next/no-sync-scripts": 1
+  },
+  "ignorePatterns": ["**/components/**"]
+}