Merge branch 'canary' into fix-tsconfig-extends

errors/install-sharp.md

@@ -2,14 +2,27 @@
 
 #### Why This Error Occurred
 
-Using Next.js' built-in Image Optimization requires that you bring your own version of `sharp`.
+Using Next.js' built-in Image Optimization requires that you install `sharp`.
+
+Since `sharp` is optional, it may have been skipped if you installed `next` with the [`--no-optional`](https://docs.npmjs.com/cli/install) flag or it may have been skipped if your platform does not support `sharp`.
 
 #### Possible Ways to Fix It
 
-Please install the `sharp` package in your project.
+Option 1: Install the `sharp` package in your project.
 
 ```bash
 npm i sharp
 # or
 yarn add sharp
 ```
+
+Option 2: Configure an external loader in `next.config.js` such as [imgix](https://imgix.com).
+
+```js
+module.exports = {
+  images: {
+    path: 'https://example.com/myaccount/',
+    loader: 'imgix',
+  },
+}
+```

examples/with-firebase-authentication/utils/auth/mapUserData.js

@@ -1,8 +1,8 @@
 export const mapUserData = (user) => {
-  const { uid, email, xa } = user
+  const { uid, email, xa, ya } = user
   return {
     id: uid,
     email,
-    token: xa,
+    token: xa || ya,
   }
 }

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.6-canary.4"
+  "version": "9.5.6-canary.11"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "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": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "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": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "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": "9.5.6-canary.4",
+  "version": "9.5.6-canary.11",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/index.ts

@@ -967,7 +967,7 @@ export default async function build(
           await moveExportedPage(page, page, file, true, 'json')
 
           const revalidationMapPath = i18n
-            ? `/${i18n.defaultLocale}${page}`
+            ? `/${i18n.defaultLocale}${page === '/' ? '' : page}`
             : page
 
           finalPrerenderRoutes[page] = {

packages/next/build/utils.ts

@@ -544,7 +544,7 @@ export async function buildStaticPaths(
   // Get the default list of allowed params.
   const _validParamKeys = Object.keys(_routeMatcher(page))
 
-  const staticPathsResult = await getStaticPaths()
+  const staticPathsResult = await getStaticPaths({ locales })
 
   const expectedReturnVal =
     `Expected: { paths: [], fallback: boolean }\n` +

packages/next/build/webpack-config.ts

@@ -229,25 +229,6 @@ export default async function getBaseWebpackConfig(
     }
   }
 
-  if (config.images?.hosts) {
-    if (!config.images.hosts.default) {
-      // If the image component is being used, a default host must be provided
-      throw new Error(
-        'If the image configuration property is present in next.config.js, it must have a host named "default"'
-      )
-    }
-    Object.values(config.images.hosts).forEach((host: any) => {
-      if (!host.path) {
-        throw new Error(
-          'All hosts defined in the image configuration property of next.config.js must define a path'
-        )
-      }
-      // Normalize hosts so all paths have trailing slash
-      if (host.path[host.path.length - 1] !== '/') {
-        host.path += '/'
-      }
-    })
-  }
   const reactVersion = await getPackageVersion({ cwd: dir, name: 'react' })
   const hasReactRefresh: boolean = dev && !isServer
   const hasJsxRuntime: boolean =
@@ -1009,12 +990,19 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_SCROLL_RESTORATION': JSON.stringify(
           config.experimental.scrollRestoration
         ),
-        'process.env.__NEXT_IMAGE_OPTS': JSON.stringify(config.images),
+        'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
+          sizes: config.images.sizes,
+          path: config.images.path,
+          loader: config.images.loader,
+        }),
         'process.env.__NEXT_ROUTER_BASEPATH': JSON.stringify(config.basePath),
         'process.env.__NEXT_HAS_REWRITES': JSON.stringify(hasRewrites),
-        'process.env.__NEXT_i18n_SUPPORT': JSON.stringify(
+        'process.env.__NEXT_I18N_SUPPORT': JSON.stringify(
           !!config.experimental.i18n
         ),
+        'process.env.__NEXT_I18N_DOMAINS': JSON.stringify(
+          config.experimental.i18n.domains
+        ),
         'process.env.__NEXT_ANALYTICS_ID': JSON.stringify(
           config.experimental.analyticsId
         ),

packages/next/build/webpack/config/blocks/css/loaders/global.ts

@@ -1,12 +1,12 @@
-import postcss from 'postcss'
+import { AcceptedPlugin } from 'postcss'
 import webpack from 'webpack'
 import { ConfigurationContext } from '../../../utils'
 import { getClientStyleLoader } from './client'
 import { cssFileResolve } from './file-resolve'
 
 export function getGlobalCssLoader(
   ctx: ConfigurationContext,
-  postCssPlugins: readonly postcss.AcceptedPlugin[],
+  postCssPlugins: readonly AcceptedPlugin[],
   preProcessors: readonly webpack.RuleSetUseItem[] = []
 ): webpack.RuleSetUseItem[] {
   const loaders: webpack.RuleSetUseItem[] = []
@@ -40,8 +40,7 @@ export function getGlobalCssLoader(
   loaders.push({
     loader: require.resolve('next/dist/compiled/postcss-loader'),
     options: {
-      ident: '__nextjs_postcss',
-      plugins: postCssPlugins,
+      postcssOptions: { plugins: postCssPlugins, config: false },
       sourceMap: true,
     },
   })

packages/next/build/webpack/config/blocks/css/loaders/modules.ts

@@ -1,4 +1,4 @@
-import postcss from 'postcss'
+import { AcceptedPlugin } from 'postcss'
 import webpack from 'webpack'
 import { ConfigurationContext } from '../../../utils'
 import { getClientStyleLoader } from './client'
@@ -7,7 +7,7 @@ import { getCssModuleLocalIdent } from './getCssModuleLocalIdent'
 
 export function getCssModuleLoader(
   ctx: ConfigurationContext,
-  postCssPlugins: readonly postcss.AcceptedPlugin[],
+  postCssPlugins: readonly AcceptedPlugin[],
   preProcessors: readonly webpack.RuleSetUseItem[] = []
 ): webpack.RuleSetUseItem[] {
   const loaders: webpack.RuleSetUseItem[] = []
@@ -56,8 +56,7 @@ export function getCssModuleLoader(
   loaders.push({
     loader: require.resolve('next/dist/compiled/postcss-loader'),
     options: {
-      ident: '__nextjs_postcss',
-      plugins: postCssPlugins,
+      postcssOptions: { plugins: postCssPlugins, config: false },
       sourceMap: true,
     },
   })

packages/next/build/webpack/config/blocks/css/overrideCssConfiguration.ts

@@ -12,9 +12,9 @@ export async function __overrideCssConfiguration(
     if (
       rule.options &&
       typeof rule.options === 'object' &&
-      rule.options['ident'] === '__nextjs_postcss'
+      typeof rule.options.postcssOptions === 'object'
     ) {
-      rule.options.plugins = postCssPlugins
+      rule.options.postcssOptions.plugins = postCssPlugins
     } else if (Array.isArray(rule.oneOf)) {
       rule.oneOf.forEach(patch)
     } else if (Array.isArray(rule.use)) {

packages/next/build/webpack/loaders/next-serverless-loader.ts

@@ -233,9 +233,13 @@ const nextServerlessLoader: loader.Loader = function () {
         i18n.locales
       )
 
+      const { host } = req.headers || {}
+      // remove port from host and remove port if present
+      const hostname = host && host.split(':')[0].toLowerCase()
+
       const detectedDomain = detectDomainLocale(
         i18n.domains,
-        req,
+        hostname,
       )
       if (detectedDomain) {
         defaultLocale = detectedDomain.defaultLocale
@@ -260,28 +264,40 @@ const nextServerlessLoader: loader.Loader = function () {
 
         // check if the locale prefix matches a domain's defaultLocale
         // and we're on a locale specific domain if so redirect to that domain
-        if (detectedDomain) {
-          const matchedDomain = detectDomainLocale(
-            i18n.domains,
-            undefined,
-            detectedLocale
-          )
+        // if (detectedDomain) {
+        //   const matchedDomain = detectDomainLocale(
+        //     i18n.domains,
+        //     undefined,
+        //     detectedLocale
+        //   )
+
+        //   if (matchedDomain) {
+        //     localeDomainRedirect = \`http\${
+        //       matchedDomain.http ? '' : 's'
+        //     }://\${matchedDomain.domain}\`
+        //   }
+        // }
+      } else if (detectedDomain) {
+        const matchedDomain = detectDomainLocale(
+          i18n.domains,
+          undefined,
+          acceptPreferredLocale
+        )
 
-          if (matchedDomain) {
-            localeDomainRedirect = \`http\${
-              matchedDomain.http ? '' : 's'
-            }://\${matchedDomain.domain}\`
-          }
+        if (matchedDomain && matchedDomain.domain !== detectedDomain.domain) {
+          localeDomainRedirect = \`http\${matchedDomain.http ? '' : 's'}://\${
+            matchedDomain.domain
+          }\`
         }
       }
 
       const denormalizedPagePath = denormalizePagePath(parsedUrl.pathname || '/')
       const detectedDefaultLocale =
         !detectedLocale ||
         detectedLocale.toLowerCase() === defaultLocale.toLowerCase()
-      const shouldStripDefaultLocale =
-        detectedDefaultLocale &&
-        denormalizedPagePath.toLowerCase() === \`/\${i18n.defaultLocale.toLowerCase()}\`
+      const shouldStripDefaultLocale = false
+        // detectedDefaultLocale &&
+        // denormalizedPagePath.toLowerCase() === \`/\${i18n.defaultLocale.toLowerCase()}\`
 
       const shouldAddLocalePrefix =
         !detectedDefaultLocale && denormalizedPagePath === '/'
@@ -291,6 +307,7 @@ const nextServerlessLoader: loader.Loader = function () {
       if (
         !fromExport &&
         !nextStartMode &&
+        !req.headers["${vercelHeader}"] &&
         i18n.localeDetection !== false &&
         (
           localeDomainRedirect ||

packages/next/build/webpack/plugins/css-minimizer-plugin.ts

@@ -1,4 +1,5 @@
-import { process as minify } from 'cssnano-simple'
+import cssnanoSimple from 'cssnano-simple'
+import postcss from 'postcss'
 import webpack from 'webpack'
 import sources from 'webpack-sources'
 
@@ -41,13 +42,15 @@ export class CssMinimizerPlugin {
       input = asset.source()
     }
 
-    return minify(input, postcssOptions).then((res) => {
-      if (res.map) {
-        return new SourceMapSource(res.css, file, res.map.toJSON())
-      } else {
-        return new RawSource(res.css)
-      }
-    })
+    return postcss([cssnanoSimple])
+      .process(input, postcssOptions)
+      .then((res) => {
+        if (res.map) {
+          return new SourceMapSource(res.css, file, res.map.toJSON())
+        } else {
+          return new RawSource(res.css)
+        }
+      })
   }
 
   apply(compiler: webpack.Compiler) {