Fix default metadata is missing in root not-found

packages/next/src/server/app-render/app-render.tsx

@@ -76,6 +76,8 @@ import { appendMutableCookies } from '../web/spec-extension/adapters/request-coo
 
 export const isEdgeRuntime = process.env.NEXT_RUNTIME === 'edge'
 
+const emptyLoaderTree: LoaderTree = ['', {}, {}]
+
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]
   segment: string
@@ -1292,6 +1294,18 @@ export async function renderToHTMLOrFlight(
           query
         )
 
+        const createMetadata = (tree: LoaderTree) => (
+          // Adding key={requestId} to make metadata remount for each render
+          // @ts-expect-error allow to use async server component
+          <MetadataTree
+            key={requestId}
+            tree={tree}
+            pathname={pathname}
+            searchParams={providedSearchParams}
+            getDynamicParamFromSegment={getDynamicParamFromSegment}
+          />
+        )
+
         return (
           <>
             {styles}
@@ -1301,22 +1315,15 @@ export async function renderToHTMLOrFlight(
               initialTree={initialTree}
               initialHead={
                 <>
-                  {/* Adding key={requestId} to make metadata remount for each render */}
-                  {/* @ts-expect-error allow to use async server component */}
-                  <MetadataTree
-                    key={requestId}
-                    tree={loaderTree}
-                    pathname={pathname}
-                    searchParams={providedSearchParams}
-                    getDynamicParamFromSegment={getDynamicParamFromSegment}
-                  />
+                  {createMetadata(loaderTree)}
                   {appUsingSizeAdjust ? <meta name="next-size-adjust" /> : null}
                 </>
               }
               globalErrorComponent={GlobalError}
               notFound={
                 NotFound && RootLayout ? (
                   <RootLayout params={{}}>
+                    {createMetadata(emptyLoaderTree)}
                     {notFoundStyles}
                     <NotFound />
                   </RootLayout>
@@ -1526,7 +1533,7 @@ export async function renderToHTMLOrFlight(
                   {/* @ts-expect-error allow to use async server component */}
                   <MetadataTree
                     key={requestId}
-                    tree={['', {}, {}]}
+                    tree={emptyLoaderTree}
                     pathname={pathname}
                     searchParams={providedSearchParams}
                     getDynamicParamFromSegment={getDynamicParamFromSegment}

test/e2e/app-dir/metadata/metadata.test.ts

@@ -76,7 +76,7 @@ createNextDescribe(
        * @example
        *
        * const $ = await next.render$('html')
-       * const matchHtml = createHtmlMatcher($)
+       * const matchHtml = createMultiHtmlMatcher($)
        * await matchHtml('meta', 'name', 'property', {
        *   description: 'description',
        *   og: 'og:description'
@@ -414,12 +414,42 @@ createNextDescribe(
         )
       })
 
+      it('should render root not-found with default metadata', async () => {
+        const $ = await next.render$('/does-not-exist')
+
+        // Should contain default metadata and noindex tag
+        const matchHtml = createMultiHtmlMatcher($)
+        expect($('meta[charset="utf-8"]').length).toBe(1)
+        await matchHtml('meta', 'name', 'content', {
+          viewport: 'width=device-width, initial-scale=1',
+          robots: 'noindex',
+        })
+      })
+
       it('should support notFound in generateMetadata', async () => {
-        // TODO-APP: support custom not-found for generateMetadata
         const res = await next.fetch('/async/not-found')
         expect(res.status).toBe(404)
         const html = await res.text()
-        expect(html).toContain('root not found page')
+        const $ = cheerio.load(html)
+
+        // TODO-APP: support render custom not-found in SSR for generateMetadata.
+        // Check contains root not-found payload in flight response for now.
+        let hasRootNotFoundFlight = false
+        for (const el of $('script').toArray()) {
+          const text = $(el).text()
+          if (text.includes('root not found page')) {
+            hasRootNotFoundFlight = true
+          }
+        }
+        expect(hasRootNotFoundFlight).toBe(true)
+
+        // Should contain default metadata and noindex tag
+        const matchHtml = createMultiHtmlMatcher($)
+        expect($('meta[charset="utf-8"]').length).toBe(1)
+        await matchHtml('meta', 'name', 'content', {
+          viewport: 'width=device-width, initial-scale=1',
+          robots: 'noindex',
+        })
 
         const browser = await next.browser('/async/not-found')
         expect(await browser.elementByCss('h2').text()).toBe(