Use addDependency to track metadata route file changes

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

@@ -127,10 +127,8 @@ async function createAppRouteCode({
     const isDynamicRouteExtension = pageExtensions.includes(ext)
 
     resolvedPagePath = `next-metadata-route-loader?${stringify({
-      page,
-      filePath: resolvedPagePath,
       isDynamicRouteExtension: isDynamicRouteExtension ? '1' : '0',
-    })}!?${WEBPACK_RESOURCE_QUERIES.metadataRoute}`
+    })}!${resolvedPagePath}?${WEBPACK_RESOURCE_QUERIES.metadataRoute}`
   }
 
   const pathname = new AppPathnameNormalizer().normalize(page)

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

@@ -21,10 +21,7 @@ const cacheHeader = {
 }
 
 type MetadataRouteLoaderOptions = {
-  page: string
-  filePath: string
   isDynamicRouteExtension: '1' | '0'
-  isDynamicMultiRoute: '1' | '0'
 }
 
 export function getFilenameAndExtension(resourcePath: string) {
@@ -246,7 +243,8 @@ ${staticGenerationCode}
 // TODO-METADATA: improve the cache control strategy
 const nextMetadataRouterLoader: webpack.LoaderDefinitionFunction<MetadataRouteLoaderOptions> =
   async function () {
-    const { isDynamicRouteExtension, filePath } = this.getOptions()
+    const { isDynamicRouteExtension } = this.getOptions()
+    const filePath = this.resourcePath
     const { name: fileBaseName } = getFilenameAndExtension(filePath)
 
     let code = ''

test/production/app-dir/metadata-static-route-cache/metadata-static-route-cache.test.ts

@@ -0,0 +1,52 @@
+import { nextTestSetup } from 'e2e-utils'
+import crypto from 'crypto'
+
+function generateMD5(text: string) {
+  const hash = crypto.createHash('md5')
+  hash.update(text)
+  return hash.digest('hex')
+}
+
+describe('app dir - metadata static routes cache', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    skipStart: true,
+  })
+
+  it('should generate different content after replace the static metadata file', async () => {
+    await next.build()
+
+    const faviconBuildContent = await next.readFile(
+      '.next/server/app/favicon.ico.body'
+    )
+    const opengrpahImageBuildContent = await next.readFile(
+      '.next/server/app/opengraph-image.png.body'
+    )
+
+    const faviconMd5 = generateMD5(faviconBuildContent)
+    const opengraphImageMd5 = generateMD5(opengrpahImageBuildContent)
+
+    // Update favicon and opengraph image
+    const newFaviconContent = await next.readFile('app/favicon.ico.new')
+    await next.patchFile('app/favicon.ico', newFaviconContent)
+
+    const newOpengraphImageContent = await next.readFile(
+      'app/opengraph-image.png.new'
+    )
+    await next.patchFile('app/opengraph-image.png', newOpengraphImageContent)
+
+    await next.build()
+    const faviconBuildContentNew = await next.readFile(
+      '.next/server/app/favicon.ico.body'
+    )
+    const opengrpahImageBuildContentNew = await next.readFile(
+      '.next/server/app/opengraph-image.png.body'
+    )
+
+    const faviconMd5New = generateMD5(faviconBuildContentNew)
+    const opengraphImageMd5New = generateMD5(opengrpahImageBuildContentNew)
+
+    expect(faviconMd5).not.toBe(faviconMd5New)
+    expect(opengraphImageMd5).not.toBe(opengraphImageMd5New)
+  })
+})