Merge remote-tracking branch 'upstream/canary' into ssg/return-404

# Conflicts:
#	packages/next/next-server/server/render.tsx

.eslintignore

@@ -13,4 +13,5 @@ packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
-packages/next-env/**/*.d.ts
+packages/next-env/**/*.d.ts
+test/integration/async-modules/**

.github/workflows/build_test_deploy.yml

@@ -113,6 +113,7 @@ jobs:
       - run: yarn install --check-files
       - run: node run-tests.js test/integration/production/test/index.test.js
       - run: node run-tests.js test/integration/basic/test/index.test.js
+      - run: node run-tests.js test/integration/async-modules/test/index.test.js
       - run: node run-tests.js test/integration/font-optimization/test/index.test.js
       - run: node run-tests.js test/acceptance/*
 

docs/advanced-features/custom-app.md

@@ -44,6 +44,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 - If your app is running and you just added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
 - Adding a custom `getInitialProps` in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) in pages without [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation).
+- `App` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).
 
 ### TypeScript
 

docs/advanced-features/custom-document.md

@@ -51,9 +51,10 @@ The `ctx` object is equivalent to the one received in [`getInitialProps`](/docs/
 
 ## Caveats
 
-- `Document` is only rendered in the server, event handlers like `onClick` won't work
-- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), take a look at the [`App`](/docs/advanced-features/custom-app.md) component instead
-- `Document`'s `getInitialProps` function is not called during client-side transitions, nor when a page is [statically optimized](/docs/advanced-features/automatic-static-optimization.md)
+- `Document` is only rendered in the server, event handlers like `onClick` won't work.
+- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), take a look at the [`App`](/docs/advanced-features/custom-app.md) component instead.
+- `Document`'s `getInitialProps` function is not called during client-side transitions, nor when a page is [statically optimized](/docs/advanced-features/automatic-static-optimization.md).
+- `Document` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).
 
 ## Customizing `renderPage`
 

docs/api-reference/create-next-app.md

@@ -18,6 +18,7 @@ yarn create next-app
 
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed
 
 ### Why use Create Next App?
 

docs/basic-features/fast-refresh.md

@@ -75,7 +75,7 @@ local state being reset on every edit to a file:
 - The file you're editing might have _other_ exports in addition to a React
   component.
 - Sometimes, a file would export the result of calling higher-order component
-  like `higherOrderComponent(WrappedComponent)`. If the returned component is a
+  like `HOC(WrappedComponent)`. If the returned component is a
   class, state will be reset.
 
 As more of your codebase moves to function components and Hooks, you can expect

docs/migrating/from-gatsby.md

@@ -84,10 +84,10 @@ import { getPostBySlug, getAllPosts } from '../lib/blog'
 
 export async function getStaticProps({ params }) {
   const post = getPostBySlug(params.slug)
-  const content = await remark()
+  const markdown = await remark()
     .use(html)
     .process(post.content || '')
-    .toString()
+  const content = markdown.toString()
 
   return {
     props: {
@@ -128,7 +128,7 @@ import { join } from 'path'
 const postsDirectory = join(process.cwd(), 'src', 'content', 'blog')
 
 export function getPostBySlug(slug) {
-  const realSlug = slug.replace(/\\.md$/, '')
+  const realSlug = slug.replace(/\.md$/, '')
   const fullPath = join(postsDirectory, `${realSlug}.md`)
   const fileContents = fs.readFileSync(fullPath, 'utf8')
   const { data, content } = matter(fileContents)

lerna.json

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

package.json

@@ -98,6 +98,7 @@
     "npm-run-all": "4.1.5",
     "nprogress": "0.2.0",
     "pixrem": "5.0.0",
+    "pnpm": "5.8.0",
     "postcss-nested": "4.2.1",
     "postcss-pseudoelements": "5.0.0",
     "postcss-short-size": "4.0.0",

packages/create-next-app/package.json

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

packages/eslint-plugin-next/package.json

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

packages/next-codemod/package.json

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

packages/next-env/package.json

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

packages/next-mdx/package.json

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

packages/next/build/index.ts

@@ -532,7 +532,7 @@ export default async function build(
         const serverBundle = getPagePath(page, distDir, isLikeServerless)
 
         if (customAppGetInitialProps === undefined) {
-          customAppGetInitialProps = hasCustomGetInitialProps(
+          customAppGetInitialProps = await hasCustomGetInitialProps(
             isLikeServerless
               ? serverBundle
               : getPagePath('/_app', distDir, isLikeServerless),

packages/next/build/plugins/collect-plugins.ts

@@ -19,8 +19,6 @@ export const VALID_MIDDLEWARE = [
   'document-head-tags-server',
   'on-init-client',
   'on-init-server',
-  'on-error-server',
-  'on-error-client',
   'on-error-client',
   'on-error-server',
   'babel-preset-build',

packages/next/build/utils.ts

@@ -704,21 +704,21 @@ export async function isPageStatic(
 }> {
   try {
     require('../next-server/lib/runtime-config').setConfig(runtimeEnvConfig)
-    const mod = require(serverBundle)
-    const Comp = mod.default || mod
+    const mod = await require(serverBundle)
+    const Comp = await (mod.default || mod)
 
     if (!Comp || !isValidElementType(Comp) || typeof Comp === 'string') {
       throw new Error('INVALID_DEFAULT_EXPORT')
     }
 
     const hasGetInitialProps = !!(Comp as any).getInitialProps
-    const hasStaticProps = !!mod.getStaticProps
-    const hasStaticPaths = !!mod.getStaticPaths
-    const hasServerProps = !!mod.getServerSideProps
-    const hasLegacyServerProps = !!mod.unstable_getServerProps
-    const hasLegacyStaticProps = !!mod.unstable_getStaticProps
-    const hasLegacyStaticPaths = !!mod.unstable_getStaticPaths
-    const hasLegacyStaticParams = !!mod.unstable_getStaticParams
+    const hasStaticProps = !!(await mod.getStaticProps)
+    const hasStaticPaths = !!(await mod.getStaticPaths)
+    const hasServerProps = !!(await mod.getServerSideProps)
+    const hasLegacyServerProps = !!(await mod.unstable_getServerProps)
+    const hasLegacyStaticProps = !!(await mod.unstable_getStaticProps)
+    const hasLegacyStaticPaths = !!(await mod.unstable_getStaticPaths)
+    const hasLegacyStaticParams = !!(await mod.unstable_getStaticParams)
 
     if (hasLegacyStaticParams) {
       throw new Error(
@@ -804,19 +804,20 @@ export async function isPageStatic(
   }
 }
 
-export function hasCustomGetInitialProps(
+export async function hasCustomGetInitialProps(
   bundle: string,
   runtimeEnvConfig: any,
   checkingApp: boolean
-): boolean {
+): Promise<boolean> {
   require('../next-server/lib/runtime-config').setConfig(runtimeEnvConfig)
   let mod = require(bundle)
 
   if (checkingApp) {
-    mod = mod._app || mod.default || mod
+    mod = (await mod._app) || mod.default || mod
   } else {
     mod = mod.default || mod
   }
+  mod = await mod
   return mod.getInitialProps !== mod.origGetInitialProps
 }
 

packages/next/build/webpack-config.ts

@@ -1,7 +1,7 @@
 import { codeFrameColumns } from '@babel/code-frame'
 import ReactRefreshWebpackPlugin from '@next/react-refresh-utils/ReactRefreshWebpackPlugin'
 import crypto from 'crypto'
-import { readFileSync } from 'fs'
+import { readFileSync, realpathSync } from 'fs'
 import chalk from 'next/dist/compiled/chalk'
 import semver from 'next/dist/compiled/semver'
 import TerserPlugin from 'next/dist/compiled/terser-webpack-plugin'
@@ -229,6 +229,25 @@ 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 =
@@ -583,6 +602,7 @@ export default async function getBaseWebpackConfig(
       'next/app',
       'next/document',
       'next/link',
+      'next/image',
       'next/error',
       'string-hash',
       'next/constants',
@@ -665,7 +685,12 @@ export default async function getBaseWebpackConfig(
       // Same as above: if the package, when required from the root,
       // would be different from what the real resolution would use, we
       // cannot externalize it.
-      if (baseRes !== res) {
+      if (
+        !baseRes ||
+        (baseRes !== res &&
+          // if res and baseRes are symlinks they could point to the the same file
+          realpathSync(baseRes) !== realpathSync(res))
+      ) {
         return callback()
       }
     }
@@ -984,6 +1009,7 @@ 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_ROUTER_BASEPATH': JSON.stringify(config.basePath),
         'process.env.__NEXT_HAS_REWRITES': JSON.stringify(hasRewrites),
         'process.env.__NEXT_i18n_SUPPORT': JSON.stringify(