Merge branch 'canary' into huozhi/upgrade-react

.github/workflows/build_and_deploy.yml

@@ -38,7 +38,7 @@ jobs:
       - id: get-store-path
         run: echo STORE_PATH=$(pnpm store path) >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         timeout-minutes: 5
         id: cache-pnpm-store
         with:
@@ -61,7 +61,7 @@ jobs:
               echo "IS_RELEASE=false" >> $GITHUB_OUTPUT
           fi
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         timeout-minutes: 5
         id: cache-build
         with:
@@ -417,7 +417,7 @@ jobs:
       - name: tune linux network
         run: sudo ethtool -K eth0 tx off rx off
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         timeout-minutes: 5
         id: restore-build
         with:

.github/workflows/trigger_release.yml

@@ -75,7 +75,7 @@ jobs:
       - id: get-store-path
         run: echo STORE_PATH=$(pnpm store path) >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         timeout-minutes: 5
         id: cache-pnpm-store
         with:

docs/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx

@@ -402,7 +402,7 @@ export default function Layout({ children }) {
 
 ### Passing props from Server to Client Components (Serialization)
 
-If you fetch data in a Server Component, you may want to pass data down as props to Client Components. Props passed from the Server to Client Components need to be [serializable](https://developer.mozilla.org/docs/Glossary/Serialization) by React.
+If you fetch data in a Server Component, you may want to pass data down as props to Client Components. Props passed from the Server to Client Components need to be [serializable](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values) by React.
 
 If your Client Components depend on data that is not serializable, you can [fetch data on the client with a third party library](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-third-party-libraries) or on the server via a [Route Handler](/docs/app/building-your-application/routing/route-handlers).
 

docs/02-app/01-building-your-application/06-optimizing/02-videos.mdx

@@ -257,8 +257,10 @@ Explore these video streaming platforms for integrating video into your Next.js
 
 ### Cloudinary Integration
 
-- Official [documentation and integration guides](https://support.cloudinary.com/hc/en-us/categories/200477762-Client-Libraries-and-Integration-Guides) for using Cloudinary with Next.js.
-- A [specific guide](https://next.cloudinary.dev/nextjs-13) on integrating Cloudinary with Next.js.
+- Official [documentation and integration guide](https://next.cloudinary.dev/) for using Cloudinary with Next.js.
+- Includes a `<CldVideoPlayer>` component for [drop-in video support](https://next.cloudinary.dev/cldvideoplayer/basic-usage).
+- Find [examples](https://github.com/cloudinary-community/cloudinary-examples/?tab=readme-ov-file#nextjs) of integrating Cloudinary with Next.js including [Adaptive Bitrate Streaming](https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-cldvideoplayer-abr).
+- Other [Cloudinary libraries](https://cloudinary.com/documentation) including a Node.js SDK are also available.
 
 ### Mux Video API
 

docs/02-app/01-building-your-application/06-optimizing/08-analytics.mdx

@@ -102,7 +102,7 @@ function MyApp({ Component, pageProps }) {
 
 <AppOnly>
 
-```tsx filename="app/components/web-vitals.tsx" switcher
+```tsx filename="app/_components/web-vitals.tsx" switcher
 'use client'
 
 import { useReportWebVitals } from 'next/web-vitals'
@@ -122,7 +122,7 @@ export function WebVitals() {
 }
 ```
 
-```jsx filename="app/components/web-vitals.js" switcher
+```jsx filename="app/_components/web-vitals.js" switcher
 'use client'
 
 import { useReportWebVitals } from 'next/web-vitals'

docs/02-app/01-building-your-application/09-authentication/index.mdx

@@ -207,7 +207,7 @@ You can then call your Authentication Provider's API in the Server Action to han
 
 import { signIn } from '@/auth'
 
-export async function authenticate(formData: FormData) {
+export async function authenticate(_currentState: unknown, formData: FormData) {
   try {
     await signIn('credentials', formData)
   } catch (error) {
@@ -229,7 +229,7 @@ export async function authenticate(formData: FormData) {
 
 import { signIn } from '@/auth'
 
-export async function authenticate(formData) {
+export async function authenticate(_currentState, formData) {
   try {
     await signIn('credentials', formData)
   } catch (error) {

docs/02-app/02-api-reference/01-components/link.mdx

@@ -187,7 +187,7 @@ Prefetching happens when a `<Link />` component enters the user's viewport (init
 
 - **`null` (default)**: Prefetch behavior depends on whether the route is static or dynamic. For static routes, the full route will be prefetched (including all its data). For dynamic routes, the partial route down to the nearest segment with a [`loading.js`](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states) boundary will be prefetched.
 - `true`: The full route will be prefetched for both static and dynamic routes.
-- `false`: Prefetching will be disabled.
+- `false`: Prefetching will never happen both on entering the viewport and on hover.
 
 ```tsx filename="app/page.tsx" switcher
 import Link from 'next/link'
@@ -220,9 +220,7 @@ export default function Page() {
 Prefetching happens when a `<Link />` component enters the user's viewport (initially or through scroll). Next.js prefetches and loads the linked route (denoted by the `href`) and data in the background to improve the performance of client-side navigations. Prefetching is only enabled in production.
 
 - **`true` (default)**: The full route and its data will be prefetched.
-- `false`: Prefetching will be disabled.
-
-> **Good to know**: When `prefetch` is set to `false`, prefetching will still occur on hover.
+- `false`: Prefetching will not happen when entering the viewport, but will happen on hover. If you want to completely remove fetching on hover as well, consider using an `<a>` tag or [incrementally adopting](/docs/app/building-your-application/upgrading/app-router-migration) the App Router, which enables disabling prefetching on hover too.
 
 ```tsx filename="pages/index.tsx" switcher
 import Link from 'next/link'

docs/02-app/02-api-reference/05-next-config-js/index.mdx

@@ -5,7 +5,7 @@ description: Learn how to configure your application with next.config.js.
 
 {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
 
-Next.js can be configured through a `next.config.js` file in the root of your project directory (for example, by `package.json`).
+Next.js can be configured through a `next.config.js` file in the root of your project directory (for example, by `package.json`) with a default export.
 
 ```js filename="next.config.js"
 // @ts-check

docs/03-pages/01-building-your-application/09-deploying/04-ci-build-caching.mdx

@@ -74,7 +74,7 @@ cache:
 Using GitHub's [actions/cache](https://github.com/actions/cache), add the following step in your workflow file:
 
 ```yaml
-uses: actions/cache@v3
+uses: actions/cache@v4
 with:
   # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
   path: |

errors/invalid-next-config.mdx

@@ -21,7 +21,7 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-For example for the below warning, there is a typo and `rewrites` needs to be renamed to `rewrites` to resolve the issue.
+For example for the below warning, there is a typo and `rewritess` needs to be renamed to `rewrites` to resolve the issue.
 
 ```bash filename="Terminal"
 The root value has an unexpected property, rewritess, which is not in the list of allowed properties

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "14.1.1-canary.67"
+  "version": "14.1.1-canary.70"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "14.1.1-canary.67",
+  "version": "14.1.1-canary.70",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "14.1.1-canary.67",
+  "version": "14.1.1-canary.70",
   "description": "ESLint configuration used by Next.js.",
   "main": "index.js",
   "license": "MIT",
@@ -10,9 +10,9 @@
   },
   "homepage": "https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config",
   "dependencies": {
-    "@next/eslint-plugin-next": "14.1.1-canary.67",
+    "@next/eslint-plugin-next": "14.1.1-canary.70",
     "@rushstack/eslint-patch": "^1.3.3",
-    "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
+    "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.1",
     "eslint-import-resolver-node": "^0.3.6",
     "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-import": "^2.28.1",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "14.1.1-canary.67",
+  "version": "14.1.1-canary.70",
   "description": "ESLint plugin for Next.js.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

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

packages/next-bundle-analyzer/package.json

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

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "14.1.1-canary.67",
+  "version": "14.1.1-canary.70",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "14.1.1-canary.67",
+  "version": "14.1.1-canary.70",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

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

packages/next-swc/crates/next-api/src/app.rs

@@ -381,7 +381,7 @@ impl AppProject {
 }
 
 #[turbo_tasks::function]
-pub async fn app_entry_point_to_route(
+pub fn app_entry_point_to_route(
     app_project: Vc<AppProject>,
     entrypoint: AppEntrypoint,
 ) -> Vc<Route> {

packages/next-swc/crates/next-api/src/pages.rs

@@ -182,6 +182,10 @@ impl PagesProject {
             add_dir_to_routes(&mut routes, *pages, make_page_route).await?;
         }
 
+        for route in routes.values_mut() {
+            route.resolve().await?;
+        }
+
         Ok(Vc::cell(routes))
     }
 
@@ -610,31 +614,39 @@ impl PageEndpoint {
 
             let client_chunking_context = this.pages_project.project().client_chunking_context();
 
-            let mut client_chunks = client_chunking_context
-                .evaluated_chunk_group_assets(
-                    client_module.ident(),
-                    this.pages_project
-                        .client_runtime_entries()
-                        .with_entry(Vc::upcast(client_main_module))
-                        .with_entry(Vc::upcast(client_module)),
-                    Value::new(AvailabilityInfo::Root),
-                )
-                .await?
-                .clone_value();
-
-            client_chunks.push(Vc::upcast(PageLoaderAsset::new(
-                this.pages_project.project().client_root(),
-                this.pathname,
-                self.client_relative_path(),
-                Vc::cell(client_chunks.clone()),
-            )));
+            let client_chunks = client_chunking_context.evaluated_chunk_group_assets(
+                client_module.ident(),
+                this.pages_project
+                    .client_runtime_entries()
+                    .with_entry(Vc::upcast(client_main_module))
+                    .with_entry(Vc::upcast(client_module)),
+                Value::new(AvailabilityInfo::Root),
+            );
 
-            Ok(Vc::cell(client_chunks))
+            Ok(client_chunks)
         }
         .instrument(tracing::info_span!("page client side rendering"))
         .await
     }
 
+    #[turbo_tasks::function]
+    async fn page_loader(
+        self: Vc<Self>,
+        client_chunks: Vc<OutputAssets>,
+    ) -> Result<Vc<Box<dyn OutputAsset>>> {
+        let this = self.await?;
+        let project = this.pages_project.project();
+        let node_root = project.client_root();
+        let client_relative_path = self.client_relative_path();
+        let page_loader = PageLoaderAsset::new(
+            node_root,
+            this.pathname,
+            client_relative_path,
+            client_chunks,
+        );
+        Ok(Vc::upcast(page_loader))
+    }
+
     #[turbo_tasks::function]
     async fn internal_ssr_chunk(
         self: Vc<Self>,
@@ -985,6 +997,8 @@ impl PageEndpoint {
                 let client_chunks = self.client_chunks();
                 client_assets.extend(client_chunks.await?.iter().copied());
                 let build_manifest = self.build_manifest(client_chunks);
+                let page_loader = self.page_loader(client_chunks);
+                client_assets.push(page_loader);
                 server_assets.push(build_manifest);
                 self.ssr_chunk()
             }

packages/next-swc/crates/next-api/src/project.rs

@@ -5,7 +5,8 @@ use indexmap::{map::Entry, IndexMap};
 use next_core::{
     all_assets_from_entries,
     app_structure::find_app_dir,
-    get_edge_chunking_context, get_edge_compile_time_info, get_edge_resolve_options_context,
+    emit_assets, get_edge_chunking_context, get_edge_compile_time_info,
+    get_edge_resolve_options_context,
     instrumentation::instrumentation_files,
     middleware::middleware_files,
     mode::NextMode,
@@ -382,13 +383,12 @@ impl Project {
         Ok(Vc::upcast(virtual_fs))
     }
 
-    // #[turbo_tasks::function]
-    // pub async fn node_fs(self: Vc<Self>) -> Result<Vc<Box<dyn FileSystem>>> {
-    //     let this = self.await?;
-    //     let disk_fs = DiskFileSystem::new("node".to_string(),
-    // this.project_path.clone(), vec![]);     disk_fs.await?.
-    // start_watching_with_invalidation_reason()?;     Ok(Vc::upcast(disk_fs))
-    // }
+    #[turbo_tasks::function]
+    pub async fn output_fs(self: Vc<Self>) -> Result<Vc<Box<dyn FileSystem>>> {
+        let this = self.await?;
+        let disk_fs = DiskFileSystem::new("output".to_string(), this.project_path.clone(), vec![]);
+        Ok(Vc::upcast(disk_fs))
+    }
 
     #[turbo_tasks::function]
     pub async fn dist_dir(self: Vc<Self>) -> Result<Vc<String>> {
@@ -398,7 +398,7 @@ impl Project {
     #[turbo_tasks::function]
     pub async fn node_root(self: Vc<Self>) -> Result<Vc<FileSystemPath>> {
         let this = self.await?;
-        Ok(self.project_path().join(this.dist_dir.to_string()))
+        Ok(self.output_fs().root().join(this.dist_dir.to_string()))
     }
 
     #[turbo_tasks::function]
@@ -797,14 +797,17 @@ impl Project {
             let client_relative_path = self.client_relative_path();
             let node_root = self.node_root();
 
-            let completion = self.await?.versioned_content_map.insert_output_assets(
-                all_output_assets,
-                node_root,
+            self.await?
+                .versioned_content_map
+                .insert_output_assets(all_output_assets, client_relative_path, node_root)
+                .await?;
+
+            Ok(emit_assets(
+                *all_output_assets.await?,
+                self.node_root(),
                 client_relative_path,
                 node_root,
-            );
-
-            Ok(completion)
+            ))
         }
         .instrument(span)
         .await