Merge branch 'canary' into fix-fetch-url

.github/.kodiak.toml

@@ -13,6 +13,7 @@ notify_on_conflict = false
 [merge.message]
 title = "pull_request_title"
 body = "pull_request_body"
+include_coauthors= true
 include_pr_number = true
 body_type = "markdown"
 strip_html_comments = true

contributing.md

@@ -164,7 +164,24 @@ There are two options to develop with your local version of the codebase:
    yarn install --force
    ```
 
-or
+#### Troubleshooting
+
+- If you see the below error while running `yarn dev` with next:
+
+```
+Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc
+```
+
+Try to add the below section to your `package.json`, then run again
+
+```json
+"optionalDependencies": {
+  "@next/swc-linux-x64-gnu": "canary",
+  "@next/swc-win32-x64-msvc": "canary",
+  "@next/swc-darwin-x64": "canary",
+  "@next/swc-darwin-arm64": "canary"
+},
+```
 
 ### Develop inside the monorepo
 

docs/deployment.md

@@ -67,7 +67,7 @@ Next.js can be deployed to any hosting provider that supports Node.js. Make sure
 ```json
 {
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   }

docs/testing.md

@@ -13,7 +13,7 @@ description: Learn how to set up Next.js with three commonly used testing tools
   </ul>
 </details>
 
-Learn how to set up Next.js with three commonly used testing tools: [Cypress](https://www.cypress.io/blog/2021/04/06/cypress-component-testing-react/), [Jest](https://jestjs.io/docs/tutorial-react), and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
+Learn how to set up Next.js with commonly used testing tools: [Cypress](https://nextjs.org/docs/testing#cypress), [Playwright](https://nextjs.org/docs/testing#playwright), and [Jest with React Testing Library](https://nextjs.org/docs/testing#jest-and-react-testing-library).
 
 ## Cypress
 

examples/auth0/pages/advanced/ssr-profile.js

@@ -21,7 +21,7 @@ export async function getServerSideProps({ req, res }) {
   // Here you can check authentication status directly before rendering the page,
   // however the page would be a serverless function, which is more expensive and
   // slower than a static page with client side authentication
-  const session = await auth0.getSession(req)
+  const session = await auth0.getSession(req, res)
 
   if (!session || !session.user) {
     res.writeHead(302, {

jest.config.js

@@ -1,16 +1,16 @@
-const path = require('path')
+const nextJest = require('next/jest')
 
-module.exports = {
+const createJestConfig = nextJest()
+
+// Any custom config you want to pass to Jest
+const customJestConfig = {
   testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup-after-env.ts'],
   verbose: true,
   rootDir: 'test',
   modulePaths: ['<rootDir>/lib'],
-  transformIgnorePatterns: ['/node_modules/', '/next[/\\\\]dist/', '/.next/'],
-  transform: {
-    '.+\\.(t|j)sx?$': [
-      // this matches our SWC options used in https://github.com/vercel/next.js/blob/canary/packages/next/taskfile-swc.js
-      path.join(__dirname, './packages/next/jest.js'),
-    ],
-  },
+  transformIgnorePatterns: ['/next[/\\\\]dist/'],
 }
+
+// createJestConfig is exported in this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

lerna.json

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

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

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

packages/next-codemod/package.json

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

packages/next-env/package.json

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

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

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

packages/next/build/entries.ts

@@ -268,6 +268,7 @@ export function finalizeEntrypoint({
         type: 'assign',
       },
       runtime: MIDDLEWARE_SSR_RUNTIME_WEBPACK,
+      asyncChunks: false,
       ...entry,
     }
     return ssrMiddlewareEntry

packages/next/build/index.ts

@@ -779,7 +779,7 @@ export default async function build(
             )
           }
           Log.warn(
-            `Restarted static page genertion for ${pagePath} because it took more than ${timeout} seconds`
+            `Restarted static page generation for ${pagePath} because it took more than ${timeout} seconds`
           )
         } else {
           const pagePath = arg

packages/next/build/jest/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

packages/next/build/jest/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

packages/next/build/jest/jest.ts

@@ -0,0 +1,134 @@
+import { loadEnvConfig } from '@next/env'
+import { resolve, join } from 'path'
+import loadConfig from '../../server/config'
+import { PHASE_TEST } from '../../shared/lib/constants'
+// import loadJsConfig from '../load-jsconfig'
+import * as Log from '../output/log'
+
+async function getConfig(dir: string) {
+  const conf = await loadConfig(PHASE_TEST, dir)
+  return conf
+}
+
+/**
+ * Loads closest package.json in the directory hierarchy
+ */
+function loadClosestPackageJson(dir: string, attempts = 1): any {
+  if (attempts > 5) {
+    throw new Error("Can't resolve main package.json file")
+  }
+  var mainPath = attempts === 1 ? './' : Array(attempts).join('../')
+  try {
+    return require(join(dir, mainPath + 'package.json'))
+  } catch (e) {
+    return loadClosestPackageJson(dir, attempts + 1)
+  }
+}
+
+console.warn(
+  '"next/jest" is currently experimental. https://nextjs.org/docs/messages/experimental-jest-transformer'
+)
+
+/*
+// Usage in jest.config.js
+const nextJest = require('next/jest');
+
+// Optionally provide path to Next.js app which will enable loading next.config.js and .env files
+const createJestConfig = nextJest({ dir })
+
+// Any custom config you want to pass to Jest
+const customJestConfig = {
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+}
+
+// createJestConfig is exported in this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)
+*/
+export default function nextJest(options: { dir?: string } = {}) {
+  // createJestConfig
+  return (customJestConfig: any) => {
+    // Function that is provided as the module.exports of jest.config.js
+    // Will be called and awaited by Jest
+    return async () => {
+      let nextConfig
+      let paths
+      let resolvedBaseUrl
+      let isEsmProject = false
+      if (options.dir) {
+        const resolvedDir = resolve(options.dir)
+        const packageConfig = loadClosestPackageJson(resolvedDir)
+        isEsmProject = packageConfig.type === 'module'
+
+        nextConfig = await getConfig(resolvedDir)
+        loadEnvConfig(resolvedDir, false, Log)
+        // TODO: revisit when bug in SWC is fixed that strips `.css`
+        // const result = await loadJsConfig(resolvedDir, nextConfig)
+        // paths = result?.jsConfig?.compilerOptions?.paths
+        // resolvedBaseUrl = result.resolvedBaseUrl
+      }
+      // Ensure provided async config is supported
+      const resolvedJestConfig =
+        typeof customJestConfig === 'function'
+          ? await customJestConfig()
+          : customJestConfig
+
+      return {
+        ...resolvedJestConfig,
+
+        moduleNameMapper: {
+          // Handle CSS imports (with CSS modules)
+          // https://jestjs.io/docs/webpack#mocking-css-modules
+          '^.+\\.module\\.(css|sass|scss)$':
+            require.resolve('./object-proxy.js'),
+
+          // Handle CSS imports (without CSS modules)
+          '^.+\\.(css|sass|scss)$': require.resolve('./__mocks__/styleMock.js'),
+
+          // Handle image imports
+          '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': require.resolve(
+            `./__mocks__/fileMock.js`
+          ),
+
+          // Custom config will be able to override the default mappings
+          ...(resolvedJestConfig.moduleNameMapper || {}),
+        },
+        testPathIgnorePatterns: [
+          // Don't look for tests in node_modules
+          '/node_modules/',
+          // Don't look for tests in the the Next.js build output
+          '/.next/',
+          // Custom config can append to testPathIgnorePatterns but not modify it
+          // This is to ensure `.next` and `node_modules` are always excluded
+          ...(resolvedJestConfig.testPathIgnorePatterns || []),
+        ],
+
+        transform: {
+          // Use SWC to compile tests
+          '^.+\\.(js|jsx|ts|tsx)$': [
+            require.resolve('../swc/jest-transformer'),
+            {
+              styledComponents:
+                nextConfig && nextConfig.experimental.styledComponents,
+              paths,
+              resolvedBaseUrl: resolvedBaseUrl,
+              isEsmProject,
+            },
+          ],
+          // Allow for appending/overriding the default transforms
+          ...(resolvedJestConfig.transform || {}),
+        },
+
+        transformIgnorePatterns: [
+          // To match Next.js behavior node_modules is not transformed
+          '/node_modules/',
+          // CSS modules are mocked so they don't need to be transformed
+          '^.+\\.module\\.(css|sass|scss)$',
+
+          // Custom config can append to transformIgnorePatterns but not modify it
+          // This is to ensure `node_modules` and .module.css/sass/scss are always excluded
+          ...(resolvedJestConfig.transformIgnorePatterns || []),
+        ],
+      }
+    }
+  }
+}

packages/next/build/jest/object-proxy.js

@@ -0,0 +1,37 @@
+/*
+The MIT License (MIT)
+
+Copyright (c) 2015 Keyan Zhang
+
+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.
+*/
+
+// This file is largely based on https://github.com/keyz/identity-obj-proxy
+// Excludes the polyfill for below Node.js 6
+export default new Proxy(
+  {},
+  {
+    get: function getter(target, key) {
+      if (key === '__esModule') {
+        return false
+      }
+      return key
+    },
+  }
+)