Merge branch 'canary' into chore/rm-deprecated-substr

docs/advanced-features/compiler.md

@@ -233,6 +233,89 @@ module.exports = {
 
 If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237).
 
+### Modularize Imports
+
+Allows to modularize imports, similar to [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports).
+
+Transforms member style imports:
+
+```js
+import { Row, Grid as MyGrid } from 'react-bootstrap'
+import { merge } from 'lodash'
+```
+
+...into default style imports:
+
+```js
+import Row from 'react-bootstrap/lib/Row'
+import MyGrid from 'react-bootstrap/lib/Grid'
+import merge from 'lodash/merge'
+```
+
+Config for the above transform:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    modularizeImports: {
+      'react-bootstrap': {
+        transform: 'react-bootstrap/lib/{{member}}',
+      },
+      lodash: {
+        transform: 'lodash/{{member}}',
+      },
+    },
+  },
+}
+```
+
+Advanced transformations:
+
+- Using regular expressions
+
+Similar to `babel-plugin-transform-imports`, but the transform is templated with [handlebars](https://docs.rs/handlebars) and regular expressions are in Rust [regex](https://docs.rs/regex/latest/regex/) crate's syntax.
+
+The config:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    modularizeImports: {
+      'my-library/?(((\\w*)?/?)*)': {
+        transform: 'my-library/{{ matches.[1] }}/{{member}}',
+      },
+    },
+  },
+}
+```
+
+Cause this code:
+
+```js
+import { MyModule } from 'my-library'
+import { App } from 'my-library/components'
+import { Header, Footer } from 'my-library/components/App'
+```
+
+To become:
+
+```js
+import MyModule from 'my-library/MyModule'
+import App from 'my-library/components/App'
+import Header from 'my-library/components/App/Header'
+import Footer from 'my-library/components/App/Footer'
+```
+
+- Handlebars templating
+
+This transform uses [handlebars](https://docs.rs/handlebars) to template the replacement import path in the `transform` field. These variables and helper functions are available:
+
+1. `matches`: Has type `string[]`. All groups matched by the regular expression. `matches.[0]` is the full match.
+2. `member`: Has type `string`. The name of the member import.
+3. `lowerCase`, `upperCase`, `camelCase`: Helper functions to convert a string to lower, upper or camel cases.
+
 ## Unsupported Features
 
 When your application has a `.babelrc` file, Next.js will automatically fall back to using Babel for transforming individual files. This ensures backwards compatibility with existing applications that leverage custom Babel plugins.

docs/advanced-features/react-18/server-components.md

@@ -7,7 +7,7 @@ Server Components allow us to render React components on the server. This is fun
 To use React Server Components, ensure you have React 18 installed:
 
 ```jsx
-npm install next@latest react@rc react-dom@rc
+npm install next@canary react@rc react-dom@rc
 ```
 
 Then, update your `next.config.js`:

docs/api-reference/data-fetching/get-static-props.md

@@ -85,7 +85,7 @@ Learn more about [Incremental Static Regeneration](/docs/basic-features/data-fet
 
 ### `notFound`
 
-The `notFound` boolean allows the page to return a `404` status and [404 Page](/docs/advanced-features/custom-error-page.md#404-page). With `notFound: true`, the page will return a `404` even if there was a successfully generated page before. This is meant to support use cases like user-generated content getting removed by its author.
+The `notFound` boolean allows the page to return a `404` status and [404 Page](/docs/advanced-features/custom-error-page.md#404-page). With `notFound: true`, the page will return a `404` even if there was a successfully generated page before. This is meant to support use cases like user-generated content getting removed by its author. Note, `notFound` follows the same `revalidate` behavior [described here](/docs/api-reference/data-fetching/get-static-props.md#revalidate)
 
 ```js
 export async function getStaticProps(context) {

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

@@ -323,7 +323,7 @@ module.exports = {
 }
 ```
 
-If you're using `trailingSlash: true`, you also need to insert a trailing slash in the `source` paramater. If the destination server is also expecting a trailing slash it should be included in the `destination` parameter as well.
+If you're using `trailingSlash: true`, you also need to insert a trailing slash in the `source` parameter. If the destination server is also expecting a trailing slash it should be included in the `destination` parameter as well.
 
 ```js
 module.exports = {

docs/basic-features/script.md

@@ -166,7 +166,7 @@ There are a number of trade-offs that need to be considered when loading a third
 
 Although the `worker` strategy does not require any additional configuration to work, Partytown supports the use of a config object to modify some of its settings, including enabling `debug` mode and forwarding events and triggers.
 
-If you would like to add additonal configuration options, you can include it within the `<Head />` component used in a [custom `_document.js`](/docs/advanced-features/custom-document.md):
+If you would like to add additional configuration options, you can include it within the `<Head />` component used in a [custom `_document.js`](/docs/advanced-features/custom-document.md):
 
 ```jsx
 import { Html, Head, Main, NextScript } from 'next/document'

errors/link-no-children.md

@@ -0,0 +1,35 @@
+# No children were passed to <Link>
+
+#### Why This Error Occurred
+
+In your application code `next/link` was used without passing a child:
+
+For example:
+
+```js
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <Link href="/about"></Link>
+    // or
+    <Link href='/about' />
+  )
+}
+```
+
+#### Possible Ways to Fix It
+
+Make sure one child is used when using `<Link>`:
+
+```js
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <Link href="/about">
+      <a>To About</a>
+    </Link>
+  )
+}
+```

errors/manifest.json

@@ -514,6 +514,10 @@
           "title": "future-webpack5-moved-to-webpack5",
           "path": "/errors/future-webpack5-moved-to-webpack5.md"
         },
+        {
+          "title": "link-no-children",
+          "path": "/errors/link-no-children.md"
+        },
         {
           "title": "link-multiple-children",
           "path": "/errors/link-multiple-children.md"

examples/modularize-imports/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/modularize-imports/README.md

@@ -0,0 +1,27 @@
+# Modularize Imports Example
+
+This example shows how to use the `modularizeImports` config option.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/modularize-imports)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/modularize-imports&project-name=modularize-imports&repository-name=modularize-imports)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example modularize-imports modularize-imports-app
+# or
+yarn create next-app --example modularize-imports modularize-imports-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/modularize-imports/components/halves/LeftHalf.js

@@ -0,0 +1,3 @@
+export default function LeftHalf() {
+  return <span>Modularize</span>
+}

examples/modularize-imports/components/halves/RightHalf.js

@@ -0,0 +1,3 @@
+export default function RightHalf() {
+  return <span>Imports</span>
+}

examples/modularize-imports/components/halves/index.js

@@ -0,0 +1,5 @@
+// import LeftHalf from './LeftHalf'
+// import RightHalf from './RightHalf'
+
+// Remove the exports here so that we can verify that `modularize-imports` is working.
+// export { LeftHalf, RightHalf };

examples/modularize-imports/next.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  experimental: {
+    modularizeImports: {
+      '../components/halves': {
+        transform: '../components/halves/{{ member }}',
+      },
+    },
+  },
+}

examples/modularize-imports/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

examples/modularize-imports/pages/index.js

@@ -0,0 +1,10 @@
+import { LeftHalf, RightHalf } from '../components/halves'
+
+const Index = () => (
+  <div>
+    <LeftHalf />
+    <RightHalf />
+  </div>
+)
+
+export default Index

examples/with-emotion-swc/pages/index.js

@@ -1,5 +1,13 @@
 import { css } from '@emotion/react'
-import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles'
+import {
+  Animated,
+  Basic,
+  bounce,
+  Combined,
+  Pink,
+  BasicExtended,
+  ComponentSelectorsExtended,
+} from '../shared/styles'
 
 const Home = () => (
   <div
@@ -14,6 +22,9 @@ const Home = () => (
       With <code>:hover</code>.
     </Combined>
     <Animated animation={bounce}>Let's bounce.</Animated>
+    <ComponentSelectorsExtended>
+      <BasicExtended>Nested</BasicExtended>
+    </ComponentSelectorsExtended>
   </div>
 )
 

examples/with-emotion-swc/shared/styles.js

@@ -58,10 +58,19 @@ export const Combined = styled.div`
   }
 `
 
-export const Pink = styled.div(basicStyles, {
+export const Pink = styled(Basic)({
   color: 'hotpink',
 })
 
+export const BasicExtended = styled(Basic)``
+
+export const ComponentSelectorsExtended = styled.div`
+  ${BasicExtended} {
+    color: green;
+  }
+  box-shadow: -5px -5px 0 0 green;
+`
+
 export const Animated = styled.div`
   ${basicStyles};
   ${hoverStyles};

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.1-canary.15"
+  "version": "12.1.1-canary.17"
 }

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.1-canary.15",
+  "version": "12.1.1-canary.17",
   "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.1.1-canary.15",
+    "@next/eslint-plugin-next": "12.1.1-canary.17",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

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

packages/next-env/package.json

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