Merge branch 'canary' into patch-1

.github/workflows/build_test_deploy.yml

@@ -1191,7 +1191,7 @@ jobs:
 
   test-native:
     name: Unit Test Native Code
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-latest-8-core-oss
 
     steps:
       - uses: actions/checkout@v3

.vscode/settings.json

@@ -71,8 +71,15 @@
   "cSpell.words": [
     "Entrypoints",
     "napi",
+    "nextjs",
     "opentelemetry",
     "Threadsafe",
     "zipkin"
+  ],
+  "grammarly.selectors": [
+    {
+      "language": "markdown",
+      "scheme": "file"
+    }
   ]
 }

docs/advanced-features/instrumentation.md

@@ -1,5 +1,5 @@
 ---
-description: Learn how to instrument your Next.js app.
+description: Learn how to use instrumentation to run code at server startup in your Next.js app
 ---
 
 > **Note**: This feature is experimental. To use it, you must explicitly opt in by defining `experimental.instrumentationHook = true;` in your `next.config.js`.
@@ -18,7 +18,7 @@ You can import files with side effects in `instrumentation.ts`, which you might
 
 import { init } from 'package-init'
 
-export const register() {
+export function register() {
   init()
 }
 ```
@@ -28,19 +28,19 @@ However, we recommend importing files with side effects using `require` from wit
 ```ts
 // /instrumentation.ts
 
-export const register() {
+export function register() {
   require('package-with-side-effect')
 }
 ```
 
 By doing this, you can colocate all of your side effects in one place in your code, and avoid any unintended consequences from importing files.
 
-We call `register` in all environments, so it's necessary to conditionally require any code that doesn't support both `edge` and `nodejs`. You can use environment variable `NEXT_RUNTIME` to get the current environment. Importing environment specific code would look like this:
+We call `register` in all environments, so it's necessary to conditionally require any code that doesn't support both `edge` and `nodejs`. You can use the environment variable `NEXT_RUNTIME` to get the current environment. Importing an environment-specific code would look like this:
 
 ```ts
 // /instrumentation.ts
 
-export const register() {
+export function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
     require('./instrumentation-node')
   }

docs/advanced-features/open-telemetry.md

@@ -1,5 +1,5 @@
 ---
-description: Learn how instrument your Next.js app with OpenTelemetry.
+description: Learn how to instrument your Next.js app with OpenTelemetry.
 ---
 
 > **Note**: This feature is experimental, you need to explicitly opt-in by providing `experimental.instrumentationHook = true;` in your `next.config.js`.
@@ -11,13 +11,13 @@ Observability is crucial for understanding and optimizing the behavior and perfo
 As applications become more complex, it becomes increasingly difficult to identify and diagnose issues that may arise. By leveraging observability tools, such as logging and metrics, developers can gain insights into their application's behavior and identify areas for optimization. With observability, developers can proactively address issues before they become major problems and provide a better user experience. Therefore, it is highly recommended to use observability in your Next.js applications to improve performance, optimize resources, and enhance user experience.
 
 We recommend using OpenTelemetry for instrumenting your apps.
-It's a platform agnostic way to instrument apps that allows you to change your observability provider without changing your code.
+It's a platform-agnostic way to instrument apps that allows you to change your observability provider without changing your code.
 Read [Official OpenTelemetry docs](https://opentelemetry.io/docs/) for more information about OpenTelemetry and how it works.
 
 This documentation uses terms like _Span_, _Trace_ or _Exporter_ throughout this doc, all of which can be found in [the OpenTelemetry Observability Primer](https://opentelemetry.io/docs/concepts/observability-primer/).
 
-Next.js supports OpenTelemetry instrumentation out of the box, that means that we already instrumented Next.js itself.
-When you enable OpenTelemetry you we will automatically wrap all your code like `getStaticProps` in a _spans_ with helpful attributes.
+Next.js supports OpenTelemetry instrumentation out of the box, which means that we already instrumented Next.js itself.
+When you enable OpenTelemetry we will automatically wrap all your code like `getStaticProps` in _spans_ with helpful attributes.
 
 > **Note:** We currently support OpenTelemetry bindings only in serverless functions.
 > We don't provide any for `edge` or client side code.
@@ -61,7 +61,7 @@ npm install @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/sema
 ```
 
 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:
+OpenTelemetry APIs are not compatible with edge runtime, so you need to make sure that you are importing them only when `process.env.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
@@ -91,11 +91,11 @@ 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`.
+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.
+You need an OpenTelemetry collector with a compatible backend to test OpenTelemetry traces locally.
 We recommend using our [OpenTelemetry dev environment](https://github.com/vercel/opentelemetry-collector-dev-setup).
 
 If everything works well you should be able to see the root server span labeled as `GET /requested/pathname`.
@@ -132,7 +132,7 @@ If that is not possible on your platform, you can use a custom OpenTelemetry exp
 
 ## Custom Spans
 
-You can add your own span with [OpenTelemetry APIs](https://opentelemetry.io/docs/instrumentation/js/instrumentation).
+You can add a custom span with [OpenTelemetry APIs](https://opentelemetry.io/docs/instrumentation/js/instrumentation).
 
 ```bash
 npm install @opentelemetry/api
@@ -166,12 +166,12 @@ Next.js automatically instruments several spans for you to provide useful insigh
 Attributes on spans follow [OpenTelemetry semantic conventions](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/). We also add some custom attributes under the `next` namespace:
 
 - `next.span_name` - duplicates span name
-- `next.span_type` - each span type has unique identifier
+- `next.span_type` - each span type has a unique identifier
 - `next.route` - The route pattern of the request (e.g., `/[param]/user`).
 - `next.page`
   - This is an internal value used by an app router.
   - You can think about it as a route to a special file (like `page.ts`, `layout.ts`, `loading.ts` and others)
-  - It can be used as an unique identifier only when paired with `next.route` because `/layout` can be used to identify both `/(groupA)/layout.ts` and `/(groupB)/layout.ts`
+  - It can be used as a unique identifier only when paired with `next.route` because `/layout` can be used to identify both `/(groupA)/layout.ts` and `/(groupB)/layout.ts`
 
 ### `[http.method] [next.route]`
 
@@ -195,7 +195,7 @@ Attributes:
 
 - `next.span_type`: `AppRender.getBodyResult`.
 
-This span represents the process of rendering a route in app router.
+This span represents the process of rendering a route in the app router.
 
 Attributes:
 
@@ -224,7 +224,7 @@ Attributes:
 
 - `next.span_type`: `AppRouteRouteHandlers.runHandler`.
 
-This span represents the execution of an API route handler in app router.
+This span represents the execution of an API route handler in the app router.
 
 Attributes:
 
@@ -272,7 +272,7 @@ Attributes:
 
 - `next.span_type`: `ResolveMetadata.generateMetadata`.
 
-This span represents the process of generating metadata for a specific page (single route can have multiple of these spans).
+This span represents the process of generating metadata for a specific page (a single route can have multiple of these spans).
 
 Attributes:
 

docs/api-reference/next.config.js/headers.md

@@ -416,6 +416,6 @@ For more information, we recommend the following sections:
 <div class="card">
   <a href="/docs/advanced-features/security-headers.md">
     <b>Security Headers:</b>
-    <small>Improve the security of your Next.js application by add HTTP response headers.</small>
+    <small>Improve the security of your Next.js application by adding HTTP response headers.</small>
   </a>
 </div>

docs/routing/dynamic-routes.md

@@ -93,7 +93,8 @@ Read our docs for [Linking between pages](/docs/routing/introduction.md#linking-
 
 Dynamic routes can be extended to catch all paths by adding three dots (`...`) inside the brackets. For example:
 
-- `pages/post/[...slug].js` matches `/post/a`, but also `/post/a/b`, `/post/a/b/c` and so on.
+- `pages/post/[...slug].js` not only matches `/post/a`, but also `/post/a/b`, `/post/a/b/c`, and so on.
+- `pages/post/[...slug].js` does not match `/post`.
 
 > **Note**: You can use names other than `slug`, such as: `[...param]`
 

examples/with-tigris/db/models/todoItems.ts

@@ -1,6 +1,7 @@
 import {
   Field,
   PrimaryKey,
+  SearchField,
   TigrisCollection,
   TigrisCollectionType,
   TigrisDataTypes,
@@ -11,6 +12,7 @@ export class TodoItem implements TigrisCollectionType {
   @PrimaryKey(TigrisDataTypes.INT32, { order: 1, autoGenerate: true })
   id!: number
 
+  @SearchField()
   @Field()
   text!: string
 

lerna.json

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

package.json

@@ -197,13 +197,11 @@
     "random-seed": "0.3.0",
     "react": "18.2.0",
     "react-17": "npm:react@17.0.2",
-    "react-builtin": "npm:react@18.3.0-next-b14f8da15-20230403",
-    "react-experimental-builtin": "npm:react@0.0.0-experimental-b14f8da15-20230403",
+    "react-builtin": "npm:react@18.3.0-next-85de6fde5-20230328",
     "react-dom": "18.2.0",
     "react-dom-17": "npm:react-dom@17.0.2",
-    "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-dom-builtin": "npm:react-dom@18.3.0-next-85de6fde5-20230328",
+    "react-server-dom-webpack": "18.3.0-next-85de6fde5-20230328",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -214,8 +212,6 @@
     "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.6",
+  "version": "13.3.1-canary.11",
   "keywords": [
     "react",
     "next",

packages/create-next-app/templates/app-tw/js/app/layout.js

@@ -1,4 +1,7 @@
 import './globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
   title: 'Create Next App',
@@ -8,7 +11,7 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={inter.className}>{children}</body>
     </html>
   )
 }

packages/create-next-app/templates/app-tw/js/app/page.js

@@ -1,7 +1,4 @@
 import Image from 'next/image'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
   return (
@@ -49,15 +46,13 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
+          <h2 className={`mb-3 text-2xl font-semibold`}>
             Docs{' '}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p
-            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
-          >
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
             Find in-depth information about Next.js features and API.
           </p>
         </a>
@@ -68,15 +63,13 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
+          <h2 className={`mb-3 text-2xl font-semibold`}>
             Learn{' '}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p
-            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
-          >
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
             Learn about Next.js in an interactive course with&nbsp;quizzes!
           </p>
         </a>
@@ -87,15 +80,13 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
+          <h2 className={`mb-3 text-2xl font-semibold`}>
             Templates{' '}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p
-            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
-          >
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
             Explore the Next.js 13 playground.
           </p>
         </a>
@@ -106,15 +97,13 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>
+          <h2 className={`mb-3 text-2xl font-semibold`}>
             Deploy{' '}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
           </h2>
-          <p
-            className={`${inter.className} m-0 max-w-[30ch] text-sm opacity-50`}
-          >
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
             Instantly deploy your Next.js site to a shareable URL with Vercel.
           </p>
         </a>

packages/create-next-app/templates/app-tw/js/tailwind.config.js

@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {

packages/create-next-app/templates/app-tw/ts/app/layout.tsx

@@ -1,4 +1,7 @@
 import './globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
   title: 'Create Next App',
@@ -12,7 +15,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={inter.className}>{children}</body>
     </html>
   )
 }