Merge branch 'vercel:canary' into cow258/fix-debugging

.github/CODEOWNERS

@@ -15,12 +15,12 @@
 
 # Image Component (@styfle)
 
-/**/*image*                                   @timneutkens @ijjk @shuding @styfle
-/**/*image*/**                                @timneutkens @ijjk @shuding @styfle
+/**/*image*                                   @timneutkens @ijjk @shuding @styfle @huozhi
+/**/*image*/**                                @timneutkens @ijjk @shuding @styfle @huozhi
 /packages/next/client/use-intersection.tsx    @timneutkens @ijjk @shuding @styfle
 /packages/next/server/lib/squoosh/            @timneutkens @ijjk @shuding @styfle
-/packages/next/server/serve-static.ts         @timneutkens @ijjk @shuding @styfle
-/packages/next/server/config.ts               @timneutkens @ijjk @shuding @styfle
+/packages/next/server/serve-static.ts         @timneutkens @ijjk @shuding @styfle @huozhi
+/packages/next/server/config.ts               @timneutkens @ijjk @shuding @styfle @huozhi
 
 # Tooling & Telemetry
 

docs/advanced-features/open-telemetry.md

@@ -24,13 +24,19 @@ When you enable OpenTelemetry you we will automatically wrap all your code like
 
 ## Getting Started
 
-To get started, you must install the required packages:
+OpenTelemetry is extensible but setting it up properly can be quite verbose.
+That's why we prepared a package `@vercel/otel` that helps you get started quickly.
+It's not extensible and you should configure OpenTelemetry manually you need to customize your setup.
+
+### Using `@vercel/otel`
+
+To get started, you must install `@vercel/otel`:
 
 ```bash
 npm install @vercel/otel
 ```
 
-Next, create a custom [`instrumentation.ts`](./instrumentation.md) file in the root of the project:
+Next, create a custom [`instrumentation.ts`](https://nextjs.org/docs/advanced-features/instrumentation) file in the root of the project:
 
 ```ts
 // instrumentation.ts
@@ -43,6 +49,50 @@ export function register() {
 
 > **Note**: We have created a basic [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) example that you can use.
 
+### Manual OpenTelemetry configuration
+
+If our wrapper `@vercel/otel` doesn't suit your needs, you can configure OpenTelemetry manually.
+
+Firstly you need to install OpenTelemetry packages:
+
+```bash
+npm install @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-base @opentelemetry/exporter-trace-otlp-http
+`
+```
+
+Now you can initialize `NodeSDK` in your `instrumentation.ts`.
+OpenTelemetry APIs are not compatible with edge runtime, so you need to make sure that you are importing them only when `process.end.NEXT_RUNTIME === "nodejs"`. Conditionally importing with an `require` doesn't play well with typescript. We recommend using a conditionally `require`ing new file `instrumentation.node.ts` which can use normal `import`s:
+
+```ts
+// instrumentation.ts
+export function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    require('./instrumentation.node.ts')
+  }
+}
+```
+
+```ts
+// instrumentation.node.ts
+import { trace, context } from '@opentelemetry/api'
+import { NodeSDK } from '@opentelemetry/sdk-node'
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+import { Resource } from '@opentelemetry/resources'
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
+import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node'
+
+const sdk = new NodeSDK({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'next-app',
+  }),
+  spanProcessor: new SimpleSpanProcessor(new OTLPTraceExporter()),
+})
+sdk.start()
+```
+
+Doing this is equivalent to using `@vercel/otel`, but it's possible to modify and extend.
+For example you could use `@opentelemetry/exporter-trace-otlp-grpc` instead of `@opentelemetry/exporter-trace-otlp-http`.
+
 ## Testing your instrumentation
 
 You need a OpenTelemetry collector with a compatible backend to test OpenTelemetry traces locally.
@@ -83,14 +133,6 @@ export async function fetchGithubStars() {
 The `register` function will execute before your code runs in a new environment.
 You can start creating new spans, and they should be correctly added to the exported trace.
 
-## Custom register function
-
-We have created `@vercel/otel` to make it easier to get started with OpenTelemetry. But this package won't be able to satisfy some advanced setups. You can always use OpenTelemetry APIs directly.
-
-In order to be able to leverage instrumentation provided by next.js you will need to setup and register custom [TraceProvider](https://opentelemetry.io/docs/reference/specification/trace/api/#tracerprovider).
-
-> **Note**: `instrumentation.ts` get's called in both `edge` and `nodejs` runtime. You need to make sure that you are initializing OpenTelemetry only in `nodejs` runtime. OpenTelemetry APIs are not available on `edge`.
-
 ## Default Spans in Next.js
 
 Next.js automatically instruments several spans for you to provide useful insights into your application's performance.

docs/api-reference/next/script.md

@@ -69,7 +69,7 @@ The loading strategy of the script. There are four different strategies that can
 
 Scripts that load with the `beforeInteractive` strategy are injected into the initial HTML from the server, downloaded before any Next.js module, and executed in the order they are placed before _any_ hydration occurs on the page.
 
-Scripts denoted with this strategy are preloaded and fetched before any first-party code, but their execution does not block page hydration from occuring.
+Scripts denoted with this strategy are preloaded and fetched before any first-party code, but their execution does not block page hydration from occurring.
 
 `beforeInteractive` scripts must be placed inside `pages/_document.js` and are designed to load scripts that are needed by the entire site (i.e. the script will load when any page in the application has been loaded server-side).
 

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "13.3.1-canary.3"
+  "version": "13.3.1-canary.4"
 }

package.json

@@ -197,11 +197,13 @@
     "random-seed": "0.3.0",
     "react": "18.2.0",
     "react-17": "npm:react@17.0.2",
-    "react-builtin": "npm:react@18.3.0-next-85de6fde5-20230328",
+    "react-builtin": "npm:react@18.3.0-next-b14f8da15-20230403",
+    "react-experimental-builtin": "npm:react@0.0.0-experimental-b14f8da15-20230403",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:react-dom@17.0.2",
-    "react-dom-builtin": "npm:react-dom@18.3.0-next-85de6fde5-20230328",
-    "react-server-dom-webpack": "18.3.0-next-85de6fde5-20230328",
+    "react-dom-builtin": "npm:react-dom@18.3.0-next-b14f8da15-20230403",
+    "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-b14f8da15-20230403",
+    "react-server-dom-webpack": "18.3.0-next-b14f8da15-20230403",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -212,6 +214,8 @@
     "rimraf": "3.0.2",
     "sass": "1.54.0",
     "satori": "0.4.4",
+    "scheduler-builtin": "npm:scheduler@0.24.0-next-b14f8da15-20230403",
+    "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-b14f8da15-20230403",
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",
     "semver": "7.3.7",

packages/create-next-app/package.json

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

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "13.3.1-canary.3",
+  "version": "13.3.1-canary.4",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "test-pack": "cd ../../ && pnpm test-pack eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "13.3.1-canary.3",
+    "@next/eslint-plugin-next": "13.3.1-canary.4",
     "@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.3.1-canary.3",
+  "version": "13.3.1-canary.4",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

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