Merge branch 'canary' into add/views-client-router

vercel · May 12, 2022 · b6078cc · b6078cc
2 parents 6039388 + 1ccf368
commit b6078cc
Show file tree

Hide file tree

Showing 45 changed files with 614 additions and 290 deletions.
diff --git a/docs/advanced-features/react-18/switchable-runtime.md b/docs/advanced-features/react-18/switchable-runtime.md
@@ -2,6 +2,8 @@
 
 By default, Next.js uses Node.js as the runtime for page rendering, including pre-rendering and server-side rendering.
 
+> Note: `runtime` option only effects pages but not middleware
+
 If you have [React 18](/docs/advanced-features/react-18/overview) installed, there is a new experimental feature that lets you switch the page runtime between Node.js and the [Edge Runtime](/docs/api-reference/edge-runtime). Changing the runtime affects [SSR streaming](/docs/advanced-features/react-18/streaming) and [Server Components](/docs/advanced-features/react-18/server-components) features, as well.
 
 ## Global Runtime Option

diff --git a/docs/api-reference/next.config.js/custom-webpack-config.md b/docs/api-reference/next.config.js/custom-webpack-config.md
@@ -4,6 +4,8 @@ description: Extend the default webpack config added by Next.js.
 
 # Custom Webpack Config
 
+> Note: changes to webpack config are not covered by semver so proceed at your own risk
+
 Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case:
 
 - [CSS imports](/docs/basic-features/built-in-css-support.md#adding-a-global-stylesheet)
@@ -22,7 +24,10 @@ In order to extend our usage of `webpack`, you can define a function that extend
 
 ```js
 module.exports = {
- webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+ webpack: (
+ config,
+ { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
+ ) => {
  // Important: return the modified config
  return config
  },
@@ -36,7 +41,7 @@ The second argument to the `webpack` function is an object with the following pr
 - `buildId`: `String` - The build id, used as a unique identifier between builds
 - `dev`: `Boolean` - Indicates if the compilation will be done in development
 - `isServer`: `Boolean` - It's `true` for server-side compilation, and `false` for client-side compilation
-- `nextRuntime`: `String` - The target runtime for server-side compilation; either `"edge"` or `"nodejs"`
+- `nextRuntime`: `String | undefined` - The target runtime for server-side compilation; either `"edge"` or `"nodejs"`, it's `undefined` for client-side compilation.
 - `defaultLoaders`: `Object` - Default loaders used internally by Next.js:
  - `babel`: `Object` - Default `babel-loader` configuration
 
@@ -64,6 +69,10 @@ module.exports = {
 }
 ```
 
+#### `nextRuntime`
+
+Notice that `isServer` is `true` when `nextRuntime` is `"edge"` or `"nodejs"`, nextRuntime "`edge`" is currently for middleware and server components in edge runtime only.
+
 ## Related
 
 <div class="card">

diff --git a/docs/basic-features/built-in-css-support.md b/docs/basic-features/built-in-css-support.md
@@ -189,10 +189,10 @@ For example, using the exported `primaryColor` Sass variable:
 
 ```scss
 /* variables.module.scss */
-$primary-color: #64FF00
+$primary-color: #64ff00;
 
 :export {
- primaryColor: $primary-color
+ primaryColor: $primary-color;
 }
 ```
 

diff --git a/examples/with-jest-babel/README.md b/examples/with-jest-babel/README.md
@@ -11,11 +11,11 @@ Quickly get started using [Create Next App](https://github.com/vercel/next.js/tr
 In your terminal, run the following command:
 
 ```bash
-npx create-next-app --example with-jest with-jest-app
+npx create-next-app --example with-jest-babel with-jest-babel-app
 # or
-yarn create next-app --example with-jest with-jest-app
+yarn create next-app --example with-jest-babel with-jest-babel-app
 # or
-pnpm create next-app -- --example with-jest with-jest-app
+pnpm create next-app -- --example with-jest-babel with-jest-babel-app
 ```
 
 ## Run Jest Tests

diff --git a/examples/with-jest-babel/package.json b/examples/with-jest-babel/package.json
@@ -2,28 +2,25 @@
  "private": true,
  "scripts": {
  "dev": "next dev",
- "lint": "next lint",
  "build": "next build",
  "start": "next start",
  "test": "jest --watch",
  "test:ci": "jest --ci"
  },
  "dependencies": {
  "next": "latest",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0"
  },
  "devDependencies": {
- "@testing-library/jest-dom": "5.16.1",
- "@testing-library/react": "12.1.2",
- "@testing-library/user-event": "13.5.0",
- "@types/react": "17.0.37",
- "babel-jest": "27.4.5",
- "eslint": "8.5.0",
- "eslint-config-next": "latest",
- "eslint-plugin-testing-library": "5.0.1",
+ "@testing-library/jest-dom": "5.16.4",
+ "@testing-library/react": "13.2.0",
+ "@testing-library/user-event": "14.2.0",
+ "@types/react": "18.0.9",
+ "babel-jest": "28.1.0",
  "identity-obj-proxy": "3.0.0",
- "jest": "27.4.5",
- "typescript": "4.5.4"
+ "jest": "28.1.0",
+ "jest-environment-jsdom": "28.1.0",
+ "typescript": "4.6.4"
  }
 }
diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json
@@ -9,15 +9,16 @@
  },
  "dependencies": {
  "next": "latest",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0"
  },
  "devDependencies": {
- "@testing-library/jest-dom": "5.16.1",
- "@testing-library/react": "12.1.2",
- "@testing-library/user-event": "13.5.0",
- "@types/react": "17.0.38",
- "jest": "27.4.5",
- "typescript": "4.5.4"
+ "@testing-library/jest-dom": "5.16.4",
+ "@testing-library/react": "13.2.0",
+ "@testing-library/user-event": "14.2.0",
+ "@types/react": "18.0.9",
+ "jest": "28.1.0",
+ "jest-environment-jsdom": "28.1.0",
+ "typescript": "4.6.4"
  }
 }
diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
  "registry": "https://registry.npmjs.org/"
  }
  },
- "version": "12.1.7-canary.4"
+ "version": "12.1.7-canary.5"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
  "name": "create-next-app",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "keywords": [
  "react",
  "next",

diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "eslint-config-next",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "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.7-canary.4",
+ "@next/eslint-plugin-next": "12.1.7-canary.5",
  "@rushstack/eslint-patch": "^1.1.3",
  "@typescript-eslint/parser": "^5.21.0",
  "eslint-import-resolver-node": "^0.3.6",

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/eslint-plugin-next",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "description": "ESLint plugin for NextJS.",
  "main": "lib/index.js",
  "license": "MIT",

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/bundle-analyzer",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "main": "index.js",
  "license": "MIT",
  "repository": {

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/codemod",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "license": "MIT",
  "dependencies": {
  "chalk": "4.1.0",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/env",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "keywords": [
  "react",
  "next",

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/mdx",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "main": "index.js",
  "license": "MIT",
  "repository": {

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/plugin-storybook",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "repository": {
  "url": "vercel/next.js",
  "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/polyfill-module",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "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",

diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/polyfill-nomodule",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "description": "A polyfill for non-dead, nomodule browsers.",
  "main": "dist/polyfill-nomodule.js",
  "license": "MIT",

diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@next/swc",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "private": true,
  "scripts": {
  "build-native": "napi build --platform --cargo-name next_swc_napi native",

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1408,6 +1408,9 @@ export default async function getBaseWebpackConfig(
  isEdgeServer ? 'edge' : 'nodejs'
  ),
  }),
+ 'process.env.__NEXT_MANUAL_CLIENT_BASE_PATH': JSON.stringify(
+ config.experimental.manualClientBasePath
+ ),
  'process.env.__NEXT_NEW_LINK_BEHAVIOR': JSON.stringify(
  config.experimental.newNextLinkBehavior
  ),

diff --git a/packages/next/client/page-loader.ts b/packages/next/client/page-loader.ts
@@ -156,7 +156,8 @@ export default class PageLoader {
  '.json'
  )
  return addBasePath(
- `/_next/data/${this.buildId}${dataRoute}${ssg ? '' : search}`
+ `/_next/data/${this.buildId}${dataRoute}${ssg ? '' : search}`,
+ true
  )
  }
 

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "next",
- "version": "12.1.7-canary.4",
+ "version": "12.1.7-canary.5",
  "description": "The React Framework",
  "main": "./dist/server/next.js",
  "license": "MIT",
@@ -69,7 +69,7 @@
  ]
  },
  "dependencies": {
- "@next/env": "12.1.7-canary.4",
+ "@next/env": "12.1.7-canary.5",
  "caniuse-lite": "^1.0.30001332",
  "postcss": "8.4.5",
  "styled-jsx": "5.0.2",
@@ -118,11 +118,11 @@
  "@hapi/accept": "5.0.2",
  "@napi-rs/cli": "2.4.4",
  "@napi-rs/triples": "1.1.0",
- "@next/polyfill-module": "12.1.7-canary.4",
- "@next/polyfill-nomodule": "12.1.7-canary.4",
- "@next/react-dev-overlay": "12.1.7-canary.4",
- "@next/react-refresh-utils": "12.1.7-canary.4",
- "@next/swc": "12.1.7-canary.4",
+ "@next/polyfill-module": "12.1.7-canary.5",
+ "@next/polyfill-nomodule": "12.1.7-canary.5",
+ "@next/react-dev-overlay": "12.1.7-canary.5",
+ "@next/react-refresh-utils": "12.1.7-canary.5",
+ "@next/swc": "12.1.7-canary.5",
  "@peculiar/webcrypto": "1.3.1",
  "@taskr/clear": "1.1.0",
  "@taskr/esnext": "1.1.0",

diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
@@ -79,6 +79,7 @@ export interface NextJsWebpackConfig {
 }
 
 export interface ExperimentalConfig {
+ manualClientBasePath?: boolean
  newNextLinkBehavior?: boolean
  disablePostcssPresetEnv?: boolean
  swcMinify?: boolean

diff --git a/packages/next/server/node-web-streams-helper.ts b/packages/next/server/node-web-streams-helper.ts
@@ -86,18 +86,18 @@ export function decodeText(input?: Uint8Array, textDecoder?: TextDecoder) {
  : new TextDecoder().decode(input)
 }
 
-export function createBufferedTransformStream(): TransformStream<
- Uint8Array,
- Uint8Array
-> {
+export function createBufferedTransformStream(
+ transform: (v: string) => string | Promise<string> = (v) => v
+): TransformStream<Uint8Array, Uint8Array> {
  let bufferedString = ''
  let pendingFlush: Promise<void> | null = null
 
  const flushBuffer = (controller: TransformStreamDefaultController) => {
  if (!pendingFlush) {
  pendingFlush = new Promise((resolve) => {
- setTimeout(() => {
- controller.enqueue(encodeText(bufferedString))
+ setTimeout(async () => {
+ const buffered = await transform(bufferedString)
+ controller.enqueue(encodeText(buffered))
  bufferedString = ''
  pendingFlush = null
  resolve()