Merge branch 'canary' into add/streaming-error-handling

.github/actions/next-stats-action/Dockerfile

@@ -7,7 +7,7 @@ LABEL repository="https://github.com/vercel/next-stats-action"
 COPY . /next-stats
 
 # Install node_modules
-RUN npm i -g pnpm@7.2.1
+RUN npm i -g pnpm@7.3.0
 RUN cd /next-stats && pnpm install --production
 
 RUN git config --global user.email 'stats@localhost'

.github/workflows/build_test_deploy.yml

@@ -10,7 +10,7 @@ env:
   NAPI_CLI_VERSION: 2.7.0
   TURBO_VERSION: 1.3.2-canary.1
   RUST_TOOLCHAIN: nightly-2022-09-23
-  PNPM_VERSION: 7.2.1
+  PNPM_VERSION: 7.3.0
 
 jobs:
   check-examples:

.github/workflows/pull_request_stats.yml

@@ -8,7 +8,7 @@ env:
   NAPI_CLI_VERSION: 2.7.0
   TURBO_VERSION: 1.3.2-canary.1
   RUST_TOOLCHAIN: nightly-2022-09-23
-  PNPM_VERSION: 7.2.1
+  PNPM_VERSION: 7.3.0
 
 jobs:
   build-native-dev:

azure-pipelines.yml

@@ -33,7 +33,7 @@ pr:
 
 variables:
   PNPM_CACHE_FOLDER: $(Pipeline.Workspace)/.pnpm-store
-  PNPM_VERSION: 7.2.1
+  PNPM_VERSION: 7.3.0
   NEXT_TELEMETRY_DISABLED: '1'
   node_version: ^14.19.0
 

docs/advanced-features/measuring-performance.md

@@ -181,6 +181,27 @@ export function reportWebVitals(metric) {
 >
 > Read more about [sending results to Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
 
+## Web Vitals Attribution
+
+When debugging issues related to Web Vitals, it is often helpful if we can pinpoint the source of the problem.
+For example, in the case of Cumulative Layout Shift (CLS), we might want to know the first element that shifted when the single largest layout shift occurred.
+Or, in the case of Largest Contentful Paint (LCP), we might want to identify the element corresponding to the LCP for the page.
+If the LCP element is an image, knowing the URL of the image resource can help us locate the asset we need to optimize.
+
+Pinpointing the biggest contributor to the Web Vitals score, aka [attribution](https://github.com/GoogleChrome/web-vitals/blob/4ca38ae64b8d1e899028c692f94d4c56acfc996c/README.md#attribution),
+allows us to obtain more in-depth information like entries for [PerformanceEventTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming), [PerformanceNavigationTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming) and [PerformanceResourceTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming).
+
+Attribution is disabled by default in Next.js but can be enabled **per metric** by specifying the following in `next.config.js`.
+
+```js
+// next.config.js
+experimental: {
+  webVitalsAttribution: ['CLS', 'LCP']
+}
+```
+
+Valid attribution values are all `web-vitals` metrics specified in the [`NextWebVitalsMetric`](https://github.com/vercel/next.js/blob/442378d21dd56d6e769863eb8c2cb521a463a2e0/packages/next/shared/lib/utils.ts#L43) type.
+
 ## TypeScript
 
 If you are using TypeScript, you can use the built-in type `NextWebVitalsMetric`:

docs/migrating/incremental-adoption.md

@@ -33,8 +33,6 @@ module.exports = {
 
 To learn more about `basePath`, take a look at our [documentation](/docs/api-reference/next.config.js/basepath.md).
 
-> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
-
 ### Rewrites
 
 The second strategy is to create a new Next.js app that points to the root URL of your domain. Then, you can use [`rewrites`](/docs/api-reference/next.config.js/rewrites.md) inside `next.config.js` to have some subpaths to be proxied to your existing app.
@@ -78,7 +76,7 @@ module.exports = {
 
 To learn more about rewrites, take a look at our [documentation](/docs/api-reference/next.config.js/rewrites.md).
 
-> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
+> **Note:** If you are incrementally migrating to a dynamic route (e.g. `[slug].js`) and using `fallback: true` or `fallback: 'blocking'` along with a fallback `rewrite`, ensure you consider the case where pages are not found. When Next.js matches the dynamic route it stops checking any further routes. Using `notFound: true` in `getStaticProps` will return the 404 page without applying the fallback `rewrite`. If this is not desired, you can use `getServerSideProps` with `stale-while-revalidate` Cache-Control headers when returning your props. Then, you can _manually_ proxy to your existing backend using something like [http-proxy](https://github.com/vercel/next.js/discussions/38839#discussioncomment-3744442) instead of returning `notFound: true`.
 
 ### Micro-Frontends with Monorepos and Subdomains
 

examples/convex/convex/_generated/dataModel.ts → examples/convex/convex/_generated/dataModel.d.ts

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@0.1.9.
+ * Generated by convex@0.2.0.
  * To regenerate, run `npx convex codegen`.
  * @module
  */
@@ -46,7 +46,7 @@ export type Document = any;
  * to the same document.
  */
 export type Id = GenericId<string>;
-export const Id = GenericId;
+export declare const Id: typeof GenericId;
 
 /**
  * A type describing your Convex data model.

examples/convex/convex/_generated/dataModel.js

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/**
+ * Generated data model types.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by convex@0.2.0.
+ * To regenerate, run `npx convex codegen`.
+ * @module
+ */
+
+import { GenericId } from "convex/values";
+
+/**
+ * An identifier for a document in Convex.
+ *
+ * Convex documents are uniquely identified by their `Id`, which is accessible
+ * on the `_id` field. To learn more, see [Data Modeling](https://docs.convex.dev/using/data-modeling).
+ *
+ * Documents can be loaded using `db.get(id)` in query and mutation functions.
+ *
+ * **Important**: Use `myId.equals(otherId)` to check for equality.
+ * Using `===` will not work because two different instances of `Id` can refer
+ * to the same document.
+ */
+export const Id = GenericId;

examples/convex/convex/_generated/react.ts → examples/convex/convex/_generated/react.d.ts

@@ -4,15 +4,22 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@0.1.9.
+ * Generated by convex@0.2.0.
  * To regenerate, run `npx convex codegen`.
  * @module
  */
 
-import type getCounter from "../getCounter";
-import type incrementCounter from "../incrementCounter";
-import type { OptimisticLocalStore as GenericOptimisticLocalStore } from "convex/browser";
-import type { ClientMutation, ClientQuery } from "convex/server";
+import type {
+  ApiFromModules,
+  OptimisticLocalStore as GenericOptimisticLocalStore,
+} from "convex/browser";
+import type {
+  UseQueryForAPI,
+  UseMutationForAPI,
+  UseConvexForAPI,
+} from "convex/react";
+import type * as getCounter from "../getCounter";
+import type * as incrementCounter from "../incrementCounter";
 
 /**
  * A type describing your app's public Convex API.
@@ -23,16 +30,10 @@ import type { ClientMutation, ClientQuery } from "convex/server";
  * This type should be used with type-parameterized classes like
  * `ConvexReactClient` to create app-specific types.
  */
-export type ConvexAPI = {
-  queries: {
-    getCounter: ClientQuery<typeof getCounter>;
-  };
-  mutations: {
-    incrementCounter: ClientMutation<typeof incrementCounter>;
-  };
-};
-
-import { makeUseQuery, makeUseMutation, makeUseConvex } from "convex/react";
+export type ConvexAPI = ApiFromModules<{
+  getCounter: typeof getCounter;
+  incrementCounter: typeof incrementCounter;
+}>;
 
 /**
  * Load a reactive query within a React component.
@@ -46,7 +47,7 @@ import { makeUseQuery, makeUseMutation, makeUseConvex } from "convex/react";
  * @param args - The arguments to the query function.
  * @returns `undefined` if loading and the query's return value otherwise.
  */
-export const useQuery = makeUseQuery<ConvexAPI>();
+export declare const useQuery: UseQueryForAPI<ConvexAPI>;
 
 /**
  * Construct a new {@link ReactMutation}.
@@ -64,7 +65,7 @@ export const useQuery = makeUseQuery<ConvexAPI>();
  * @param name - The name of the mutation.
  * @returns The {@link ReactMutation} object with that name.
  */
-export const useMutation = makeUseMutation<ConvexAPI>();
+export declare const useMutation: UseMutationForAPI<ConvexAPI>;
 
 /**
  * Get the {@link ConvexReactClient} within a React component.
@@ -73,7 +74,7 @@ export const useMutation = makeUseMutation<ConvexAPI>();
  *
  * @returns The active {@link ConvexReactClient} object, or `undefined`.
  */
-export const useConvex = makeUseConvex<ConvexAPI>();
+export declare const useConvex: UseConvexForAPI<ConvexAPI>;
 
 /**
  * A view of the query results currently in the Convex client for use within

examples/convex/convex/_generated/react.js

@@ -0,0 +1,57 @@
+/* eslint-disable */
+/**
+ * Generated React hooks.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by convex@0.2.0.
+ * To regenerate, run `npx convex codegen`.
+ * @module
+ */
+
+import {
+  useQueryGeneric,
+  useMutationGeneric,
+  useConvexGeneric,
+} from "convex/react";
+
+/**
+ * Load a reactive query within a React component.
+ *
+ * This React hook contains internal state that will cause a rerender whenever
+ * the query result changes.
+ *
+ * This relies on the {@link ConvexProvider} being above in the React component tree.
+ *
+ * @param name - The name of the query function.
+ * @param args - The arguments to the query function.
+ * @returns `undefined` if loading and the query's return value otherwise.
+ */
+export const useQuery = useQueryGeneric;
+
+/**
+ * Construct a new {@link ReactMutation}.
+ *
+ * Mutation objects can be called like functions to request execution of the
+ * corresponding Convex function, or further configured with
+ * [optimistic updates](https://docs.convex.dev/using/optimistic-updates).
+ *
+ * The value returned by this hook is stable across renders, so it can be used
+ * by React dependency arrays and memoization logic relying on object identity
+ * without causing rerenders.
+ *
+ * This relies on the {@link ConvexProvider} being above in the React component tree.
+ *
+ * @param name - The name of the mutation.
+ * @returns The {@link ReactMutation} object with that name.
+ */
+export const useMutation = useMutationGeneric;
+
+/**
+ * Get the {@link ConvexReactClient} within a React component.
+ *
+ * This relies on the {@link ConvexProvider} being above in the React component tree.
+ *
+ * @returns The active {@link ConvexReactClient} object, or `undefined`.
+ */
+export const useConvex = useConvexGeneric;

examples/convex/convex/_generated/server.ts → examples/convex/convex/_generated/server.d.ts

@@ -4,14 +4,14 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@0.1.9.
+ * Generated by convex@0.2.0.
  * To regenerate, run `npx convex codegen`.
  * @module
  */
 
 import {
-  makeQuery,
-  makeMutation,
+  MutationBuilderForDataModel,
+  QueryBuilderForDataModel,
   QueryCtx as GenericQueryCtx,
   MutationCtx as GenericMutationCtx,
   DatabaseReader as GenericDatabaseReader,
@@ -27,7 +27,7 @@ import { DataModel } from "./dataModel.js";
  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
  */
-export const query = makeQuery<DataModel>();
+export declare const query: QueryBuilderForDataModel<DataModel>;
 
 /**
  * Define a mutation in this Convex app's public API.
@@ -37,7 +37,7 @@ export const query = makeQuery<DataModel>();
  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
  */
-export const mutation = makeMutation<DataModel>();
+export declare const mutation: MutationBuilderForDataModel<DataModel>;
 
 /**
  * A set of services for use within Convex query functions.
@@ -62,7 +62,7 @@ export type MutationCtx = GenericMutationCtx<DataModel>;
  * An interface to read from the database within Convex query functions.
  *
  * The two entry points are {@link DatabaseReader.get}, which fetches a single
- * document by its {@link Id}, or {@link DatabaseReader.table}, which starts
+ * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
  * building a query.
  */
 export type DatabaseReader = GenericDatabaseReader<DataModel>;

examples/convex/convex/_generated/server.js

@@ -0,0 +1,32 @@
+/* eslint-disable */
+/**
+ * Generated utilities for implementing server-side Convex query and mutation functions.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * Generated by convex@0.2.0.
+ * To regenerate, run `npx convex codegen`.
+ * @module
+ */
+
+import { queryGeneric, mutationGeneric } from "convex/server";
+
+/**
+ * Define a query in this Convex app's public API.
+ *
+ * This function will be allowed to read your Convex database and will be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export const query = queryGeneric;
+
+/**
+ * Define a mutation in this Convex app's public API.
+ *
+ * This function will be allowed to modify your Convex database and will be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export const mutation = mutationGeneric;

examples/convex/convex/getCounter.ts

@@ -2,7 +2,7 @@ import { query } from './_generated/server'
 
 export default query(async ({ db }, counterName: string): Promise<number> => {
   const counterDoc = await db
-    .table('counter_table')
+    .query('counter_table')
     .filter((q) => q.eq(q.field('name'), counterName))
     .first()
   console.log('Got stuff')

examples/convex/convex/incrementCounter.ts

@@ -3,7 +3,7 @@ import { mutation } from './_generated/server'
 export default mutation(
   async ({ db }, counterName: string, increment: number) => {
     const counterDoc = await db
-      .table('counter_table')
+      .query('counter_table')
       .filter((q) => q.eq(q.field('name'), counterName))
       .first()
     if (counterDoc === null) {

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.3.2-canary.17"
+  "version": "12.3.2-canary.19"
 }

package.json

@@ -218,8 +218,7 @@
     "@babel/traverse": "7.18.0"
   },
   "engines": {
-    "node": ">=12.22.0",
-    "pnpm": ">= 7.2.1"
+    "node": ">=14.0.0"
   },
   "packageManager": "pnpm@7.3.0"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.3.2-canary.17",
+  "version": "12.3.2-canary.19",
   "keywords": [
     "react",
     "next",
@@ -49,6 +49,6 @@
     "validate-npm-package-name": "3.0.0"
   },
   "engines": {
-    "node": ">=12.22.0"
+    "node": ">=14.0.0"
   }
 }