Next.js removes meta title on 404 page.

[kalininmax]

Summary

When I try to open a page that doesn't exist, I redirected to a 404 page. It works, I see my NotFound component.
But. At first, I see the meta title 'Page Not Found' that I set for it. But after 1 second, it disappears, Next.js removes it from the DOM. In the end, the browser tab shows the URL where the title should be.

Additional information

I have custom Not Found page (src/app/not-found.jsx):

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

const Page = async () => {
  const siteData = await fetchRoute(ApiRoutes.GLOBALS);

  return <NotFound {...siteData.notFound} />;
};

export default Page;

next info output:

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32510
  Available CPU cores: 12
Binaries:
  Node: 22.16.0
  npm: 11.4.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.2 // There is a newer version (15.4.2) available, upgrade recommended!
  eslint-config-next: 14.2.30
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.3
Next.js Config:
  output: N/A
 ⚠ There is a newer version (15.4.2) available, upgrade recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

[Bhaathii]

Hi! 👋 I ran into a similar issue with custom not-found.jsx pages and metadata in Next.js App Router.

It sounds like:

You’re using a custom NotFound component.

You set a title in metadata, but it briefly appears, then disappears after render.

This seems to be a known limitation or bug in how Next.js handles metadata on error and not-found routes.

🛠️ Possible Solutions / Workarounds:
✅ 1. Use a <title> Tag Manually Inside the NotFound Component
Since the built-in metadata isn’t sticking on dynamic error pages, use the <title> tag inside your component:

tsx
Copy
Edit
import Head from 'next/head';

const NotFound = (props) => (
<>

<title>Page Not Found</title>

404 – Page Not Found

{/* Your not found content */}

</>
);

export default NotFound;
This ensures the browser title doesn’t disappear.

✅ 2. Upgrade Next.js Version
You're on Next.js 15.3.2, but the latest is 15.4.2, and some bugs with metadata handling (especially not-found.tsx and layout errors) were patched.

Run:

bash
Copy
Edit
npm install next@latest
Then test again.

✅ 3. Use generateMetadata() for More Control
If your not-found.jsx needs dynamic props or async fetches, try this:

tsx
Copy
Edit
export async function generateMetadata() {
return {
title: 'Page Not Found',
};
}

const Page = async () => {
const siteData = await fetchRoute(ApiRoutes.GLOBALS);
return <NotFound {...siteData.notFound} />;
};

export default Page;
This can override layout-level metadata issues.

[myselfaryan]

Root Cause

• Your not-found.jsx is fetching data (fetchRoute)
• Next.js re-renders the page after data loads
• This re-render accidentally removes the metadata title

Solutions

Option 1: Move Data Fetching

// src/app/not-found.jsx
export const metadata = {
  title: 'Page Not Found',
};

// Fetch data HERE (not inside Page component)
const siteData = await fetchRoute(ApiRoutes.GLOBALS);

const Page = () => {
  return <NotFound {...siteData.notFound} />;
};

export default Page;