Merge branch 'canary' into fix-file-path-overflowing

.github/labeler.json

@@ -7,7 +7,10 @@
       "packages/next/**",
       "packages/react-dev-overlay/**",
       "packages/react-refresh-utils/**",
-      "packages/next-codemod/**"
+      "packages/next-codemod/**",
+      "packages/eslint-plugin-next/**",
+      "packages/eslint-config-next/**",
+      "packages/next-env/**"
     ],
     "created-by: Chrome Aurora": [
       { "type": "user", "pattern": "spanicker" },

.github/workflows/build_test_deploy.yml

@@ -291,7 +291,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [build, build-native]
     env:
-      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}
     steps:
       # https://github.com/actions/virtual-environments/issues/1187
       - name: tune linux network

docs/api-reference/next/image.md

@@ -262,7 +262,7 @@ Other properties on the `<Image />` component will be passed to the underlying
 
 ## Styling
 
-`next/image` wraps the `img` element with other `div` elements to maintain the aspect ratio of the image and prevent [Cumulative Layout Shift](https://vercel.com/blog/core-web-vitals#cumulative-layout-shift).
+`next/image` wraps the `img` element with a single `div` element to maintain the aspect ratio of the image and prevent [Cumulative Layout Shift](https://vercel.com/blog/core-web-vitals#cumulative-layout-shift).
 
 To add styles to the underlying `img` element, pass the `className` prop to the `<Image />` component. Then, use Next.js' [built-in CSS support](/docs/basic-features/built-in-css-support.md) to add rules to that class.
 

docs/basic-features/data-fetching.md

@@ -672,7 +672,7 @@ The `context` parameter is an object containing the following keys:
 
 `getServerSideProps` should return an object with:
 
-- `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)
+- `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) or a Promise that resolves to a serializable object.
 - `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

docs/basic-features/environment-variables.md

@@ -78,7 +78,7 @@ export async function getStaticProps() {
 
 ## Exposing Environment Variables to the Browser
 
-By default all environment variables loaded through `.env.local` are only available in the Node.js environment, meaning they won't be exposed to the browser.
+By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.
 
 In order to expose a variable to the browser you have to prefix the variable with `NEXT_PUBLIC_`. For example:
 

docs/basic-features/image-optimization.md

@@ -52,9 +52,9 @@ export default Home
 
 ## Image Imports
 
-You can `import` images that live in your project. (Note that `require` is not supported—only `import`.)
+You can statically `import` images that live in your project. Dynamic `await import()` or `require()` are _not_ supported.
 
-With direct `import`s, `width`, `height`, and `blurDataURL` will be automatically provided to the image component. Alt text is still needed separately.
+With static `import`s, you only need to provide the `src` prop. The `width`, `height`, and `blurDataURL` props will automatically be populated. Alt text is still needed separately.
 
 ```js
 import Image from 'next/image'
@@ -70,16 +70,15 @@ function Home() {
         // width={500} automatically provided
         // height={500} automatically provided
         // blurDataURL="data:..." automatically provided
-        // Optionally allows to add a blurred version of the image while loading
-        // placeholder="blur"
+        // placeholder="blur" // Optional blur-up while loading
       />
       <p>Welcome to my homepage!</p>
     </>
   )
 }
 ```
 
-For dynamic or remote images, you'll have to provide [`width`](/docs/api-reference/next/image#width), [`height`](/docs/api-reference/next/image#height) and [`blurDataURL`](/docs/api-reference/next/image#blurdataurl) manually.
+For remote images, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually.
 
 ## Properties
 

errors/manifest.json

@@ -269,6 +269,10 @@
           "title": "next-image-unconfigured-host",
           "path": "/errors/next-image-unconfigured-host.md"
         },
+        {
+          "title": "next-script-for-ga",
+          "path": "/errors/next-script-for-ga.md"
+        },
         {
           "title": "next-start-serverless",
           "path": "/errors/next-start-serverless.md"

examples/cms-sanity/lib/config.js

@@ -6,4 +6,6 @@ export const sanityConfig = {
   // useCdn == true gives fast, cheap responses using a globally distributed cache.
   // Set this to false if your application require the freshest possible
   // data always (potentially slightly slower and a bit more expensive).
+  apiVersion: '2021-03-25',
+  // see https://www.sanity.io/docs/api-versioning for how versioning works
 }

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "11.1.1-canary.17"
+  "version": "11.1.3-canary.8"
 }

package.json

@@ -34,6 +34,7 @@
     "lint-staged": "lint-staged",
     "next-with-deps": "./scripts/next-with-deps.sh",
     "next": "node --trace-deprecation --enable-source-maps packages/next/dist/bin/next",
+    "next-no-sourcemaps": "node --trace-deprecation packages/next/dist/bin/next",
     "clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build test/integration/basic",
     "debug": "node --inspect packages/next/dist/bin/next"
   },

packages/create-next-app/create-app.ts

@@ -226,7 +226,7 @@ export async function createApp({
      * TypeScript projects will have type definitions and other devDependencies.
      */
     if (typescript) {
-      devDependencies.push('typescript', '@types/react')
+      devDependencies.push('typescript', '@types/react', '@types/node')
     }
     /**
      * Install package.json dependencies if they exist.

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "keywords": [
     "react",
     "next",

packages/create-next-app/templates/typescript/pages/index.tsx

@@ -19,7 +19,7 @@ const Home: NextPage = () => {
 
         <p className={styles.description}>
           Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
+          <code className={styles.code}>pages/index.tsx</code>
         </p>
 
         <div className={styles.grid}>

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "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": "11.1.1-canary.17",
+    "@next/eslint-plugin-next": "11.1.3-canary.8",
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",

packages/eslint-plugin-next/lib/rules/next-script-for-ga.js

@@ -52,8 +52,8 @@ module.exports = {
         // https://developers.google.com/analytics/devguides/collection/analyticsjs#the_google_analytics_tag
         // https://developers.google.com/tag-manager/quickstart
         if (
-          attributes.has('dangerouslySetInnerHTML') &&
-          attributes.value('dangerouslySetInnerHTML')[0]
+          attributes.value('dangerouslySetInnerHTML') &&
+          attributes.value('dangerouslySetInnerHTML').length > 0
         ) {
           const htmlContent =
             attributes.value('dangerouslySetInnerHTML')[0].value.quasis &&

packages/eslint-plugin-next/lib/rules/no-document-import-in-page.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = {
   meta: {
     docs: {
@@ -16,7 +18,11 @@ module.exports = {
         const paths = context.getFilename().split('pages')
         const page = paths[paths.length - 1]
 
-        if (!page || page.startsWith('/_document')) {
+        if (
+          !page ||
+          page.startsWith(`${path.sep}_document`) ||
+          page.startsWith(`${path.posix.sep}_document`)
+        ) {
           return
         }
 

packages/eslint-plugin-next/lib/utils/url.js

@@ -42,7 +42,10 @@ function getUrlFromPagesDirectories(urlPrefix, directories) {
           (url) => `^${normalizeURL(url)}$`
         )
     )
-  ).map((urlReg) => new RegExp(urlReg))
+  ).map((urlReg) => {
+    urlReg = urlReg.replace(/\[.*\]/g, '.*')
+    return new RegExp(urlReg)
+  })
 }
 
 // Cache for fs.readdirSync lookup.
@@ -60,7 +63,6 @@ function parseUrlForPages(urlprefix, directory) {
   const res = []
   fsReadDirSyncCache[directory].forEach((fname) => {
     if (/(\.(j|t)sx?)$/.test(fname)) {
-      fname = fname.replace(/\[.*\]/g, '.*')
       if (/^index(\.(j|t)sx?)$/.test(fname)) {
         res.push(`${urlprefix}${fname.replace(/^index(\.(j|t)sx?)$/, '')}`)
       }

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "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",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "11.1.1-canary.17",
+  "version": "11.1.3-canary.8",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/cssnano-simple.js

@@ -0,0 +1 @@
+module.exports = require('cssnano-simple')(require('postcss'))

packages/next/build/webpack-config.ts

@@ -173,28 +173,14 @@ export function attachReactRefresh(
   }
 }
 
-const WEBPACK_RESOLVE_OPTIONS = {
-  // This always uses commonjs resolving, assuming API is identical
-  // between ESM and CJS in a package
-  // Otherwise combined ESM+CJS packages will never be external
-  // as resolving mismatch would lead to opt-out from being external.
-  dependencyType: 'commonjs',
-  symlinks: true,
-}
-
-const WEBPACK_ESM_RESOLVE_OPTIONS = {
-  dependencyType: 'esm',
-  symlinks: true,
-}
-
 const NODE_RESOLVE_OPTIONS = {
   dependencyType: 'commonjs',
   modules: ['node_modules'],
   alias: false,
   fallback: false,
   exportsFields: ['exports'],
   importsFields: ['imports'],
-  conditionNames: ['node', 'require', 'module'],
+  conditionNames: ['node', 'require'],
   descriptionFiles: ['package.json'],
   extensions: ['.js', '.json', '.node'],
   enforceExtensions: false,
@@ -211,7 +197,7 @@ const NODE_RESOLVE_OPTIONS = {
 const NODE_ESM_RESOLVE_OPTIONS = {
   ...NODE_RESOLVE_OPTIONS,
   dependencyType: 'esm',
-  conditionNames: ['node', 'import', 'module'],
+  conditionNames: ['node', 'import'],
   fullySpecified: true,
 }
 
@@ -754,7 +740,7 @@ export default async function getBaseWebpackConfig(
     const preferEsm = esmExternals && isEsmRequested
 
     const resolve = getResolve(
-      preferEsm ? WEBPACK_ESM_RESOLVE_OPTIONS : WEBPACK_RESOLVE_OPTIONS
+      preferEsm ? NODE_ESM_RESOLVE_OPTIONS : NODE_RESOLVE_OPTIONS
     )
 
     // Resolve the import with the webpack provided context, this
@@ -772,7 +758,7 @@ export default async function getBaseWebpackConfig(
     // try the alternative resolving options.
     if (!res && (isEsmRequested || looseEsmExternals)) {
       const resolveAlternative = getResolve(
-        preferEsm ? WEBPACK_RESOLVE_OPTIONS : WEBPACK_ESM_RESOLVE_OPTIONS
+        preferEsm ? NODE_RESOLVE_OPTIONS : NODE_ESM_RESOLVE_OPTIONS
       )
       try {
         ;[res, isEsm] = await resolveAlternative(context, request)
@@ -1561,7 +1547,9 @@ export default async function getBaseWebpackConfig(
 
   webpackConfig = await buildConfiguration(webpackConfig, {
     rootDirectory: dir,
-    customAppFile: new RegExp(path.join(pagesDir, `_app`)),
+    customAppFile: new RegExp(
+      path.join(pagesDir, `_app`).replace(/\\/g, '(/|\\\\)')
+    ),
     isDevelopment: dev,
     isServer,
     assetPrefix: config.assetPrefix || '',