Merge branch 'canary' into eslint-create-next-app

docs/upgrading.md

@@ -4,6 +4,38 @@ description: Learn how to upgrade Next.js.
 
 # Upgrade Guide
 
+## Upgrading from version 10 to 11
+
+### Remove `super.componentDidCatch()` from `pages/_app.js`
+
+The `next/app` component's `componentDidCatch` has been deprecated since Next.js 9 as it's no longer needed and has since been a no-op, in Next.js 11 it has been removed.
+
+If your `pages/_app.js` has a custom `componentDidCatch` method you can remove `super.componentDidCatch` as it is no longer needed.
+
+### Remove `Container` from `pages/_app.js`
+
+This export has been deprecated since Next.js 9 as it's no longer needed and has since been a no-op with a warning during development. In Next.js 11 it has been removed.
+
+If your `pages/_app.js` imports `Container` from `next/app` you can remove `Container` as it has been removed. Learn more in [the documentation](https://nextjs.org/docs/messages/app-container-deprecated).
+
+### Remove `props.url` usage from page components
+
+This property has been deprecated since Next.js 4 and has since shown a warning during development. With the introduction of `getStaticProps` / `getServerSideProps` these methods already disallowed usage of `props.url`. In Next.js 11 it has been removed completely.
+
+You can learn more in [the documentation](https://nextjs.org/docs/messages/url-deprecated).
+
+### Remove `unsized` property on `next/image`
+
+The `unsized` property on `next/image` was deprecated in Next.js 10.0.1. You can use `layout="fill"` instead. In Next.js 11 `unsized` was removed.
+
+### Remove `modules` property on `next/dynamic`
+
+The `modules` and `render` option for `next/dynamic` have been deprecated since Next.js 9.5 showing a warning that it has been deprecated. This was done in order to make `next/dynamic` close to `React.lazy` in API surface. In Next.js 11 the `modules` and `render` options have been removed.
+
+This option hasn't been mentioned in the documentation since Next.js 8 so it's less likely that your application is using it.
+
+If you application does use `modules` and `render` you can refer to [the documentation](https://nextjs.org/docs/messages/next-dynamic-modules).
+
 ## React 16 to 17
 
 React 17 introduced a new [JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) that brings a long-time Next.js feature to the wider React ecosystem: Not having to `import React from 'react'` when using JSX. When using React 17 Next.js will automatically use the new transform. This transform does not make the `React` variable global, which was an unintended side-effect of the previous Next.js implementation. A [codemod is available](/docs/advanced-features/codemods.md#add-missing-react-import) to automatically fix cases where you accidentally used `React` without importing it.

examples/with-mdx-remote/README.md

@@ -34,10 +34,12 @@ For example, here's how you can change `getStaticProps` to pass a list of compon
 
 ```js
 import dynamic from 'next/dynamic'
+import Test from '../components/test'
 
 const SomeHeavyComponent = dynamic(() => import('SomeHeavyComponent'))
 
-// ...
+const defaultComponents = { Test }
+
 export function SomePage({ mdxSource, componentNames }) {
   const components = {
     ...defaultComponents,
@@ -46,10 +48,17 @@ export function SomePage({ mdxSource, componentNames }) {
       : null,
   }
 
-  return <MDXRemote {...mdxSource} />
+  return <MDXRemote {...mdxSource} components={components} />
 }
 
 export async function getStaticProps() {
+  const source = `---
+  title: Conditional custom components
+  ---
+
+  Some **mdx** text, with a default component <Test name={title}/> and a Heavy component <SomeHeavyComponent />
+  `
+
   const { content, data } = matter(source)
 
   const componentNames = [

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.2.4-canary.0"
+  "version": "10.2.4-canary.2"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.2.4-canary.0",
+  "version": "10.2.4-canary.2",
   "keywords": [
     "react",
     "next",

packages/create-next-app/templates/default/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

packages/create-next-app/templates/typescript/next.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  eslint: true,
+  reactStrictMode: true,
 }

packages/eslint-config-next/package.json

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

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.2.4-canary.0",
+  "version": "10.2.4-canary.2",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.2.4-canary.0",
+  "version": "10.2.4-canary.2",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "10.2.4-canary.0",
+  "version": "10.2.4-canary.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

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

packages/next/build/index.ts

@@ -543,33 +543,25 @@ export default async function build(
     const webpackBuildStart = process.hrtime()
 
     let result: CompilerResult = { warnings: [], errors: [] }
-    // We run client and server compilation separately when configured for
-    // memory constraint and for serverless to be able to load manifests
-    // produced in the client build
-    if (isLikeServerless || config.experimental.serialWebpackBuild) {
-      await nextBuildSpan
-        .traceChild('run-webpack-compiler')
-        .traceAsyncFn(async () => {
-          const clientResult = await runCompiler(clientConfig)
-          // Fail build if clientResult contains errors
-          if (clientResult.errors.length > 0) {
-            result = {
-              warnings: [...clientResult.warnings],
-              errors: [...clientResult.errors],
-            }
-          } else {
-            const serverResult = await runCompiler(configs[1])
-            result = {
-              warnings: [...clientResult.warnings, ...serverResult.warnings],
-              errors: [...clientResult.errors, ...serverResult.errors],
-            }
+    // We run client and server compilation separately to optimize for memory usage
+    await nextBuildSpan
+      .traceChild('run-webpack-compiler')
+      .traceAsyncFn(async () => {
+        const clientResult = await runCompiler(clientConfig)
+        // Fail build if clientResult contains errors
+        if (clientResult.errors.length > 0) {
+          result = {
+            warnings: [...clientResult.warnings],
+            errors: [...clientResult.errors],
           }
-        })
-    } else {
-      result = await nextBuildSpan
-        .traceChild('run-webpack-compiler')
-        .traceAsyncFn(() => runCompiler(configs))
-    }
+        } else {
+          const serverResult = await runCompiler(configs[1])
+          result = {
+            warnings: [...clientResult.warnings, ...serverResult.warnings],
+            errors: [...clientResult.errors, ...serverResult.errors],
+          }
+        }
+      })
 
     const webpackBuildEnd = process.hrtime(webpackBuildStart)
     if (buildSpinner) {

packages/next/build/webpack-config.ts

@@ -260,7 +260,9 @@ export default async function getBaseWebpackConfig(
 
   const distDir = path.join(dir, config.distDir)
 
-  const babelLoader = config.experimental.turboMode
+  // Webpack 5 can use the faster babel loader, webpack 5 has built-in caching for loaders
+  // For webpack 4 the old loader is used as it has external caching
+  const babelLoader = isWebpack5
     ? require.resolve('./babel/loader/index')
     : 'next-babel-loader'
   const defaultLoaders = {

packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts

@@ -106,7 +106,7 @@ export class FontStylesheetGatheringPlugin {
               !props.rel ||
               props.rel !== 'stylesheet' ||
               !props.href ||
-              !OPTIMIZED_FONT_PROVIDERS.some((url) =>
+              !OPTIMIZED_FONT_PROVIDERS.some(({ url }) =>
                 props.href.startsWith(url)
               )
             ) {

packages/next/client/image.tsx

@@ -62,12 +62,6 @@ export type ImageProps = Omit<
   objectFit?: ImgElementStyle['objectFit']
   objectPosition?: ImgElementStyle['objectPosition']
 } & (
-    | {
-        width?: never
-        height?: never
-        /** @deprecated Use `layout="fill"` instead */
-        unsized: true
-      }
     | { width?: never; height?: never; layout: 'fill' }
     | {
         width: number | string
@@ -260,12 +254,7 @@ export default function Image({
 }: ImageProps) {
   let rest: Partial<ImageProps> = all
   let layout: NonNullable<LayoutValue> = sizes ? 'responsive' : 'intrinsic'
-  let unsized = false
-  if ('unsized' in rest) {
-    unsized = Boolean(rest.unsized)
-    // Remove property so it's not spread into image:
-    delete rest['unsized']
-  } else if ('layout' in rest) {
+  if ('layout' in rest) {
     // Override default layout if the user specified one:
     if (rest.layout) layout = rest.layout
 
@@ -304,11 +293,6 @@ export default function Image({
         `Image with src "${src}" has both "priority" and "loading='lazy'" properties. Only one should be used.`
       )
     }
-    if (unsized) {
-      throw new Error(
-        `Image with src "${src}" has deprecated "unsized" property, which was removed in favor of the "layout='fill'" property`
-      )
-    }
   }
 
   let isLazy =
@@ -461,11 +445,6 @@ export default function Image({
     })
   }
 
-  if (unsized) {
-    wrapperStyle = undefined
-    sizerStyle = undefined
-    imgStyle = undefined
-  }
   return (
     <div style={wrapperStyle}>
       {sizerStyle ? (

packages/next/next-server/lib/constants.ts

@@ -37,8 +37,9 @@ export const TEMPORARY_REDIRECT_STATUS = 307
 export const PERMANENT_REDIRECT_STATUS = 308
 export const STATIC_PROPS_ID = '__N_SSG'
 export const SERVER_PROPS_ID = '__N_SSP'
+export const GOOGLE_FONT_PROVIDER = 'https://fonts.googleapis.com/css'
 export const OPTIMIZED_FONT_PROVIDERS = [
-  'https://fonts.googleapis.com/css',
-  'https://use.typekit.net/',
+  { url: GOOGLE_FONT_PROVIDER, preconnect: 'https://fonts.gstatic.com' },
+  { url: 'https://use.typekit.net', preconnect: 'https://use.typekit.net' },
 ]
 export const STATIC_STATUS_PAGES = ['/500']

packages/next/next-server/lib/dynamic.tsx

@@ -33,16 +33,9 @@ export type LoadableBaseOptions<P = {}> = LoadableGeneratedOptions & {
   ssr?: boolean
 }
 
-export type LoadableOptions<P = {}> = LoadableBaseOptions<P> & {
-  render?(loader: any, props: any): JSX.Element
-}
+export type LoadableOptions<P = {}> = LoadableBaseOptions<P>
 
-export type DynamicOptions<P = {}> = LoadableBaseOptions<P> & {
-  /**
-   * @deprecated the modules option has been planned for removal
-   */
-  render?(props: P, loaded: any): JSX.Element
-}
+export type DynamicOptions<P = {}> = LoadableBaseOptions<P>
 
 export type LoadableFn<P = {}> = (
   opts: LoadableOptions<P>
@@ -117,40 +110,6 @@ export default function dynamic<P = {}>(
   // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
   loadableOptions = { ...loadableOptions, ...options }
 
-  if (
-    typeof dynamicOptions === 'object' &&
-    !(dynamicOptions instanceof Promise)
-  ) {
-    // show deprecation warning for `modules` key in development
-    if (process.env.NODE_ENV !== 'production') {
-      if (dynamicOptions.modules) {
-        console.warn(
-          'The modules option for next/dynamic has been deprecated. See here for more info https://nextjs.org/docs/messages/next-dynamic-modules'
-        )
-      }
-    }
-    // Support for `render` when using a mapping, eg: `dynamic({ modules: () => {return {HelloWorld: import('../hello-world')}, render(props, loaded) {} } })
-    if (dynamicOptions.render) {
-      loadableOptions.render = (loaded, props) =>
-        dynamicOptions.render!(props, loaded)
-    }
-    // Support for `modules` when using a mapping, eg: `dynamic({ modules: () => {return {HelloWorld: import('../hello-world')}, render(props, loaded) {} } })
-    if (dynamicOptions.modules) {
-      loadableFn = Loadable.Map
-      const loadModules: LoaderMap = {}
-      const modules = dynamicOptions.modules()
-      Object.keys(modules).forEach((key) => {
-        const value: any = modules[key]
-        if (typeof value.then === 'function') {
-          loadModules[key] = () => value.then((mod: any) => mod.default || mod)
-          return
-        }
-        loadModules[key] = value
-      })
-      loadableOptions.loader = loadModules
-    }
-  }
-
   // coming from build/babel/plugins/react-loadable-plugin.js
   if (loadableOptions.loadableGenerated) {
     loadableOptions = {