diff --git a/packages/next/src/lib/metadata/async-metadata.tsx b/packages/next/src/lib/metadata/async-metadata.tsx
index f97287e55efe6..91141e7c5e47c 100644
--- a/packages/next/src/lib/metadata/async-metadata.tsx
+++ b/packages/next/src/lib/metadata/async-metadata.tsx
@@ -1,22 +1,41 @@
 'use client'
 
-import { use, type JSX } from 'react'
+import { Suspense, use } from 'react'
 import { useServerInsertedMetadata } from '../../server/app-render/metadata-insertion/use-server-inserted-metadata'
 
-function ServerInsertMetadata({ promise }: { promise: Promise<JSX.Element> }) {
+export type StreamingMetadataResolvedState = {
+  metadata: React.ReactNode
+  error: unknown | null
+  digest: string | undefined
+}
+
+function ServerInsertMetadata({
+  promise,
+}: {
+  promise: Promise<StreamingMetadataResolvedState>
+}) {
   // Apply use() to the metadata promise to suspend the rendering in SSR.
-  const metadata = use(promise)
+  const { metadata } = use(promise)
   // Insert metadata into the HTML stream through the `useServerInsertedMetadata`
   useServerInsertedMetadata(() => metadata)
 
   return null
 }
 
-function BrowserResolvedMetadata({ promise }: { promise: Promise<any> }) {
-  return use(promise)
+function BrowserResolvedMetadata({
+  promise,
+}: {
+  promise: Promise<StreamingMetadataResolvedState>
+}) {
+  const { metadata } = use(promise)
+  return metadata
 }
 
-export function AsyncMetadata({ promise }: { promise: Promise<any> }) {
+export function AsyncMetadata({
+  promise,
+}: {
+  promise: Promise<StreamingMetadataResolvedState>
+}) {
   return (
     <>
       {typeof window === 'undefined' ? (
@@ -27,3 +46,32 @@ export function AsyncMetadata({ promise }: { promise: Promise<any> }) {
     </>
   )
 }
+
+function MetadataOutlet({
+  promise,
+}: {
+  promise: Promise<StreamingMetadataResolvedState>
+}) {
+  const { error, digest } = use(promise)
+  if (error) {
+    if (digest) {
+      // The error will lose its original digest after passing from server layer to client layer；
+      // We recover the digest property here to override the React created one if original digest exists.
+      ;(error as any).digest = digest
+    }
+    throw error
+  }
+  return null
+}
+
+export function AsyncMetadataOutlet({
+  promise,
+}: {
+  promise: Promise<StreamingMetadataResolvedState>
+}) {
+  return (
+    <Suspense fallback={null}>
+      <MetadataOutlet promise={promise} />
+    </Suspense>
+  )
+}
diff --git a/packages/next/src/lib/metadata/metadata.tsx b/packages/next/src/lib/metadata/metadata.tsx
index 96d847179c3b0..8241954d394d2 100644
--- a/packages/next/src/lib/metadata/metadata.tsx
+++ b/packages/next/src/lib/metadata/metadata.tsx
@@ -1,9 +1,9 @@
+import React, { Suspense, cache, cloneElement } from 'react'
 import type { ParsedUrlQuery } from 'querystring'
 import type { GetDynamicParamFromSegment } from '../../server/app-render/app-render'
 import type { LoaderTree } from '../../server/lib/app-dir-module'
 import type { CreateServerParamsForMetadata } from '../../server/request/params'
-
-import { Suspense, cache, cloneElement } from 'react'
+import type { StreamingMetadataResolvedState } from './async-metadata'
 import {
   AppleWebAppMeta,
   FormatDetectionMeta,
@@ -37,7 +37,7 @@ import {
   METADATA_BOUNDARY_NAME,
   VIEWPORT_BOUNDARY_NAME,
 } from './metadata-constants'
-import { AsyncMetadata } from './async-metadata'
+import { AsyncMetadata, AsyncMetadataOutlet } from './async-metadata'
 import { isPostpone } from '../../server/lib/router-utils/is-postpone'
 
 // Use a promise to share the status of the metadata resolving,
@@ -75,6 +75,7 @@ export function createMetadataComponents({
   ViewportTree: React.ComponentType
   getMetadataReady: () => Promise<void>
   getViewportReady: () => Promise<void>
+  StreamingMetadataOutlet: React.ComponentType
 } {
   function ViewportTree() {
     return (
@@ -145,13 +146,21 @@ export function createMetadataComponents({
     )
   }
 
-  async function resolveFinalMetadata() {
+  async function resolveFinalMetadata(): Promise<StreamingMetadataResolvedState> {
+    let result: React.ReactNode
+    let error = null
     try {
-      return await metadata()
+      result = await metadata()
+      return {
+        metadata: result,
+        error: null,
+        digest: undefined,
+      }
     } catch (metadataErr) {
+      error = metadataErr
       if (!errorType && isHTTPAccessFallbackError(metadataErr)) {
         try {
-          return await getNotFoundMetadata(
+          result = await getNotFoundMetadata(
             tree,
             searchParams,
             getDynamicParamFromSegment,
@@ -159,7 +168,13 @@ export function createMetadataComponents({
             createServerParamsForMetadata,
             workStore
           )
+          return {
+            metadata: result,
+            error,
+            digest: (error as any)?.digest,
+          }
         } catch (notFoundMetadataErr) {
+          error = notFoundMetadataErr
           // In PPR rendering we still need to throw the postpone error.
           // If metadata is postponed, React needs to be aware of the location of error.
           if (serveStreamingMetadata && isPostpone(notFoundMetadataErr)) {
@@ -176,7 +191,11 @@ export function createMetadataComponents({
       // also error in the MetadataOutlet which causes the error to
       // bubble from the right position in the page to be caught by the
       // appropriate boundaries
-      return null
+      return {
+        metadata: result,
+        error,
+        digest: (error as any)?.digest,
+      }
     }
   }
   async function Metadata() {
@@ -188,7 +207,8 @@ export function createMetadataComponents({
         </Suspense>
       )
     }
-    return await promise
+    const metadataState = await promise
+    return metadataState.metadata
   }
 
   Metadata.displayName = METADATA_BOUNDARY_NAME
@@ -207,11 +227,19 @@ export function createMetadataComponents({
     return undefined
   }
 
+  function StreamingMetadataOutlet() {
+    if (serveStreamingMetadata) {
+      return <AsyncMetadataOutlet promise={resolveFinalMetadata()} />
+    }
+    return null
+  }
+
   return {
     ViewportTree,
     MetadataTree,
     getViewportReady,
     getMetadataReady,
+    StreamingMetadataOutlet,
   }
 }
 
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 8a55b2cfe01ca..f4e9394e6f65c 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -321,14 +321,13 @@ function createDivergedMetadataComponents(
   serveStreamingMetadata: boolean
 ): {
   StaticMetadata: React.ComponentType<{}>
-  StreamingMetadata: React.ComponentType<{}>
+  StreamingMetadata: React.ComponentType<{}> | null
 } {
   function EmptyMetadata() {
     return null
   }
-  const StreamingMetadata: React.ComponentType<{}> = serveStreamingMetadata
-    ? Metadata
-    : EmptyMetadata
+  const StreamingMetadata: React.ComponentType<{}> | null =
+    serveStreamingMetadata ? Metadata : null
 
   const StaticMetadata: React.ComponentType<{}> = serveStreamingMetadata
     ? EmptyMetadata
@@ -490,23 +489,28 @@ async function generateDynamicRSCPayload(
     const preloadCallbacks: PreloadCallbacks = []
 
     const searchParams = createServerSearchParamsForMetadata(query, workStore)
-    const { ViewportTree, MetadataTree, getViewportReady, getMetadataReady } =
-      createMetadataComponents({
-        tree: loaderTree,
-        searchParams,
-        metadataContext: createTrackedMetadataContext(
-          url.pathname,
-          ctx.renderOpts,
-          workStore
-        ),
-        getDynamicParamFromSegment,
-        appUsingSizeAdjustment,
-        createServerParamsForMetadata,
-        workStore,
-        MetadataBoundary,
-        ViewportBoundary,
-        serveStreamingMetadata,
-      })
+    const {
+      ViewportTree,
+      MetadataTree,
+      getViewportReady,
+      getMetadataReady,
+      StreamingMetadataOutlet,
+    } = createMetadataComponents({
+      tree: loaderTree,
+      searchParams,
+      metadataContext: createTrackedMetadataContext(
+        url.pathname,
+        ctx.renderOpts,
+        workStore
+      ),
+      getDynamicParamFromSegment,
+      appUsingSizeAdjustment,
+      createServerParamsForMetadata,
+      workStore,
+      MetadataBoundary,
+      ViewportBoundary,
+      serveStreamingMetadata,
+    })
 
     const { StreamingMetadata, StaticMetadata } =
       createDivergedMetadataComponents(() => {
@@ -540,6 +544,7 @@ async function generateDynamicRSCPayload(
         getMetadataReady,
         preloadCallbacks,
         StreamingMetadata,
+        StreamingMetadataOutlet,
       })
     ).map((path) => path.slice(1)) // remove the '' (root) segment
   }
@@ -801,24 +806,29 @@ async function getRSCPayload(
   const serveStreamingMetadata = getServeStreamingMetadata(ctx)
 
   const searchParams = createServerSearchParamsForMetadata(query, workStore)
-  const { ViewportTree, MetadataTree, getViewportReady, getMetadataReady } =
-    createMetadataComponents({
-      tree,
-      errorType: is404 ? 'not-found' : undefined,
-      searchParams,
-      metadataContext: createTrackedMetadataContext(
-        url.pathname,
-        ctx.renderOpts,
-        workStore
-      ),
-      getDynamicParamFromSegment,
-      appUsingSizeAdjustment,
-      createServerParamsForMetadata,
-      workStore,
-      MetadataBoundary,
-      ViewportBoundary,
-      serveStreamingMetadata: serveStreamingMetadata,
-    })
+  const {
+    ViewportTree,
+    MetadataTree,
+    getViewportReady,
+    getMetadataReady,
+    StreamingMetadataOutlet,
+  } = createMetadataComponents({
+    tree,
+    errorType: is404 ? 'not-found' : undefined,
+    searchParams,
+    metadataContext: createTrackedMetadataContext(
+      url.pathname,
+      ctx.renderOpts,
+      workStore
+    ),
+    getDynamicParamFromSegment,
+    appUsingSizeAdjustment,
+    createServerParamsForMetadata,
+    workStore,
+    MetadataBoundary,
+    ViewportBoundary,
+    serveStreamingMetadata,
+  })
 
   const preloadCallbacks: PreloadCallbacks = []
 
@@ -844,6 +854,7 @@ async function getRSCPayload(
     preloadCallbacks,
     authInterrupts: ctx.renderOpts.experimental.authInterrupts,
     StreamingMetadata,
+    StreamingMetadataOutlet,
   })
 
   // When the `vary` response header is present with `Next-URL`, that means there's a chance
@@ -987,9 +998,7 @@ async function getErrorRSCPayload(
   const seedData: CacheNodeSeedData = [
     initialTree[0],
     <html id="__next_error__">
-      <head>
-        <StreamingMetadata />
-      </head>
+      <head>{StreamingMetadata ? <StreamingMetadata /> : null}</head>
       <body>
         {process.env.NODE_ENV !== 'production' && err ? (
           <template
diff --git a/packages/next/src/server/app-render/create-component-tree.tsx b/packages/next/src/server/app-render/create-component-tree.tsx
index 2ac103e657115..6b6ab029fc493 100644
--- a/packages/next/src/server/app-render/create-component-tree.tsx
+++ b/packages/next/src/server/app-render/create-component-tree.tsx
@@ -40,7 +40,8 @@ export function createComponentTree(props: {
   missingSlots?: Set<string>
   preloadCallbacks: PreloadCallbacks
   authInterrupts: boolean
-  StreamingMetadata: React.ComponentType<{}>
+  StreamingMetadata: React.ComponentType<{}> | null
+  StreamingMetadataOutlet: React.ComponentType
 }): Promise<CacheNodeSeedData> {
   return getTracer().trace(
     NextNodeServerSpan.createComponentTree,
@@ -77,6 +78,7 @@ async function createComponentTreeInternal({
   preloadCallbacks,
   authInterrupts,
   StreamingMetadata,
+  StreamingMetadataOutlet,
 }: {
   loaderTree: LoaderTree
   parentParams: Params
@@ -90,7 +92,8 @@ async function createComponentTreeInternal({
   missingSlots?: Set<string>
   preloadCallbacks: PreloadCallbacks
   authInterrupts: boolean
-  StreamingMetadata: React.ComponentType<{}>
+  StreamingMetadata: React.ComponentType<{}> | null
+  StreamingMetadataOutlet: React.ComponentType
 }): Promise<CacheNodeSeedData> {
   const {
     renderOpts: { nextConfigOutput, experimental },
@@ -395,7 +398,9 @@ async function createComponentTreeInternal({
   // Only render metadata on the actual SSR'd segment not the `default` segment,
   // as it's used as a placeholder for navigation.
   const metadata =
-    actualSegment !== DEFAULT_SEGMENT_KEY ? <StreamingMetadata /> : undefined
+    actualSegment !== DEFAULT_SEGMENT_KEY && StreamingMetadata ? (
+      <StreamingMetadata />
+    ) : undefined
 
   const notFoundElement = NotFound ? (
     <>
@@ -517,6 +522,7 @@ async function createComponentTreeInternal({
             preloadCallbacks,
             authInterrupts,
             StreamingMetadata,
+            StreamingMetadataOutlet,
           })
 
           childCacheNodeSeedData = seedData
@@ -578,7 +584,6 @@ async function createComponentTreeInternal({
   }
 
   const Component = MaybeComponent
-
   // If force-dynamic is used and the current render supports postponing, we
   // replace it with a node that will postpone the render. This ensures that the
   // postpone is invoked during the react render phase and not during the next
@@ -705,6 +710,7 @@ async function createComponentTreeInternal({
         <OutletBoundary>
           <MetadataOutlet ready={getViewportReady} />
           <MetadataOutlet ready={getMetadataReady} />
+          <StreamingMetadataOutlet />
         </OutletBoundary>
       </React.Fragment>,
       parallelRouteCacheNodeSeedData,
diff --git a/packages/next/src/server/app-render/metadata-insertion/create-server-inserted-metadata.tsx b/packages/next/src/server/app-render/metadata-insertion/create-server-inserted-metadata.tsx
index 7c4f76a6e3fe5..4f1a66c7f9455 100644
--- a/packages/next/src/server/app-render/metadata-insertion/create-server-inserted-metadata.tsx
+++ b/packages/next/src/server/app-render/metadata-insertion/create-server-inserted-metadata.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react'
+import React from 'react'
 import { renderToReadableStream } from 'react-dom/server.edge'
 import {
   ServerInsertedMetadataContext,
@@ -8,7 +8,7 @@ import { renderToString } from '../render-to-string'
 
 export function createServerInsertedMetadata() {
   let metadataResolver: MetadataResolver | null = null
-  let metadataToFlush: JSX.Element | null = null
+  let metadataToFlush: React.ReactNode = null
   const setMetadataResolver = (resolver: MetadataResolver): void => {
     metadataResolver = resolver
   }
diff --git a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
index 608b249596b26..a8a74cac7cb0c 100644
--- a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
+++ b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx
@@ -41,6 +41,7 @@ export async function walkTreeWithFlightRouterState({
   ctx,
   preloadCallbacks,
   StreamingMetadata,
+  StreamingMetadataOutlet,
 }: {
   loaderTreeToFilter: LoaderTree
   parentParams: { [key: string]: string | string[] }
@@ -55,7 +56,8 @@ export async function walkTreeWithFlightRouterState({
   getViewportReady: () => Promise<void>
   ctx: AppRenderContext
   preloadCallbacks: PreloadCallbacks
-  StreamingMetadata: React.ComponentType<{}>
+  StreamingMetadata: React.ComponentType<{}> | null
+  StreamingMetadataOutlet: React.ComponentType<{}>
 }): Promise<FlightDataPath[]> {
   const {
     renderOpts: { nextFontManifest, experimental },
@@ -205,6 +207,7 @@ export async function walkTreeWithFlightRouterState({
         preloadCallbacks,
         authInterrupts: experimental.authInterrupts,
         StreamingMetadata,
+        StreamingMetadataOutlet,
       }
     )
 
@@ -265,6 +268,7 @@ export async function walkTreeWithFlightRouterState({
       getMetadataReady,
       preloadCallbacks,
       StreamingMetadata,
+      StreamingMetadataOutlet,
     })
 
     for (const subPath of subPaths) {
diff --git a/packages/next/src/shared/lib/server-inserted-metadata.shared-runtime.ts b/packages/next/src/shared/lib/server-inserted-metadata.shared-runtime.ts
index 07c88f8015b85..3ad44c908f22f 100644
--- a/packages/next/src/shared/lib/server-inserted-metadata.shared-runtime.ts
+++ b/packages/next/src/shared/lib/server-inserted-metadata.shared-runtime.ts
@@ -1,8 +1,9 @@
 'use client'
 
-import { type JSX, createContext } from 'react'
+import type React from 'react'
+import { createContext } from 'react'
 
-export type MetadataResolver = () => JSX.Element
+export type MetadataResolver = () => React.ReactNode
 type MetadataResolverSetter = (m: MetadataResolver) => void
 
 export const ServerInsertedMetadataContext =
diff --git a/test/e2e/app-dir/metadata-streaming/app/notfound/page.tsx b/test/e2e/app-dir/metadata-streaming/app/notfound/page.tsx
new file mode 100644
index 0000000000000..6390e6bb069e1
--- /dev/null
+++ b/test/e2e/app-dir/metadata-streaming/app/notfound/page.tsx
@@ -0,0 +1,14 @@
+import { connection } from 'next/server'
+import { notFound } from 'next/navigation'
+
+export default function Page() {
+  return <p>notfound page</p>
+}
+
+export async function generateMetadata() {
+  await connection()
+  await new Promise((resolve) => setTimeout(resolve, 2 * 1000))
+  notFound()
+}
+
+export const dynamic = 'force-dynamic'
diff --git a/test/e2e/app-dir/metadata-streaming/app/page.tsx b/test/e2e/app-dir/metadata-streaming/app/page.tsx
index 3cdf2cf1f283b..101b2d74bd0d5 100644
--- a/test/e2e/app-dir/metadata-streaming/app/page.tsx
+++ b/test/e2e/app-dir/metadata-streaming/app/page.tsx
@@ -1,5 +1,5 @@
 export default function Page() {
-  return <p>index</p>
+  return <p>index page</p>
 }
 
 export async function generateMetadata() {
diff --git a/test/e2e/app-dir/metadata-streaming/app/redirect/page.tsx b/test/e2e/app-dir/metadata-streaming/app/redirect/page.tsx
new file mode 100644
index 0000000000000..717db3ee63af1
--- /dev/null
+++ b/test/e2e/app-dir/metadata-streaming/app/redirect/page.tsx
@@ -0,0 +1,14 @@
+import { connection } from 'next/server'
+import { redirect } from 'next/navigation'
+
+export default function Page() {
+  return <p>redirect page</p>
+}
+
+export async function generateMetadata() {
+  await connection()
+  await new Promise((resolve) => setTimeout(resolve, 2 * 1000))
+  redirect('/')
+}
+
+export const dynamic = 'force-dynamic'
diff --git a/test/e2e/app-dir/metadata-streaming/metadata-streaming.test.ts b/test/e2e/app-dir/metadata-streaming/metadata-streaming.test.ts
index 9e8d12b9313fa..ed14bdbe9a554 100644
--- a/test/e2e/app-dir/metadata-streaming/metadata-streaming.test.ts
+++ b/test/e2e/app-dir/metadata-streaming/metadata-streaming.test.ts
@@ -104,4 +104,40 @@ describe('app-dir - metadata-streaming', () => {
       })
     })
   })
+
+  describe('navigation API', () => {
+    it('should trigger not-found boundary when call notFound', async () => {
+      const browser = await next.browser('/notfound')
+
+      // Show 404 page
+      await retry(async () => {
+        expect(await browser.elementByCss('h1').text()).toBe('404')
+      })
+    })
+
+    it('should trigger redirection when call redirect', async () => {
+      const browser = await next.browser('/redirect')
+      // Redirect to home page
+      expect(await browser.elementByCss('p').text()).toBe('index page')
+    })
+
+    it('should render blocking 404 response status when html limited bots access notFound', async () => {
+      const { status } = await next.fetch('/notfound', {
+        headers: {
+          'user-agent': 'Twitterbot',
+        },
+      })
+      expect(status).toBe(404)
+    })
+
+    it('should render blocking 307 response status when html limited bots access redirect', async () => {
+      const { status } = await next.fetch('/redirect', {
+        headers: {
+          'user-agent': 'Twitterbot',
+        },
+        redirect: 'manual',
+      })
+      expect(status).toBe(307)
+    })
+  })
 })