Merge branch 'canary' into bugfix/generateStaticParams-previewData-dy…

…namic-usage-error

docs/api-reference/next/image.md

@@ -40,8 +40,8 @@ This `next/image` component uses browser native [lazy loading](https://caniuse.c
 
 ## Known Browser Bugs
 
-- [Safari 15](https://bugs.webkit.org/show_bug.cgi?id=243601) displays a gray border while loading. Possible solutions:
-  - Use CSS `@media not all and (min-resolution:.001dpcm) { img[loading="lazy"] { clip-path: inset(0.5px) } }`
+- [Safari 15+](https://bugs.webkit.org/show_bug.cgi?id=243601) displays a gray border while loading. Possible solutions:
+  - Use CSS `@supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }`
   - Use [`priority`](#priority) if the image is above the fold
 - [Firefox 67+](https://bugzilla.mozilla.org/show_bug.cgi?id=1556156) displays a white background while loading. Possible solutions:
   - Enable [AVIF `formats`](#acceptable-formats)

docs/basic-features/font-optimization.md

@@ -6,6 +6,8 @@ description: Optimizing loading web fonts with the built-in `@next/font` loaders
 
 [**`@next/font`**](/docs/api-reference/next/font.md) will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.
 
+> **🎥 Watch:** Learn more about how to use `@next/font` → [YouTube (6 minutes)](https://www.youtube.com/watch?v=L8_98i_bMMA).
+
 ## Overview
 
 `@next/font` includes **built-in automatic self-hosting** for _any_ font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS `size-adjust` property used.

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "13.0.6-canary.1"
+  "version": "13.0.6-canary.2"
 }

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "13.0.6-canary.1",
+  "version": "13.0.6-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": "13.0.6-canary.1",
+    "@next/eslint-plugin-next": "13.0.6-canary.2",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.42.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "13.0.6-canary.1",
+  "version": "13.0.6-canary.2",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "13.0.6-canary.1",
+  "version": "13.0.6-canary.2",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

packages/font/src/utils.ts

@@ -13,19 +13,24 @@ const DEFAULT_SERIF_FONT = {
 }
 
 function calcAverageWidth(font: Font): number | undefined {
-  const avgCharacters = 'aaabcdeeeefghiijklmnnoopqrrssttuvwxyz      '
-  const hasAllChars = font
-    .glyphsForString(avgCharacters)
-    .flatMap((glyph) => glyph.codePoints)
-    .every((codePoint) => font.hasGlyphForCodePoint(codePoint))
-
-  if (!hasAllChars) return undefined
-
-  const widths = font
-    .glyphsForString(avgCharacters)
-    .map((glyph) => glyph.advanceWidth)
-  const totalWidth = widths.reduce((sum, width) => sum + width, 0)
-  return totalWidth / widths.length
+  try {
+    const avgCharacters = 'aaabcdeeeefghiijklmnnoopqrrssttuvwxyz      '
+    const hasAllChars = font
+      .glyphsForString(avgCharacters)
+      .flatMap((glyph) => glyph.codePoints)
+      .every((codePoint) => font.hasGlyphForCodePoint(codePoint))
+
+    if (!hasAllChars) return undefined
+
+    const widths = font
+      .glyphsForString(avgCharacters)
+      .map((glyph) => glyph.advanceWidth)
+    const totalWidth = widths.reduce((sum, width) => sum + width, 0)
+    return totalWidth / widths.length
+  } catch {
+    // Could not calculate average width from the font file, skip size-adjust
+    return undefined
+  }
 }
 
 function formatOverrideValue(val: number) {

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "13.0.6-canary.1",
+  "version": "13.0.6-canary.2",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

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

packages/next-env/package.json

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

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

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

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "13.0.6-canary.1",
+  "version": "13.0.6-canary.2",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi --features plugin --js false native",

packages/next/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -3,6 +3,8 @@ import type {
   ClientComponentImports,
   NextFlightClientEntryLoaderOptions,
 } from '../loaders/next-flight-client-entry-loader'
+import type { FlightCSSManifest } from './flight-manifest-plugin'
+
 import { webpack } from 'next/dist/compiled/webpack/webpack'
 import { stringify } from 'querystring'
 import path from 'path'
@@ -19,7 +21,6 @@ import {
   EDGE_RUNTIME_WEBPACK,
   FLIGHT_SERVER_CSS_MANIFEST,
 } from '../../../shared/lib/constants'
-import { FlightCSSManifest } from './flight-manifest-plugin'
 import { ASYNC_CLIENT_MODULES } from './flight-manifest-plugin'
 import { isClientComponentModule, regexCSS } from '../loaders/utils'
 import { traverseModules } from '../utils'
@@ -37,8 +38,8 @@ export const injectedClientEntries = new Map()
 export const serverModuleIds = new Map<string, string | number>()
 export const edgeServerModuleIds = new Map<string, string | number>()
 
-// TODO-APP: move CSS manifest generation to the flight manifest plugin.
-const flightCSSManifest: FlightCSSManifest = {}
+let serverCSSManifest: FlightCSSManifest = {}
+let edgeServerCSSManifest: FlightCSSManifest = {}
 
 export class FlightClientEntryPlugin {
   dev: boolean
@@ -112,7 +113,7 @@ export class FlightClientEntryPlugin {
       }
 
       traverseModules(compilation, (mod, _chunk, _chunkGroup, modId) => {
-        recordModule(modId + '', mod)
+        recordModule(String(modId), mod)
       })
     })
   }
@@ -234,6 +235,15 @@ export class FlightClientEntryPlugin {
     // by the certain chunk.
     compilation.hooks.afterOptimizeModules.tap(PLUGIN_NAME, () => {
       const cssImportsForChunk: Record<string, string[]> = {}
+      if (this.isEdgeServer) {
+        edgeServerCSSManifest = {}
+      } else {
+        serverCSSManifest = {}
+      }
+
+      let cssManifest = this.isEdgeServer
+        ? edgeServerCSSManifest
+        : serverCSSManifest
 
       function collectModule(entryName: string, mod: any) {
         const resource = mod.resource
@@ -272,10 +282,10 @@ export class FlightClientEntryPlugin {
           }
 
           const entryCSSInfo: Record<string, string[]> =
-            flightCSSManifest.__entry_css__ || {}
+            cssManifest.__entry_css__ || {}
           entryCSSInfo[entryName] = cssImportsForChunk[entryName]
 
-          Object.assign(flightCSSManifest, {
+          Object.assign(cssManifest, {
             __entry_css__: entryCSSInfo,
           })
         })
@@ -320,7 +330,7 @@ export class FlightClientEntryPlugin {
               clientEntryDependencyMap,
             })
 
-          Object.assign(flightCSSManifest, cssImports)
+          Object.assign(cssManifest, cssImports)
         }
       })
     })
@@ -333,7 +343,14 @@ export class FlightClientEntryPlugin {
         stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH,
       },
       (assets: webpack.Compilation['assets']) => {
-        const manifest = JSON.stringify(flightCSSManifest)
+        const manifest = JSON.stringify({
+          ...serverCSSManifest,
+          ...edgeServerCSSManifest,
+          __entry_css__: {
+            ...serverCSSManifest.__entry_css__,
+            ...edgeServerCSSManifest.__entry_css__,
+          },
+        })
         assets[FLIGHT_SERVER_CSS_MANIFEST + '.json'] = new sources.RawSource(
           manifest
         ) as unknown as webpack.sources.RawSource

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "13.0.6-canary.1",
+  "version": "13.0.6-canary.2",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -75,7 +75,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "13.0.6-canary.1",
+    "@next/env": "13.0.6-canary.2",
     "@swc/helpers": "0.4.14",
     "caniuse-lite": "^1.0.30001406",
     "postcss": "8.4.14",
@@ -125,11 +125,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.12.0",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "13.0.6-canary.1",
-    "@next/polyfill-nomodule": "13.0.6-canary.1",
-    "@next/react-dev-overlay": "13.0.6-canary.1",
-    "@next/react-refresh-utils": "13.0.6-canary.1",
-    "@next/swc": "13.0.6-canary.1",
+    "@next/polyfill-module": "13.0.6-canary.2",
+    "@next/polyfill-nomodule": "13.0.6-canary.2",
+    "@next/react-dev-overlay": "13.0.6-canary.2",
+    "@next/react-refresh-utils": "13.0.6-canary.2",
+    "@next/swc": "13.0.6-canary.2",
     "@segment/ajv-human-errors": "2.1.2",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
@@ -276,7 +276,7 @@
     "timers-browserify": "2.0.12",
     "tty-browserify": "0.0.1",
     "ua-parser-js": "0.7.28",
-    "undici": "5.12.0",
+    "undici": "5.13.0",
     "unistore": "3.4.1",
     "util": "0.12.4",
     "uuid": "8.3.2",

packages/react-dev-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "13.0.6-canary.1",
+  "version": "13.0.6-canary.2",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",

packages/react-refresh-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "13.0.6-canary.1",
+  "version": "13.0.6-canary.2",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",