Merge branch 'canary' into cms-builder-io-example

teleaziz · Jan 3, 2022 · af81be9 · af81be9
2 parents dd94426 + 82adaee
commit af81be9
Show file tree

Hide file tree

Showing 88 changed files with 1,235 additions and 328 deletions.
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
@@ -14,7 +14,8 @@ jobs:
         with:
           only-labels: 'please add a complete reproduction'
           close-issue-message: 'This issue has been automatically closed after 30 days of inactivity with no reproduction. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.'
-          days-before-issue-close: 30
+          days-before-issue-close: 1
+          days-before-issue-stale: 30
           days-before-pr-close: -1
           days-before-pr-stale: -1
           exempt-issue-labels: 'blocked,must,should,keep'
diff --git a/docs/advanced-features/react-18.md b/docs/advanced-features/react-18.md
@@ -12,6 +12,8 @@ Ensure you have the `rc` npm tag of React installed:
 npm install next@latest react@rc react-dom@rc
 ```
 
+That's all! You can now start using React 18's new APIs like `startTransition` and `Suspense` in Next.js.
+
 ### Enable SSR Streaming (Alpha)
 
 Concurrent features in React 18 include built-in support for server-side Suspense and SSR streaming support, allowing you to server-render pages using HTTP streaming.

diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md
@@ -204,7 +204,7 @@ The default behavior of the `Link` component is to `push` a new URL into the `hi
 The default behavior of `Link` is to scroll to the top of the page. When there is a hash defined it will scroll to the specific id, like a normal `<a>` tag. To prevent scrolling to the top / hash `scroll={false}` can be added to `Link`:
 
 ```jsx
-<Link href="/?counter=10" scroll={false}>
+<Link href="/#hashid" scroll={false}>
   <a>Disables scrolling to the top</a>
 </Link>
 ```
diff --git a/docs/basic-features/eslint.md b/docs/basic-features/eslint.md
@@ -90,6 +90,7 @@ Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/
 | ✔️  | [next/no-head-import-in-document](https://nextjs.org/docs/messages/no-head-import-in-document) | Disallow importing next/head in pages/document.js                                                                            |
 | ✔️  | [next/no-html-link-for-pages](https://nextjs.org/docs/messages/no-html-link-for-pages)         | Prohibit HTML anchor links to pages without a Link component                                                                 |
 | ✔️  | [next/no-img-element](https://nextjs.org/docs/messages/no-img-element)                         | Prohibit usage of HTML &lt;img&gt; element                                                                                   |
+| ✔️  | [next/no-head-element](https://nextjs.org/docs/messages/no-head-element)                       | Prohibit usage of HTML &lt;head&gt; element                                                                                  |
 | ✔️  | [next/no-page-custom-font](https://nextjs.org/docs/messages/no-page-custom-font)               | Prevent page-only custom fonts                                                                                               |
 | ✔️  | [next/no-sync-scripts](https://nextjs.org/docs/messages/no-sync-scripts)                       | Forbid synchronous scripts                                                                                                   |
 | ✔️  | [next/no-title-in-document-head](https://nextjs.org/docs/messages/no-title-in-document-head)   | Disallow using &lt;title&gt; with Head from next/document                                                                    |
@@ -202,11 +203,15 @@ Then, add `prettier` to your existing ESLint config:
 If you would like to use `next lint` with [lint-staged](https://github.com/okonet/lint-staged) to run the linter on staged git files, you'll have to add the following to the `.lintstagedrc.js` file in the root of your project in order to specify usage of the `--file` flag.
 
 ```js
+const path = require('path')
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`
+
 module.exports = {
-  '**/*.js?(x)': (filenames) =>
-    `next lint --fix --file ${filenames
-      .map((file) => file.split(process.cwd())[1])
-      .join(' --file ')}`,
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
 }
 ```
 

diff --git a/errors/manifest.json b/errors/manifest.json
@@ -447,6 +447,7 @@
           "path": "/errors/link-multiple-children.md"
         },
         { "title": "no-img-element", "path": "/errors/no-img-element.md" },
+        { "title": "no-head-element", "path": "/errors/no-head-element.md" },
         {
           "title": "non-dynamic-getstaticpaths-usage",
           "path": "/errors/non-dynamic-getstaticpaths-usage.md"

diff --git a/errors/no-head-element.md b/errors/no-head-element.md
@@ -0,0 +1,30 @@
+# No Head Element
+
+### Why This Error Occurred
+
+An HTML `<head>` element was used to include page-level metadata, but this can cause unexpected behavior in a Next.js application. Use Next.js' built-in `<Head />` component instead.
+
+### Possible Ways to Fix It
+
+Import and use the `<Head />` component:
+
+```jsx
+import Head from 'next/head'
+
+function Index() {
+  return (
+    <>
+      <Head>
+        <title>My page title</title>
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      </Head>
+    </>
+  )
+}
+
+export default Index
+```
+
+### Useful Links
+
+- [next/head](https://nextjs.org/docs/api-reference/next/head)
diff --git a/examples/with-docker/Dockerfile b/examples/with-docker/Dockerfile
@@ -9,9 +9,9 @@ RUN yarn install --frozen-lockfile
 # Rebuild the source code only when needed
 FROM node:16-alpine AS builder
 WORKDIR /app
-COPY . .
 COPY --from=deps /app/node_modules ./node_modules
-RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
+COPY . .
+RUN yarn build
 
 # Production image, copy all the files and run next
 FROM node:16-alpine AS runner

diff --git a/examples/with-segment-analytics/pages/_app.js b/examples/with-segment-analytics/pages/_app.js
@@ -24,7 +24,10 @@ function MyApp({ Component, pageProps }) {
   return (
     <Page>
       {/* Inject the Segment snippet into the <head> of the document  */}
-      <Script dangerouslySetInnerHTML={{ __html: renderSnippet() }} />
+      <Script
+        id="segment-script"
+        dangerouslySetInnerHTML={{ __html: renderSnippet() }}
+      />
       <Component {...pageProps} />
     </Page>
   )

diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.0.8-canary.13"
+  "version": "12.0.8-canary.14"
 }
diff --git a/package.json b/package.json
@@ -87,13 +87,13 @@
     "async-sema": "3.0.1",
     "browserslist": "4.18.1",
     "cheerio": "0.22.0",
-    "clone": "2.1.2",
     "cookie": "0.4.1",
     "cors": "2.8.5",
     "coveralls": "3.0.3",
     "critters": "0.0.6",
     "cross-env": "6.0.3",
     "cross-spawn": "6.0.5",
+    "es5-ext": "0.10.53",
     "escape-string-regexp": "2.0.0",
     "eslint": "7.24.0",
     "eslint-plugin-import": "2.22.1",

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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+    "@next/eslint-plugin-next": "12.0.8-canary.14",
     "@rushstack/eslint-patch": "^1.0.8",
     "@typescript-eslint/parser": "^5.0.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
@@ -4,6 +4,7 @@ module.exports = {
     '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-head-element': require('./rules/no-head-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'),
@@ -28,6 +29,7 @@ module.exports = {
         '@next/next/no-sync-scripts': 1,
         '@next/next/no-html-link-for-pages': 1,
         '@next/next/no-img-element': 1,
+        '@next/next/no-head-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-head-element.js b/packages/eslint-plugin-next/lib/rules/no-head-element.js
@@ -0,0 +1,26 @@
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prohibit usage of HTML <head> element',
+      category: 'HTML',
+      recommended: true,
+      url: 'https://nextjs.org/docs/messages/no-head-element',
+    },
+    fixable: 'code',
+  },
+
+  create: function (context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.name !== 'head') {
+          return
+        }
+
+        context.report({
+          node,
+          message: `Do not use <head>. Use Head from 'next/head' instead. See: https://nextjs.org/docs/messages/no-head-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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "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": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.0.8-canary.13",
+  "version": "12.0.8-canary.14",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",

diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
@@ -36,6 +36,12 @@ export function createPagesMapping(
   }
 ): PagesMapping {
   const previousPages: PagesMapping = {}
+
+  // Do not process .d.ts files inside the `pages` folder
+  pagePaths = extensions.includes('ts')
+    ? pagePaths.filter((pagePath) => !pagePath.endsWith('.d.ts'))
+    : pagePaths
+
   const pages: PagesMapping = pagePaths.reduce(
     (result: PagesMapping, pagePath): PagesMapping => {
       let page = pagePath.replace(

diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
@@ -5,7 +5,7 @@ import { isMatch } from 'next/dist/compiled/micromatch'
 import { promises, writeFileSync } from 'fs'
 import { Worker } from '../lib/worker'
 import devalue from 'next/dist/compiled/devalue'
-import escapeStringRegexp from 'next/dist/compiled/escape-string-regexp'
+import { escapeStringRegexp } from '../shared/lib/escape-regexp'
 import findUp from 'next/dist/compiled/find-up'
 import { nanoid } from 'next/dist/compiled/nanoid/index.cjs'
 import { pathToRegexp } from 'next/dist/compiled/path-to-regexp'

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -6,7 +6,7 @@ import semver from 'next/dist/compiled/semver'
 import { webpack } from 'next/dist/compiled/webpack/webpack'
 import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
 import path, { join as pathJoin, relative as relativePath } from 'path'
-import escapeRegExp from 'next/dist/compiled/escape-string-regexp'
+import { escapeStringRegexp } from '../shared/lib/escape-regexp'
 import {
   DOT_NEXT_ALIAS,
   NEXT_PROJECT_ROOT,
@@ -1694,7 +1694,7 @@ export default async function getBaseWebpackConfig(
   webpackConfig = await buildConfiguration(webpackConfig, {
     supportedBrowsers,
     rootDirectory: dir,
-    customAppFile: new RegExp(escapeRegExp(path.join(pagesDir, `_app`))),
+    customAppFile: new RegExp(escapeStringRegexp(path.join(pagesDir, `_app`))),
     isDevelopment: dev,
     isServer,
     webServerRuntime,

diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -139,7 +139,7 @@ export const css = curry(async function css(
     ...sassOptions
   } = ctx.sassOptions
 
-  const lazyPostCSSInitalizer = () =>
+  const lazyPostCSSInitializer = () =>
     lazyPostCSS(
       ctx.rootDirectory,
       ctx.supportedBrowsers,
@@ -165,8 +165,9 @@ export const css = curry(async function css(
     // To fix this, we use `resolve-url-loader` to rewrite the CSS
     // imports to real file paths.
     {
-      loader: require.resolve('next/dist/compiled/resolve-url-loader'),
+      loader: require.resolve('../../../loaders/resolve-url-loader/index'),
       options: {
+        postcss: lazyPostCSSInitializer,
         // Source maps are not required here, but we may as well emit
         // them.
         sourceMap: true,
@@ -216,7 +217,7 @@ export const css = curry(async function css(
             and: [ctx.rootDirectory],
             not: [/node_modules/],
           },
-          use: getCssModuleLoader(ctx, lazyPostCSSInitalizer),
+          use: getCssModuleLoader(ctx, lazyPostCSSInitializer),
         }),
       ],
     })
@@ -241,7 +242,7 @@ export const css = curry(async function css(
           },
           use: getCssModuleLoader(
             ctx,
-            lazyPostCSSInitalizer,
+            lazyPostCSSInitializer,
             sassPreprocessors
           ),
         }),
@@ -303,7 +304,7 @@ export const css = curry(async function css(
                   and: [ctx.rootDirectory],
                   not: [/node_modules/],
                 },
-            use: getGlobalCssLoader(ctx, lazyPostCSSInitalizer),
+            use: getGlobalCssLoader(ctx, lazyPostCSSInitializer),
           }),
         ],
       })
@@ -321,7 +322,7 @@ export const css = curry(async function css(
               sideEffects: true,
               test: regexCssGlobal,
               issuer: { and: [ctx.customAppFile] },
-              use: getGlobalCssLoader(ctx, lazyPostCSSInitalizer),
+              use: getGlobalCssLoader(ctx, lazyPostCSSInitializer),
             }),
           ],
         })
@@ -339,7 +340,7 @@ export const css = curry(async function css(
               issuer: { and: [ctx.customAppFile] },
               use: getGlobalCssLoader(
                 ctx,
-                lazyPostCSSInitalizer,
+                lazyPostCSSInitializer,
                 sassPreprocessors
               ),
             }),