Merge branch 'canary' into add/standalone-build

docs/advanced-features/i18n-routing.md

@@ -100,6 +100,8 @@ module.exports = {
 
     domains: [
       {
+        // Note: subdomains must be included in the domain value to be matched
+        // e.g. www.example.com should be used if that is the expected hostname
         domain: 'example.com',
         defaultLocale: 'en-US',
       },
@@ -122,6 +124,7 @@ module.exports = {
 For example if you have `pages/blog.js` the following urls will be available:
 
 - `example.com/blog`
+- `www.example.com/blog`
 - `example.fr/blog`
 - `example.nl/blog`
 - `example.nl/nl-BE/blog`

docs/api-reference/next.config.js/url-imports.md

@@ -45,7 +45,7 @@ These resources will have a `no-cache` entry in the lockfile and will always be
 
 ## Examples
 
-#### Skypack
+### Skypack
 
 ```js
 import confetti from 'https://cdn.skypack.dev/canvas-confetti'
@@ -59,7 +59,7 @@ export default () => {
 }
 ```
 
-#### Static Image Imports
+### Static Image Imports
 
 ```js
 import Image from 'next/image'
@@ -72,15 +72,15 @@ export default () => (
 )
 ```
 
-#### URLs in CSS
+### URLs in CSS
 
 ```css
 .className {
   background: url('https://github.com/vercel/next.js/raw/canary/test/integration/production/public/vercel.png');
 }
 ```
 
-#### Asset Imports
+### Asset Imports
 
 ```js
 import Image from 'next/image'

docs/basic-features/typescript.md

@@ -53,7 +53,7 @@ npm run dev
 # ...
 ```
 
-You're now ready to start converting files from `.js` to `.tsx` and leveraging the benefits of TypeScript!.
+You're now ready to start converting files from `.js` to `.tsx` and leveraging the benefits of TypeScript!
 
 > A file named `next-env.d.ts` will be created in the root of your project. This file ensures Next.js types are picked up by the TypeScript compiler. **You cannot remove it or edit it** as it can change at any time.
 

docs/testing.md

@@ -136,7 +136,7 @@ You can learn more about Cypress and Continuous Integration from these resources
 
 - [Cypress Continuous Integration Docs](https://docs.cypress.io/guides/continuous-integration/introduction)
 - [Cypress GitHub Actions Guide](https://on.cypress.io/github-actions)
-- [Official Cypress Github Action](https://github.com/cypress-io/github-action)
+- [Official Cypress GitHub Action](https://github.com/cypress-io/github-action)
 
 ## Playwright
 

examples/with-chakra-ui-typescript/src/pages/index.tsx

@@ -21,7 +21,7 @@ const Index = () => (
     <Main>
       <Text>
         Example repository of <Code>Next.js</Code> + <Code>chakra-ui</Code> +{' '}
-        <Code>typescript</Code>.
+        <Code>TypeScript</Code>.
       </Text>
 
       <List spacing={3} my={0}>

examples/with-firebase-hosting/README.md

@@ -41,9 +41,9 @@ npm run deploy
 yarn deploy
 ```
 
-## Typescript
+## TypeScript
 
-To use Typescript, simply follow [Typescript setup](https://nextjs.org/learn/excel/typescript/setup) as normal (package.json scripts are already set).
+To use TypeScript, simply follow [TypeScript setup](https://nextjs.org/learn/excel/typescript/setup) as normal (package.json scripts are already set).
 
 i.e: `npm install --save-dev typescript @types/react @types/node`
 

examples/with-mobx-state-tree-typescript/README.md

@@ -1,4 +1,4 @@
-# MobX State Tree with Typescript example
+# MobX State Tree with TypeScript example
 
 Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach.
 

examples/with-mobx-state-tree-typescript/store.ts

@@ -20,7 +20,7 @@ const Store = types
       timer = setInterval(() => {
         // mobx-state-tree doesn't allow anonymous callbacks changing data.
         // Pass off to another action instead (need to cast self as any
-        // because typescript doesn't yet know about the actions we're
+        // because TypeScript doesn't yet know about the actions we're
         // adding to self here)
         ;(self as any).update()
       }, 1000)

packages/next/build/swc/tests/fixture/ssg/getStaticProps/issue-30091/input.js

@@ -0,0 +1,14 @@
+export default function Home({}) {
+    return (
+        <div>
+            <p>Hello World</p>
+        </div>
+    )
+}
+
+export async function getStaticProps() {
+    await import('_http_common').then((http) => console.log(http))
+    return {
+        props: {},
+    }
+}

packages/next/build/swc/tests/fixture/ssg/getStaticProps/issue-30091/output.js

@@ -0,0 +1,4 @@
+export var __N_SSG = true;
+export default function Home({}) {
+    return __jsx("div", null, __jsx("p", null, "Hello World"));
+};

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

@@ -1,4 +1,4 @@
-import loaderUtils from 'next/dist/compiled/loader-utils'
+import loaderUtils from 'next/dist/compiled/loader-utils3'
 import path from 'path'
 import { webpack } from 'next/dist/compiled/webpack/webpack'
 

packages/next/build/webpack/loaders/css-loader/src/utils.js

@@ -5,7 +5,7 @@
 import { fileURLToPath } from 'url'
 import path from 'path'
 
-import { urlToRequest } from 'next/dist/compiled/loader-utils'
+import { urlToRequest } from 'next/dist/compiled/loader-utils3'
 import modulesValues from 'next/dist/compiled/postcss-modules-values'
 import localByDefault from 'next/dist/compiled/postcss-modules-local-by-default'
 import extractImports from 'next/dist/compiled/postcss-modules-extract-imports'

packages/next/build/webpack/loaders/next-image-loader.js

@@ -1,4 +1,4 @@
-import loaderUtils from 'next/dist/compiled/loader-utils'
+import loaderUtils from 'next/dist/compiled/loader-utils3'
 import { resizeImage, getImageSize } from '../../../server/image-optimizer'
 
 const BLUR_IMG_SIZE = 8

packages/next/build/webpack/plugins/copy-file-plugin.ts

@@ -1,5 +1,5 @@
 import { promises as fs } from 'fs'
-import loaderUtils from 'next/dist/compiled/loader-utils'
+import loaderUtils from 'next/dist/compiled/loader-utils3'
 import { sources, webpack } from 'next/dist/compiled/webpack/webpack'
 
 const PLUGIN_NAME = 'CopyFilePlugin'

packages/next/cli/next-lint.ts

@@ -30,6 +30,7 @@ const eslintOptions = (args: arg.Spec, defaultCacheLocation: string) => ({
     args['--report-unused-disable-directives'] || null,
   cache: !Boolean(args['--no-cache']),
   cacheLocation: args['--cache-location'] || defaultCacheLocation,
+  cacheStrategy: args['--cache-strategy'] || 'metadata',
   errorOnUnmatchedPattern: args['--error-on-unmatched-pattern']
     ? Boolean(args['--error-on-unmatched-pattern'])
     : false,
@@ -67,6 +68,7 @@ const nextLint: cliCommand = async (argv) => {
     '--cache': Boolean, // Although cache is enabled by default, this dummy flag still exists to not cause any breaking changes
     '--no-cache': Boolean,
     '--cache-location': String,
+    '--cache-strategy': String,
     '--error-on-unmatched-pattern': Boolean,
     '--format': String,
 
@@ -134,6 +136,7 @@ const nextLint: cliCommand = async (argv) => {
         Caching:
           --no-cache                     Disable caching
           --cache-location path::String  Path to the cache file or directory - default: .eslintcache
+          --cache-strategy String        Strategy to use for detecting changed files in the cache, either metadata or content - default: metadata
         
         Miscellaneous:
           --error-on-unmatched-pattern   Show errors when any file patterns are unmatched - default: false

packages/next/client/head-manager.ts

@@ -60,10 +60,10 @@ function updateElements(type: string, components: JSX.Element[]): void {
   for (
     let i = 0, j = headCountEl.previousElementSibling;
     i < headCount;
-    i++, j = j!.previousElementSibling
+    i++, j = j?.previousElementSibling || null
   ) {
     if (j?.tagName?.toLowerCase() === type) {
-      oldTags.push(j!)
+      oldTags.push(j)
     }
   }
   const newTags = (components.map(reactElementToDOM) as HTMLElement[]).filter(
@@ -79,7 +79,7 @@ function updateElements(type: string, components: JSX.Element[]): void {
     }
   )
 
-  oldTags.forEach((t) => t.parentNode!.removeChild(t))
+  oldTags.forEach((t) => t.parentNode?.removeChild(t))
   newTags.forEach((t) => headEl.insertBefore(t, headCountEl))
   headCountEl.content = (headCount - oldTags.length + newTags.length).toString()
 }

packages/next/compiled/loader-utils2/package.json

@@ -0,0 +1 @@
+{"name":"loader-utils","main":"index.js","author":"Tobias Koppers @sokra","license":"MIT"}

packages/next/compiled/loader-utils3/LICENSE

@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/next/compiled/loader-utils3/package.json

@@ -0,0 +1 @@
+{"name":"loader-utils","main":"index.js","author":"Tobias Koppers @sokra","license":"MIT"}

packages/next/lib/typescript/writeConfigurationDefaults.ts

@@ -38,7 +38,7 @@ function getDesiredCompilerOptions(
     // 'parsedValue' matches the output value from ts.parseJsonConfigFileContent()
     esModuleInterop: {
       value: true,
-      reason: 'requirement for babel',
+      reason: 'requirement for SWC / babel',
     },
     module: {
       parsedValue: ts.ModuleKind.ESNext,
@@ -60,7 +60,7 @@ function getDesiredCompilerOptions(
     resolveJsonModule: { value: true, reason: 'to match webpack resolution' },
     isolatedModules: {
       value: true,
-      reason: 'requirement for babel',
+      reason: 'requirement for SWC / Babel',
     },
     jsx: {
       parsedValue: ts.JsxEmit.Preserve,

packages/next/package.json

@@ -224,7 +224,8 @@
     "is-wsl": "2.2.0",
     "json5": "2.2.0",
     "jsonwebtoken": "8.5.1",
-    "loader-utils": "3.1.0",
+    "loader-utils2": "npm:loader-utils@2.0.0",
+    "loader-utils3": "npm:loader-utils@3.1.3",
     "lodash.curry": "4.1.1",
     "lru-cache": "5.1.1",
     "micromatch": "4.0.4",

packages/next/taskfile.js

@@ -356,12 +356,21 @@ export async function ncc_jsonwebtoken(task, opts) {
     .target('compiled/jsonwebtoken')
 }
 // eslint-disable-next-line camelcase
-externals['loader-utils'] = 'next/dist/compiled/loader-utils'
-export async function ncc_loader_utils(task, opts) {
+externals['loader-utils'] = 'error loader-utils version not specified'
+externals['loader-utils2'] = 'next/dist/compiled/loader-utils2'
+export async function ncc_loader_utils2(task, opts) {
   await task
-    .source(opts.src || 'bundles/loader-utils.js')
-    .ncc({ packageName: 'loader-utils', externals })
-    .target('compiled/loader-utils')
+    .source(opts.src || relative(__dirname, require.resolve('loader-utils2')))
+    .ncc({ packageName: 'loader-utils2', externals })
+    .target('compiled/loader-utils2')
+}
+// eslint-disable-next-line camelcase
+externals['loader-utils3'] = 'next/dist/compiled/loader-utils3'
+export async function ncc_loader_utils3(task, opts) {
+  await task
+    .source(opts.src || relative(__dirname, require.resolve('loader-utils3')))
+    .ncc({ packageName: 'loader-utils3', externals })
+    .target('compiled/loader-utils3')
 }
 // eslint-disable-next-line camelcase
 externals['lodash.curry'] = 'next/dist/compiled/lodash.curry'
@@ -613,7 +622,13 @@ export async function ncc_resolve_url_loader(task, opts) {
     .source(
       opts.src || relative(__dirname, require.resolve('resolve-url-loader'))
     )
-    .ncc({ packageName: 'resolve-url-loader', externals })
+    .ncc({
+      packageName: 'resolve-url-loader',
+      externals: {
+        ...externals,
+        'loader-utils': externals['loader-utils2'], // actually loader-utils@1 but that is compatible
+      },
+    })
     .target('compiled/resolve-url-loader')
 }
 // eslint-disable-next-line camelcase
@@ -631,6 +646,7 @@ export async function ncc_sass_loader(task, opts) {
       externals: {
         ...externals,
         'schema-utils': externals['schema-utils3'],
+        'loader-utils': externals['loader-utils2'],
       },
       target: 'es5',
     })
@@ -958,7 +974,8 @@ export async function ncc(task, opts) {
         'ncc_is_wsl',
         'ncc_json5',
         'ncc_jsonwebtoken',
-        'ncc_loader_utils',
+        'ncc_loader_utils2',
+        'ncc_loader_utils3',
         'ncc_lodash_curry',
         'ncc_lru_cache',
         'ncc_nanoid',

packages/next/types/webpack.d.ts

@@ -24,7 +24,7 @@
 /// <reference types="node" />
 
 declare module 'mini-css-extract-plugin'
-declare module 'next/dist/compiled/loader-utils'
+declare module 'next/dist/compiled/loader-utils3'
 
 declare module 'next/dist/compiled/webpack/webpack' {
   import webpackSources from 'webpack-sources1'

test/integration/css-features/test/index.test.js

@@ -197,7 +197,7 @@ describe('CSS Modules: Import Global CSS', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"a .styles_foo__31qlD{all:initial}"`
+      `"a .styles_foo__Io_Us{all:initial}"`
     )
   })
 })
@@ -247,7 +247,7 @@ describe('CSS Modules: Import Exports', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".styles_blk__2ns7r{color:#000}"`
+      `".styles_blk__CqbFg{color:#000}"`
     )
   })
 })