Turbopack: expose client static assets correctly

crates/next-api/src/project.rs

@@ -1089,7 +1089,11 @@ impl Project {
                 self.next_config().computed_asset_prefix().owned().await?,
             )
         } else {
-            get_server_chunking_context(options)
+            get_server_chunking_context(
+                options,
+                self.client_relative_path().owned().await?,
+                self.next_config().computed_asset_prefix().owned().await?,
+            )
         })
     }
 
@@ -1115,10 +1119,14 @@ impl Project {
             get_edge_chunking_context_with_client_assets(
                 options,
                 self.client_relative_path().owned().await?,
-                self.next_config().computed_asset_prefix(),
+                self.next_config().computed_asset_prefix().owned().await?,
             )
         } else {
-            get_edge_chunking_context(options)
+            get_edge_chunking_context(
+                options,
+                self.client_relative_path().owned().await?,
+                self.next_config().computed_asset_prefix().owned().await?,
+            )
         })
     }
 

crates/next-core/src/next_edge/context.rs

@@ -210,7 +210,7 @@ pub struct EdgeChunkingContextOptions {
 pub async fn get_edge_chunking_context_with_client_assets(
     options: EdgeChunkingContextOptions,
     client_root: FileSystemPath,
-    asset_prefix: ResolvedVc<Option<RcStr>>,
+    asset_prefix: Option<RcStr>,
 ) -> Result<Vc<Box<dyn ChunkingContext>>> {
     let EdgeChunkingContextOptions {
         mode,
@@ -237,7 +237,7 @@ pub async fn get_edge_chunking_context_with_client_assets(
         environment.to_resolved().await?,
         next_mode.runtime_type(),
     )
-    .asset_base_path(asset_prefix.owned().await?)
+    .asset_base_path(asset_prefix)
     .minify_type(if *turbo_minify.await? {
         MinifyType::Minify {
             // React needs deterministic function names to work correctly.
@@ -279,6 +279,8 @@ pub async fn get_edge_chunking_context_with_client_assets(
 #[turbo_tasks::function]
 pub async fn get_edge_chunking_context(
     options: EdgeChunkingContextOptions,
+    client_root: FileSystemPath,
+    asset_prefix: Option<RcStr>,
 ) -> Result<Vc<Box<dyn ChunkingContext>>> {
     let EdgeChunkingContextOptions {
         mode,
@@ -305,6 +307,9 @@ pub async fn get_edge_chunking_context(
         environment.to_resolved().await?,
         next_mode.runtime_type(),
     )
+    .client_roots_override(rcstr!("client"), client_root.clone())
+    .asset_root_path_override(rcstr!("client"), client_root.join("static/media")?)
+    .asset_base_path_override(rcstr!("client"), asset_prefix.unwrap())
     // Since one can't read files in edge directly, any asset need to be fetched
     // instead. This special blob url is handled by the custom fetch
     // implementation in the edge sandbox. It will respond with the

crates/next-core/src/next_image/module.rs

@@ -56,7 +56,9 @@ impl StructuredImageModuleType {
         blur_placeholder_mode: BlurPlaceholderMode,
         module_asset_context: ResolvedVc<ModuleAssetContext>,
     ) -> Result<Vc<Box<dyn Module>>> {
-        let static_asset = StaticUrlJsModule::new(*source).to_resolved().await?;
+        let static_asset = StaticUrlJsModule::new(*source, Some(rcstr!("client")))
+            .to_resolved()
+            .await?;
         Ok(module_asset_context
             .process(
                 Vc::upcast(

crates/next-core/src/next_server/context.rs

@@ -1079,6 +1079,8 @@ pub async fn get_server_chunking_context_with_client_assets(
 #[turbo_tasks::function]
 pub async fn get_server_chunking_context(
     options: ServerChunkingContextOptions,
+    client_root: FileSystemPath,
+    asset_prefix: Option<RcStr>,
 ) -> Result<Vc<NodeJsChunkingContext>> {
     let ServerChunkingContextOptions {
         mode,
@@ -1108,6 +1110,9 @@ pub async fn get_server_chunking_context(
         environment.to_resolved().await?,
         next_mode.runtime_type(),
     )
+    .client_roots_override(rcstr!("client"), client_root.clone())
+    .asset_root_path_override(rcstr!("client"), client_root.join("static/media")?)
+    .asset_prefix_override(rcstr!("client"), asset_prefix.unwrap())
     .minify_type(if *turbo_minify.await? {
         MinifyType::Minify {
             mangle: (!*no_mangling.await?).then_some(MangleType::OptimalSize),

test/e2e/url/app/api/edge/route.js

@@ -0,0 +1,8 @@
+import imported from '../../../public/vercel.png'
+const url = new URL('../../../public/vercel.png', import.meta.url).toString()
+
+export function GET(req, res) {
+  return Response.json({ imported, url })
+}
+
+export const runtime = 'edge'

test/e2e/url/app/api/route.js

@@ -0,0 +1,6 @@
+import imported from '../../public/vercel.png'
+const url = new URL('../../public/vercel.png', import.meta.url).toString()
+
+export function GET(req, res) {
+  return Response.json({ imported, url })
+}

test/e2e/url/app/client-edge/page.js

@@ -0,0 +1,14 @@
+'use client'
+
+import imported from '../../public/vercel.png'
+const url = new URL('../../public/vercel.png', import.meta.url).toString()
+
+export default function Index(props) {
+  return (
+    <main>
+      Hello {imported.src}+{url}
+    </main>
+  )
+}
+
+export const runtime = 'edge'

test/e2e/url/app/client/page.js

@@ -0,0 +1,12 @@
+'use client'
+
+import imported from '../../public/vercel.png'
+const url = new URL('../../public/vercel.png', import.meta.url).toString()
+
+export default function Index(props) {
+  return (
+    <main>
+      Hello {imported.src}+{url}
+    </main>
+  )
+}

test/e2e/url/app/layout.js

@@ -0,0 +1,7 @@
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/url/app/manifest.js

@@ -0,0 +1,17 @@
+import icon from '../public/vercel.png'
+const url = new URL('../public/vercel.png', import.meta.url).toString()
+
+export default function manifest() {
+  return {
+    short_name: 'Next.js',
+    name: 'Next.js',
+    icons: [
+      {
+        src: icon.src,
+        type: 'image/png',
+        sizes: '512x512',
+      },
+    ],
+    description: url,
+  }
+}

test/e2e/url/app/opengraph-image.js

@@ -0,0 +1,9 @@
+import imported from '../public/vercel.png'
+const url = new URL('../public/vercel.png', import.meta.url).toString()
+
+export const contentType = 'text/json'
+
+// Image generation
+export default async function Image() {
+  return Response.json({ imported, url })
+}

test/e2e/url/app/rsc-edge/page.js

@@ -0,0 +1,12 @@
+import imported from '../../public/vercel.png'
+const url = new URL('../../public/vercel.png', import.meta.url).toString()
+
+export default function Index(props) {
+  return (
+    <main>
+      Hello {imported.src}+{url}
+    </main>
+  )
+}
+
+export const runtime = 'edge'

test/e2e/url/app/rsc/page.js

@@ -0,0 +1,10 @@
+import imported from '../../public/vercel.png'
+const url = new URL('../../public/vercel.png', import.meta.url).toString()
+
+export default function Index(props) {
+  return (
+    <main>
+      Hello {imported.src}+{url}
+    </main>
+  )
+}

test/e2e/url/middleware.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+// @ts-ignore
+import imported from './public/vercel.png'
+const url = new URL('./public/vercel.png', import.meta.url).toString()
+
+export async function middleware(req: NextRequest) {
+  if (req.nextUrl.toString().endsWith('/middleware')) {
+    return Response.json({ imported, url })
+  }
+
+  return NextResponse.next()
+}

test/e2e/url/pages/api/pages-edge/index.js

@@ -0,0 +1,13 @@
+import imported from '../../../public/vercel.png'
+const url = new URL('../../../public/vercel.png', import.meta.url)
+
+export default (req, res) => {
+  return new Response(
+    JSON.stringify({
+      imported,
+      url: url.toString(),
+    })
+  )
+}
+
+export const runtime = 'experimental-edge'

test/e2e/url/pages/api/pages/index.js

@@ -0,0 +1,12 @@
+import fs from 'fs'
+
+import imported from '../../../public/vercel.png'
+const url = new URL('../../../public/vercel.png', import.meta.url)
+
+export default (req, res) => {
+  res.send({
+    imported,
+    url: url.toString(),
+    size: fs.readFileSync(url).length,
+  })
+}

test/e2e/url/pages/pages-edge/ssr.js

@@ -0,0 +1,20 @@
+import imported from '../../public/vercel.png'
+
+export function getServerSideProps() {
+  return {
+    props: {
+      url: new URL('../../public/vercel.png', import.meta.url).toString(),
+    },
+  }
+}
+
+export default function Index({ url }) {
+  return (
+    <main>
+      Hello {imported.src}+
+      {new URL('../../public/vercel.png', import.meta.url).toString()}+{url}
+    </main>
+  )
+}
+
+export const runtime = 'experimental-edge'

test/e2e/url/pages/pages-edge/static.js

@@ -0,0 +1,12 @@
+import imported from '../../public/vercel.png'
+const url = new URL('../../public/vercel.png', import.meta.url).toString()
+
+export default function Index(props) {
+  return (
+    <main>
+      Hello {imported.src}+{url}
+    </main>
+  )
+}
+
+export const runtime = 'experimental-edge'

test/e2e/url/pages/pages/ssg.js

@@ -0,0 +1,18 @@
+import imported from '../../public/vercel.png'
+
+export async function getStaticProps() {
+  return {
+    props: {
+      url: new URL('../../public/vercel.png', import.meta.url).toString(),
+    },
+  }
+}
+
+export default function Index({ url }) {
+  return (
+    <main>
+      Hello {imported.src}+
+      {new URL('../../public/vercel.png', import.meta.url).toString()}+{url}
+    </main>
+  )
+}

test/e2e/url/pages/pages/ssr.js

@@ -0,0 +1,18 @@
+import imported from '../../public/vercel.png'
+
+export function getServerSideProps() {
+  return {
+    props: {
+      url: new URL('../../public/vercel.png', import.meta.url).toString(),
+    },
+  }
+}
+
+export default function Index({ url }) {
+  return (
+    <main>
+      Hello {imported.src}+
+      {new URL('../../public/vercel.png', import.meta.url).toString()}+{url}
+    </main>
+  )
+}

test/e2e/url/pages/pages/static.js

@@ -0,0 +1,10 @@
+import imported from '../../public/vercel.png'
+const url = new URL('../../public/vercel.png', import.meta.url).toString()
+
+export default function Index(props) {
+  return (
+    <main>
+      Hello {imported.src}+{url}
+    </main>
+  )
+}