Use addDependency to track metadata route file changes

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

@@ -127,7 +127,6 @@ 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}`

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

@@ -21,10 +21,10 @@ const cacheHeader = {
 }
 
 type MetadataRouteLoaderOptions = {
-  page: string
+  // Using separate argument to avoid json being parsed and hit error
+  // x-ref: https://github.com/vercel/next.js/pull/62615
   filePath: string
   isDynamicRouteExtension: '1' | '0'
-  isDynamicMultiRoute: '1' | '0'
 }
 
 export function getFilenameAndExtension(resourcePath: string) {
@@ -248,6 +248,7 @@ const nextMetadataRouterLoader: webpack.LoaderDefinitionFunction<MetadataRouteLo
   async function () {
     const { isDynamicRouteExtension, filePath } = this.getOptions()
     const { name: fileBaseName } = getFilenameAndExtension(filePath)
+    this.addDependency(filePath)
 
     let code = ''
     if (isDynamicRouteExtension === '1') {

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)
+  })
+})

test/turbopack-build-tests-manifest.json

@@ -15724,6 +15724,15 @@
       "pending": [],
       "flakey": [],
       "runtimeError": false
+    },
+    "test/production/app-dir/metadata-static-route-cache/metadata-static-route-cache.test.ts": {
+      "passed": [],
+      "failed": [
+        "app dir - metadata static routes cache should generate different content after replace the static metadata file"
+      ],
+      "pending": [],
+      "flakey": [],
+      "runtimeError": false
     }
   },
   "rules": {