Inline page metadata overwritten by layout metadata

[Netail]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/repro-next-layout-metadata-hxmpxr

To Reproduce

1. Have a fallback metadata set in your layout
2. Set custom inline metadata using React 19's metadata hoisting
3. Visit the root page directly (the title says "Metadata: Root Layout" instead of "Metadata: Page")
4. Navigate to test page & back using the link, now the title is correctly set

Current vs. Expected behavior

The inline metadata, which get hoisted by react (since React 19), gets overwritten by the static metadata from the layout.

This only happens on an initial page visit (but impacts SEO), when routing between pages the metadata is correctly set

As the page metadata is lower in the hierarchy that the layout metadata, I would expect to have the page metadata to have priority over the layout metadata

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:16 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.2.4 // Latest available version is detected (15.2.4) 
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

No response

[lakshaykhokhar2003]

Solution & Fix Implemented

Instead of relying on inline metadata hoisting, I moved metadata definitions into Next.js’s metadata API, ensuring correct behavior across both initial load and navigation.

/page.tsx

import HomePage from "@/components/home-page";

export const metadata = {
    title: 'Metadata: Page',
};

export default function Page() {
    return <HomePage />;
}

/components/home-page.tsx

"use client"`
import Link from "next/link"
const HomePage = () =>{
    return (
        <>
         <h1>Page</h1>
         <Link href='/test'>To Test Page</Link>
        </>
    )
}

export default HomePage;

/test/page.tsx

export const metadata = {
    title: 'Metadata: Test Page',
};

export default function Page() {
    return (
        <>
            <h1>Test Page</h1>
            <Link href='/'>To Page</Link>
        </>
    );

• I switched to Next.js’s metadata API to make sure the <title> is set correctly on both the initial server render (SSR) and client-side navigation (CSR).
• This prevents the fallback layout metadata from overriding the page-specific `metadata.

[Netail]

Yeah we switched to generateMetadata for now, but just something I noticed 😅, maybe the NextJS can think of a fix :)

But the metadata in our case comes from the cms, so it was easier to use inline metadata in the page component, rather than generateMetadata which then also has to fetch the data (we did wrap the fetching function with react's cache()).