fix metadata basePath for manifest (#76681)

### What

Static metadata manifest file should be prefixed with `basePath` when it's specified, as all the requests are sent to the routes under `/<basePath>/*`, it should also show the correct url in the html

Fixes #56687
Closes NEXT-2707

Author: huozhi

crates/next-core/src/app_page_loader_tree.rs

@@ -133,11 +133,18 @@ impl AppPageLoaderTreeBuilder {
             return Ok(());
         };
 
-        let manifest_route = &format!("/{}", get_metadata_route_name(manifest).await?);
+        let metadata_manifest_route = get_metadata_route_name(manifest).await?;
+        // prefix with base_path if it exists
+        let manifest_route = if let Some(base_path) = &self.base_path {
+            format!("{}/{}", base_path, metadata_manifest_route)
+        } else {
+            metadata_manifest_route.to_string()
+        };
+
         writeln!(
             self.loader_tree_code,
             "    manifest: {},",
-            StringifyJs(manifest_route)
+            StringifyJs(&manifest_route)
         )?;
 
         Ok(())

packages/next/src/build/webpack/loaders/metadata/discover.ts

@@ -86,7 +86,9 @@ export async function createStaticMetadataFromRoute(
         const extension = staticManifestExtension.includes(ext.slice(1))
           ? ext.slice(1)
           : 'webmanifest'
-        staticImagesMetadata.manifest = JSON.stringify(`/${name}.${extension}`)
+        staticImagesMetadata.manifest = JSON.stringify(
+          `${basePath}/${name}.${extension}`
+        )
       }
       return
     }

packages/next/src/lib/metadata/resolvers/resolve-url.ts

@@ -73,8 +73,8 @@ function resolveUrl(
   }
 
   // Handle relative or absolute paths
-  const basePath = metadataBase.pathname || ''
-  const joinedPath = path.posix.join(basePath, url)
+  const pathname = metadataBase.pathname || ''
+  const joinedPath = path.posix.join(pathname, url)
 
   return new URL(joinedPath, metadataBase)
 }

test/e2e/app-dir/app-basepath/app/manifest.ts

@@ -0,0 +1,7 @@
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'NextJS Manifest',
+  }
+}

test/e2e/app-dir/app-basepath/app/another/opengraph-image.png renamed to test/e2e/app-dir/app-basepath/app/metadata/opengraph-image.png

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div id="page-metadata">Page Metadata</div>
+}

test/e2e/app-dir/app-basepath/app/metadata/page.js

@@ -32,11 +32,16 @@ describe('app dir - basepath', () => {
     ).toBe(`Page 2`)
   })
 
-  it('should prefix metadata og image with basePath', async () => {
-    const $ = await next.render$('/base/another')
+  it('should prefix segment metadata og image with basePath and pathname', async () => {
+    const $ = await next.render$('/base/metadata')
     const ogImageHref = $('meta[property="og:image"]').attr('content')
+    expect(ogImageHref).toContain('/base/metadata/opengraph-image.png')
+  })
 
-    expect(ogImageHref).toContain('/base/another/opengraph-image.png')
+  it('should prefix manifest with basePath', async () => {
+    const $ = await next.render$('/base/metadata')
+    const manifestHref = $('link[rel="manifest"]').attr('href')
+    expect(manifestHref).toContain('/base/manifest.webmanifest')
   })
 
   it('should prefix redirect() with basePath', async () => {