Apply basePath for metadata image (#49226)

Fixes #49162

When user configures the `basePath` in `next.config.js`, we need to
apply it to metadata image path resolving
fix NEXT-1087

Author: huozhi

packages/next/src/build/entries.ts

@@ -553,6 +553,7 @@ export async function createEntrypoints(
               appDir,
               appPaths: matchedAppPaths,
               pageExtensions,
+              basePath: config.basePath,
               assetPrefix: config.assetPrefix,
               nextConfigOutput: config.output,
               preferredRegion: staticInfo.preferredRegion,
@@ -580,6 +581,7 @@ export async function createEntrypoints(
               appDir: appDir!,
               appPaths: matchedAppPaths,
               pageExtensions,
+              basePath: config.basePath,
               assetPrefix: config.assetPrefix,
               nextConfigOutput: config.output,
               // This isn't used with edge as it needs to be set on the entry module, which will be the `edgeServerEntry` instead.

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

@@ -64,12 +64,14 @@ export async function createStaticMetadataFromRoute(
     isRootLayoutOrRootPage,
     loaderContext,
     pageExtensions,
+    basePath,
   }: {
     segment: string
     resolvePath: (pathname: string) => Promise<string>
     isRootLayoutOrRootPage: boolean
     loaderContext: webpack.LoaderContext<any>
     pageExtensions: string[]
+    basePath: string
   }
 ) {
   let hasStaticMetadataFiles = false
@@ -124,6 +126,7 @@ export async function createStaticMetadataFromRoute(
           {
             type,
             segment,
+            basePath,
             pageExtensions,
           }
         )}!${filepath}${METADATA_RESOURCE_QUERY}`

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -33,6 +33,7 @@ export type AppLoaderOptions = {
   rootDir?: string
   tsconfigPath?: string
   isDev?: boolean
+  basePath: string
   nextConfigOutput?: NextConfig['output']
 }
 type AppLoader = webpack.LoaderDefinitionFunction<AppLoaderOptions>
@@ -176,6 +177,7 @@ async function createTreeCodeFromPath(
     resolveParallelSegments,
     loaderContext,
     pageExtensions,
+    basePath,
   }: {
     resolver: PathResolver
     resolvePath: (pathname: string) => Promise<string>
@@ -184,6 +186,7 @@ async function createTreeCodeFromPath(
     ) => [key: string, segment: string | string[]][]
     loaderContext: webpack.LoaderContext<AppLoaderOptions>
     pageExtensions: string[]
+    basePath: string
   }
 ) {
   const splittedPath = pagePath.split(/[\\/]/)
@@ -258,6 +261,7 @@ async function createTreeCodeFromPath(
 
       if (resolvedRouteDir) {
         metadata = await createStaticMetadataFromRoute(resolvedRouteDir, {
+          basePath,
           segment: segmentPath,
           resolvePath,
           isRootLayoutOrRootPage,
@@ -427,6 +431,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
     isDev,
     nextConfigOutput,
     preferredRegion,
+    basePath,
   } = loaderOptions
 
   const buildInfo = getModuleBuildInfo((this as any)._module)
@@ -535,6 +540,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
     resolveParallelSegments,
     loaderContext: this,
     pageExtensions,
+    basePath,
   })
 
   if (!rootLayout) {
@@ -599,7 +605,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
     export { renderToReadableStream, decodeReply, decodeAction } from 'react-server-dom-webpack/server.edge'
     export const __next_app_webpack_require__ = __webpack_require__
     export { preloadStyle, preloadFont, preconnect } from 'next/dist/server/app-render/rsc/preloads'
-    
+
     export const originalPathname = "${page}"
   `
 

packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts

@@ -17,11 +17,12 @@ interface Options {
   segment: string
   type: PossibleImageFileNameConvention
   pageExtensions: string[]
+  basePath: string
 }
 
 async function nextMetadataImageLoader(this: any, content: Buffer) {
   const options: Options = this.getOptions()
-  const { type, segment, pageExtensions } = options
+  const { type, segment, pageExtensions, basePath } = options
   const numericSizes = type === 'twitter' || type === 'openGraph'
   const { resourcePath, rootContext: context } = this
   const { name: fileNameBase, ext } = path.parse(resourcePath)
@@ -48,6 +49,7 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
   const isDynamicResource = pageExtensions.includes(extension)
   const pageSegment = isDynamicResource ? fileNameBase : interpolatedName
   const hashQuery = contentHash ? '?' + contentHash : ''
+  const pathnamePrefix = path.join(basePath, segment)
 
   if (isDynamicResource) {
     // re-export and spread as `exportedImageData` to avoid non-exported error
@@ -59,7 +61,7 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
     export default async function (props) {
       const { __metadata_id__: _, ...params } = props.params
       const imageUrl = fillMetadataSegment(${JSON.stringify(
-        segment
+        pathnamePrefix
       )}, params, ${JSON.stringify(pageSegment)})
 
       const { generateImageMetadata } = imageModule
@@ -136,7 +138,7 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
   export default (props) => {
     const imageData = ${JSON.stringify(imageData)}
     const imageUrl = fillMetadataSegment(${JSON.stringify(
-      segment
+      pathnamePrefix
     )}, props.params, ${JSON.stringify(pageSegment)})
 
     return [{

packages/next/src/server/dev/hot-reloader.ts

@@ -755,6 +755,7 @@ export default class HotReloader {
                       rootDir: this.dir,
                       isDev: true,
                       tsconfigPath: this.config.typescript.tsconfigPath,
+                      basePath: this.config.basePath,
                       assetPrefix: this.config.assetPrefix,
                       nextConfigOutput: this.config.output,
                       preferredRegion: staticInfo.preferredRegion,
@@ -840,6 +841,7 @@ export default class HotReloader {
                         rootDir: this.dir,
                         isDev: true,
                         tsconfigPath: this.config.typescript.tsconfigPath,
+                        basePath: this.config.basePath,
                         assetPrefix: this.config.assetPrefix,
                         nextConfigOutput: this.config.output,
                         preferredRegion: staticInfo.preferredRegion,

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

@@ -27,5 +27,12 @@ createNextDescribe(
           .text()
       ).toBe(`Page 2`)
     })
+
+    it('should prefix metadata og image with basePath', async () => {
+      const $ = await next.render$('/base/another')
+      const ogImageHref = $('meta[property="og:image"]').attr('content')
+
+      expect(ogImageHref).toContain('/base/another/opengraph-image.png')
+    })
   }
 )