Merge branch 'canary' into kdy1/swc-core-10

.github/workflows/build_and_test.yml

@@ -26,6 +26,7 @@ env:
   DD_ENV: 'ci'
   TEST_TIMINGS_TOKEN: ${{ secrets.TEST_TIMINGS_TOKEN }}
   NEXT_TEST_JOB: 1
+  NEXT_TEST_PREFER_OFFLINE: 1
 
 jobs:
   optimize-ci:

.github/workflows/build_reusable.yml

@@ -85,6 +85,7 @@ env:
   NEXT_TEST_JOB: 1
   VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
   VERCEL_TEST_TEAM: vtest314-next-e2e-tests
+  NEXT_TEST_PREFER_OFFLINE: 1
 
 jobs:
   build:

.vscode/extensions.json

@@ -23,6 +23,9 @@
     "ms-vscode.vscode-js-profile-flame",
 
     // MDX Authoring
-    "unifiedjs.vscode-mdx"
+    "unifiedjs.vscode-mdx",
+
+    // CSS Authoring (mainly Dev Overlay)
+    "styled-components.vscode-styled-components"
   ]
 }

crates/next-core/src/next_dynamic/dynamic_module.rs

@@ -94,10 +94,14 @@ impl ChunkableModule for NextDynamicEntryModule {
 impl EcmascriptChunkPlaceable for NextDynamicEntryModule {
     #[turbo_tasks::function]
     async fn get_exports(&self) -> Result<Vc<EcmascriptExports>> {
-        let module_reference = Vc::upcast(SingleChunkableModuleReference::new(
-            Vc::upcast(*self.module),
-            dynamic_ref_description(),
-        ));
+        let module_reference = ResolvedVc::upcast(
+            SingleChunkableModuleReference::new(
+                Vc::upcast(*self.module),
+                dynamic_ref_description(),
+            )
+            .to_resolved()
+            .await?,
+        );
 
         let mut exports = BTreeMap::new();
         exports.insert(
@@ -108,7 +112,7 @@ impl EcmascriptChunkPlaceable for NextDynamicEntryModule {
         Ok(EcmascriptExports::EsmExports(
             EsmExports {
                 exports,
-                star_exports: vec![module_reference.to_resolved().await?],
+                star_exports: vec![module_reference],
             }
             .resolved_cell(),
         )

crates/next-core/src/next_manifests/client_reference_manifest.rs

@@ -77,7 +77,9 @@ impl ClientReferenceManifest {
 
                 let client_chunk_item = ecmascript_client_reference
                     .client_module
-                    .as_chunk_item(Vc::upcast(client_chunking_context));
+                    .as_chunk_item(Vc::upcast(client_chunking_context))
+                    .to_resolved()
+                    .await?;
 
                 let client_module_id = client_chunk_item.id().await?;
 
@@ -116,16 +118,20 @@ impl ClientReferenceManifest {
                 if let Some(ssr_chunking_context) = ssr_chunking_context {
                     let ssr_chunk_item = ecmascript_client_reference
                         .ssr_module
-                        .as_chunk_item(Vc::upcast(ssr_chunking_context));
+                        .as_chunk_item(Vc::upcast(ssr_chunking_context))
+                        .to_resolved()
+                        .await?;
                     let ssr_module_id = ssr_chunk_item.id().await?;
 
-                    let rsc_chunk_item: Vc<Box<dyn ChunkItem>> =
+                    let rsc_chunk_item: ResolvedVc<Box<dyn ChunkItem>> =
                         ResolvedVc::try_downcast_type::<EcmascriptClientReferenceProxyModule>(
                             parent_module,
                         )
                         .await?
                         .unwrap()
-                        .as_chunk_item(Vc::upcast(ssr_chunking_context));
+                        .as_chunk_item(Vc::upcast(ssr_chunking_context))
+                        .to_resolved()
+                        .await?;
                     let rsc_module_id = rsc_chunk_item.id().await?;
 
                     let (ssr_chunks_paths, ssr_is_async) = if runtime == NextRuntime::Edge {
@@ -362,13 +368,13 @@ pub fn get_client_reference_module_key(server_path: &str, export_name: &str) ->
 
 async fn is_item_async(
     availability_info: &AvailabilityInfo,
-    chunk_item: Vc<Box<dyn ChunkItem>>,
+    chunk_item: ResolvedVc<Box<dyn ChunkItem>>,
 ) -> Result<bool> {
     let Some(available_chunk_items) = availability_info.available_chunk_items() else {
         return Ok(false);
     };
 
-    let Some(info) = &*available_chunk_items.get(chunk_item).await? else {
+    let Some(info) = available_chunk_items.await?.get(chunk_item).await? else {
         return Ok(false);
     };
 

crates/next-core/src/next_server_component/server_component_module.rs

@@ -114,9 +114,11 @@ impl ChunkableModule for NextServerComponentModule {
 impl EcmascriptChunkPlaceable for NextServerComponentModule {
     #[turbo_tasks::function]
     async fn get_exports(&self) -> Result<Vc<EcmascriptExports>> {
-        let module_reference = Vc::upcast(NextServerComponentModuleReference::new(Vc::upcast(
-            *self.module,
-        )));
+        let module_reference = ResolvedVc::upcast(
+            NextServerComponentModuleReference::new(Vc::upcast(*self.module))
+                .to_resolved()
+                .await?,
+        );
 
         let mut exports = BTreeMap::new();
         exports.insert(
@@ -127,7 +129,7 @@ impl EcmascriptChunkPlaceable for NextServerComponentModule {
         Ok(EcmascriptExports::EsmExports(
             EsmExports {
                 exports,
-                star_exports: vec![module_reference.to_resolved().await?],
+                star_exports: vec![module_reference],
             }
             .resolved_cell(),
         )

crates/next-core/src/next_server_utility/server_utility_module.rs

@@ -92,9 +92,11 @@ impl ChunkableModule for NextServerUtilityModule {
 impl EcmascriptChunkPlaceable for NextServerUtilityModule {
     #[turbo_tasks::function]
     async fn get_exports(&self) -> Result<Vc<EcmascriptExports>> {
-        let module_reference = Vc::upcast(NextServerUtilityModuleReference::new(Vc::upcast(
-            *self.module,
-        )));
+        let module_reference = ResolvedVc::upcast(
+            NextServerUtilityModuleReference::new(Vc::upcast(*self.module))
+                .to_resolved()
+                .await?,
+        );
 
         let mut exports = BTreeMap::new();
         exports.insert(
@@ -105,7 +107,7 @@ impl EcmascriptChunkPlaceable for NextServerUtilityModule {
         Ok(EcmascriptExports::EsmExports(
             EsmExports {
                 exports,
-                star_exports: vec![module_reference.to_resolved().await?],
+                star_exports: vec![module_reference],
             }
             .resolved_cell(),
         )

docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx

@@ -60,20 +60,20 @@ export async function create() {}
 export async function create() {}
 ```
 
-```tsx filename="app/ui/button.tsx" switcher
+```tsx filename="app/button.tsx" switcher
 'use client'
 
-import { create } from '@/app/actions'
+import { create } from './actions'
 
 export function Button() {
   return <button onClick={() => create()}>Create</button>
 }
 ```
 
-```jsx filename="app/ui/button.js" switcher
+```jsx filename="app/button.js" switcher
 'use client'
 
-import { create } from '@/app/actions'
+import { create } from './actions'
 
 export function Button() {
   return <button onClick={() => create()}>Create</button>

docs/01-app/03-building-your-application/06-optimizing/01-images.mdx

@@ -167,7 +167,7 @@ You can define a loader per-image with the [`loader` prop](/docs/app/api-referen
 
 ## Priority
 
-You should add the `priority` property to the image that will be the [Largest Contentful Paint (LCP) element](https://web.dev/lcp/#what-elements-are-considered) for each page. Doing so allows Next.js to specially prioritize the image for loading (e.g. through preload tags or priority hints), leading to a meaningful boost in LCP.
+You should add the `priority` property to the image that will be the [Largest Contentful Paint (LCP) element](https://web.dev/lcp/#what-elements-are-considered) for each page. Doing so allows Next.js to [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload) the image, leading to a meaningful boost in LCP.
 
 The LCP element is typically the largest image or text block visible within the viewport of the page. When you run `next dev`, you'll see a console warning if the LCP element is an `<Image>` without the `priority` property.
 

docs/01-app/03-building-your-application/06-optimizing/07-lazy-loading.mdx

@@ -57,7 +57,7 @@ export default function ClientComponentExample() {
 
 ### Skipping SSR
 
-When using `React.lazy()` and Suspense, Client Components will be pre-rendered (SSR) by default.
+When using `React.lazy()` and Suspense, Client Components will be [prerendered](https://github.com/reactwg/server-components/discussions/4) (SSR) by default.
 
 > **Note:** `ssr: false` option will only work for client components, move it into client components ensure the client code-splitting working properly.
 

docs/01-app/03-building-your-application/10-deploying/02-static-exports.mdx

@@ -35,7 +35,7 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-After running `next build`, Next.js will produce an `out` folder which contains the HTML/CSS/JS assets for your application.
+After running `next build`, Next.js will create an `out` folder with the HTML/CSS/JS assets for your application.
 
 <PagesOnly>
 

docs/01-app/03-building-your-application/11-upgrading/05-app-router-migration.mdx

@@ -878,6 +878,10 @@ export async function GET(request) {}
 
 > **Good to know**: If you previously used API routes to call an external API from the client, you can now use [Server Components](/docs/app/building-your-application/rendering/server-components) instead to securely fetch data. Learn more about [data fetching](/docs/app/building-your-application/data-fetching/fetching).
 
+#### Single-Page Applications
+
+If you are also migrating to Next.js from a Single-Page Application (SPA) at the same time, see our [documentation](/docs/app/building-your-application/upgrading/single-page-applications) to learn more.
+
 ### Step 7: Styling
 
 In the `pages` directory, global stylesheets are restricted to only `pages/_app.js`. With the `app` directory, this restriction has been lifted. Global styles can be added to any layout, page, or component.

docs/01-app/03-building-your-application/11-upgrading/06-from-create-react-app.mdx

@@ -1,5 +1,6 @@
 ---
 title: Migrating from Create React App
+nav_title: Migrating from CRA
 description: Learn how to migrate your existing React application from Create React App to Next.js.
 ---