Add `app/` directory support for custom title in Error page #45620

Josehower · 2023-02-06T16:06:29Z

Describe the feature you'd like to request

I would like to have the possibility to control the page title, description etc. in the error and not-found page.

currently Its possible to get around not-found page by creating a conditional in metadata function for the not-found page but is still not nice.

Describe the solution you'd like

I would like not-found.js and error.js accept metadata and generateMetadata() similar to page.js and layout.js

// app/entity/[entityId]/not-found.js

export async function generateMetadata(props) {
  return {
      title: `entity ${props.params.entityId} not found`,
      description: `There is no entity with id: ${props.params.entityId}`
    }
}

export default function EntityNotFound() {
  return <div>Sorry this Entity was not found</div>;
}

// app/error.js

export const metadata = {
      title: "Error",
      description: "ups something went wrong"
    }

export default function Error() {
  return <div>Sorry this Entity was not found</div>;
}

Describe alternatives you've considered

for not-found, maybe allow to pass the metadata object as an argument for the function

export default async function AnimalPage(props) {
  const singleEntity = await getAnimalById(props.params.entityId);

  if (!singleEntity) {
    
    const metadata = {
      title: `entity ${props.params.entityId} not found`,
      description: `There is no entity with id: ${props.params.entityId}`
    }
    notFound(metadata);
  }

return <>
... rest of the component

}

The text was updated successfully, but these errors were encountered:

karlhorky · 2023-03-29T15:57:23Z

Interesting, seems like Shu was able to get a document.title on this example page

This was part of this PR:

Extend not-found.js to catch all unmatched routes #47328

Not sure how this was achieved, I've asked over here:

Extend not-found.js to catch all unmatched routes #47328 (comment)

karlhorky · 2023-03-29T16:18:47Z

I was actually having a different problem to this one just now - the metadata from the root layout is also not currently (as of next@13.2.5-canary.20) applied to not-found.tsx 404 pages (maybe also error.tsx?) 😯

StackBlitz: https://stackblitz.com/edit/vercel-next-js-znhsus?file=app%2Flayout.tsx&file=app%2Fnot-found.tsx&file=package-lock.json

karlhorky · 2023-03-29T16:35:22Z

Workaround (`<title>` element)

I guess for a static title, this hack can be used with the App Router (doesn't result in a hydration error, interestingly enough):

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      {/*
        No support for metadata in not-found.tsx yet
        https://github.com/vercel/next.js/pull/47328#issuecomment-1488891093
      */}
      <title>Not Found | example.com</title>
    </div>
  );
}

Maybe this is what it will look like in the future once React Float more fully lands...

Or @gnoff @sebmarkbage should this already work now with the current state of React Float + Next.js? Was really surprised by lack of hydration error in both dev and production 🤔

Update Feb 2024: Maybe this is actually the new Document Metadata feature mentioned in the React Labs Feb 2024 "What We've Been Working On" blog post:

Document Metadata: we added built-in support for rendering <title>, <meta>, and metadata <link> tags anywhere in your component tree. These work the same way in all environments, including fully client-side code, SSR, and RSC. This provides built-in support for features pioneered by libraries like React Helmet.

huozhi · 2023-04-02T08:58:56Z

We're thinking to support it but might only support metadata as you could keep use notFound() use inside generateMetadata() which could cause more issues

karlhorky · 2023-04-02T09:27:02Z

but might only support metadata as you could keep use notFound() use inside generateMetadata() which could cause more issues

Oh too bad, so no way to generate dynamic titles / descriptions based on the requested content 🙁

Maybe there would still be some ways to support generateMetadata() eg:

If notFound() used within generateMetadata() in not-found.tsx / error.tsx, throw an error
Also include a lint rule to warn users before it happens

huozhi · 2023-04-02T09:31:02Z

@karlhorky error checking is possible to be added there to avoid using notFound in error/not-found page convention. Just curious, mind sharing the dynamic title/description case for your not-found page?

karlhorky · 2023-04-02T12:00:58Z

Sure, I was thinking of something kind of similar to the one in the issue description:

// app/animals/[animalId]/not-found.js

export async function generateMetadata(props) {
  return {
    title: `Animal id ${props.params.animalId} not found`,
    description: `There is no animal with id "${props.params.animalId}"`,
  };
}

export default function AnimalNotFound(props) {
  return <div>Sorry, an animal with id "{props.params.animalId}" was not found</div>;
}

huozhi · 2023-04-02T13:37:20Z

I see, dynamic routes with params makes sense. We'll think of support for that case

jahirfiquitiva · 2023-04-13T22:28:39Z

I'm also hoping this feature is added soon. We were able to do this in the pages directory using <Head>, so it'd be nice to have it with the app directory too 😄

lindesvard · 2023-04-17T13:35:38Z

Would love this feature as well. Running a i18n site with this folder structure -> [locale]/not-found.tsx

I want to be able to get the locale param so we can fetch correct translations for not-found page.

tobobo · 2023-04-29T21:20:03Z

A related issue I don't see mentioned here is that without metadata in error pages, the viewport meta tag is missing and mobile layouts are broken.

bitfrost · 2023-05-03T01:01:09Z

I have something working for me. I determine if I am in a 404 state in
generateMetadata
for a route like. [blah]/page.tsx and return something like { title: 'Not Found' }
in [blah]/not-found.tsx I just have the error markup. The meta data from page.tsx is present when I get my 404 hit I get the metadata set in page.tsx + added by the notFound() call. (notFound() is called in page.tsx's component tree, not in generateMetadata of [blah]/page.tsx

bacvietswiss · 2023-05-19T10:48:08Z

Currently, I need to manually add <meta name="viewport" content="width=device-width, initial-scale=1" ></meta> into the not found page in order to make it responsive

leonbe02 · 2023-05-19T20:44:53Z

@huozhi Any ETA on when params support will be added to the not-found.js page? I find it hard to believe that Next doesn't support localized 404 pages out of the box, that seems like a pretty important feature.

huozhi · 2023-05-20T13:01:57Z

Currently, I need to manually add <meta name="viewport" content="width=device-width, initial-scale=1" ></meta> into the not found page in order to make it responsive

@bacvietswiss that issue is fixed in #50044

huozhi · 2023-05-20T13:03:02Z

@leonbe02 Can you file another issue about that as the original issue here is related to metadata support

leonbe02 · 2023-05-22T16:37:32Z

@leonbe02 Can you file another issue about that as the original issue here is related to metadata support

I found an existing ticket that outlines the issue: #48763

itsjavi · 2023-07-09T18:02:58Z

@MuhammadMinhaj nice, but the workaround still doesn't solve de problem for the catch-all unmatched routes

p00000001 · 2023-07-09T18:16:27Z

@itsjavi One possible workaround for that is similar to #48763 (comment)

...you can use a catch all route and put a page.js under it, and then populate generateMetadata.

A possibly simpler interim solution to keep everything in not-found.js may be to just update the title in the client side DOM e.g.

useEffect(() => document.title = "Page Not Found")

...as I suppose for error pages other meta tags are probably less important and don't really need SSR support.

However, I agree with this issue that error pages should have their own generateMetadata method, as it would be a cleaner and more consistent.

huozhi · 2023-07-14T12:49:14Z

Did some research around metadata support for not-found and error convention. It's possible to support in not-found when it's server components as currently metadata is only available but for error it has to be client components then it's hard to support it there as it's a boundary. To support that it requires more changes in next.js to make them possible.

### What? Support metadata exports for `not-found.js` conventions ### Why? We want to define metadata such as title or description basic properties for error pages, including 404 and 500 which referrs to `error.js` and `not-found.js` convention. See more requests in #45620 Did some research around metadata support for not-found and error convention. It's possible to support in `not-found.js` when it's server components as currently metadata is only available but for `error.js` it has to be client components for now so it's hard to support it for now as it's a boundary. ### How? We determine the convention if we're going to render is page or `not-found` boundary then we traverse the loader tree based on the convention type. One special case is for redirection the temporary metadata is not generated yet, we leave it as default now. Fixes #52636

levipadre · 2023-09-01T15:49:18Z

Should generateMetadata work in not-found file then? I'm testing in v13.4.19 and it's nothing.

DennieMello · 2023-09-14T21:14:10Z

Should generateMetadata work in not-found file then? I'm testing in v13.4.19 and it's nothing.

It only doesn’t work during development, if you make a build, the metadata is displayed correctly. I also noticed that if you specify robots, it is duplicated on the page 2 times. Initially, next adds robots to the page with the value noindex.

pfurini · 2023-10-31T15:06:19Z

Should generateMetadata work in not-found file then? I'm testing in v13.4.19 and it's nothing.

It only doesn’t work during development, if you make a build, the metadata is displayed correctly. I also noticed that if you specify robots, it is duplicated on the page 2 times. Initially, next adds robots to the page with the value noindex.

Nope.. at least for me, I'm testing 14.0 and my issue is still there.
I have title and description defined statically in a parent layout file, and then in a child route an error file that simply tries to redefine them statically.
When the error page loads, it shows for a fraction of second the correct metadata, and then it reverts back to the layout (parent) one. This happens in both dev and prod builds..
I agree that Next has a ton of weird issues in apparently basic features, it makes me miss the good old client-server model...

Super-Kenil · 2023-11-27T12:22:25Z

Just like @karlhorky mentioned

<div>
      <title>Not Found</title>
  </div>

works. But I am using template

export const metadata: Metadata = {
  title: {
    template: '%s | My Website Name',
    default: 'My Website Name'
  }

So for someone like me, I had to write the below code

<div>
      <title>Not Found | My Website Name</title>
  </div>

The <title> in my not-found.tsx replaces my template's fallback Title as well. I know its obvious, but I just wanted to let ya'll know

marcelhageman · 2024-01-17T00:15:08Z

Next.js 14.0.4 using App Router and not-found.tsx:

export const metadata = {
  title: 'Page not found',
  description: 'This page could not be found',
};

It works when I load the page, briefly, but the page.tsx in the same folder overwrites the title immediately.

Tested in developer-mode. Obviously, that should not happen.

Reading the docs: https://nextjs.org/docs/app/building-your-application/optimizing/metadata

...also doesn't clear up the issue. Pages like not-found.tsx aren't part of the hierarchy, I suppose.

marcelhageman · 2024-01-17T10:51:39Z

Meanwhile, to solve the issue of page titles on 404-pages, assuming you have:

/[id]
- /page.tsx
- /not-found.tsx

Then your not-found metadata currently cannot come from your not-found.tsx file, instead, you are to put it into your page.tsx file:

type Params = {
  id: string;
};

const metadata: Metadata = {
  title: 'My page',
  description: 'Viewing a single page',
};

export async function generateMetadata({
  params,
}: {
  params: Params;
}): Promise<Metadata> {
  const exists = await pageExists(Number(params.id));
  if (!exists) {
    return {
      title: 'Page not found',
      description: 'This page could not be found.',
    };
  }
  return metadata;
}

export default async function Page({ params }: { params: Params }) {
  const exists = await pageExists(Number(params.id));

  if (!exists) {
    notFound();
  }

  return (
    <p>
      Your page goes here.
    </p>
  );
}

My issue with this is that I want the not-found page to be exclusively responsible for deciding how a 404-situation would look and feel. Now I need to make two files responsible for it, and I even need to do pageExists in both the page component and the generateMetadata function.

But at least it works :)

trevorblades · 2024-05-16T17:46:38Z

It works when I load the page, briefly, but the page.tsx in the same folder overwrites the title immediately.

I'm running into this issue now too, and it feels very unintuitive. I'd expect that when I call notFound() in a page, it's a signal to Next that this page should appear as nonexistent, and the entirety of my not-found.tsx route should render, metadata included.

Having the underlying page title show up breaks that experience. Suppose I have a dynamic page that fetches some resource and checks to see if the current user should be able to view it. If they shouldn't, then I want to tell them that the resource doesn't exist by rendering our 404 page.

If the name of the resource shows up in the page title, it feels like a leaking of information that the current user shouldn't have access to. Of course, I can do the additional check in the page's generateMetadata function as @marcelhageman suggests above, but that's definitely a hacky workaround to this unexpected behaviour.

Edit: I figured out that I can get the not-found.tsx UI and metadata to render correctly by calling notFound() from within my generateMetadata function.

export const generateMetadata = async ({ params }: { params: id }): Promise<Metadata> => {
  const thing = await getThing();
  
  if (!thing) {
    notFound();
  }
  
  const { user } = await getCurrentUser();
  
  if (!user || !hasAccess(user, thing)) {
    notFound();
  }
  
  return {
    title: `Custom title for ${thing.name}`
  }
}

However this also feels like a hack and unexpected behaviour. Just wanted to mention this here in case others need a workaround while this issue is being addressed.

mobeigi · 2024-09-19T11:30:34Z

This is my usecase and some notes on it:

I have:
/app/not-found.tsx
/app/blog/[...slug]/page.tsx

When visiting:
http://localhost:3000/blog/non-existant-page

The /app/blog/[...slug]/page.tsx route fires as expected.

/app/blog/[...slug]/page.tsx

export const generateMetadata = async ({ params }: { params: { slug: string[] } }): Promise<Metadata> => {
  const post = await getPostFromParams({ params });
  if (!post) {
    console.warn('Failed to find post during generateMetadata.');
    return {
      title: 'fallback';
    };
  }
 return {
   title: 'Blog!';
 } 
}

const BlogPostHandler = async ({ params }: { params: { slug: string[] } }) => {
  const post = await getPostFromParams({ params });
  if (!post) {
    notFound();
    return null;
  }
  //other logic
}

not-found.tsx:

import NotFoundPage from '@/containers/NotFoundPage';
import { Metadata } from 'next';

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

const NotFound = () => <NotFoundPage />;

export default NotFound;

The behaviour I observe is:

title is originally Not Found which is the root layouts title (this is also what is present in the initial HTML)
the title is then fallback which is what the page.tsx resolves to.

Now if both your page.tsx and not-found.tsx page have the same meta data (i.e. static metadata object you return in both for the not found case) then this works pretty well. If not, there will be a change from either the layout meta data or not-found.tsx metadata to whatever the page.tsx metadata is.

PS: You should probably use notFound() from inside the generateMetadata.

It would be nice if we could export metadata as null or return null for generateMetadata to tell next to not use this metadata and fallback to the previously available meta data.

ArtemGrachov · 2024-10-12T09:28:39Z

Is it possible to set metadata for error.tsx file on SSR? I cannot find any information, generateMetadata function also does not work for client components (error.tsx forced to be client component).

Super-Kenil · 2024-10-12T18:36:44Z

Is it possible to set metadata for error.tsx file on SSR? I cannot find any information, generateMetadata function also does not work for client components (error.tsx forced to be client component).

error.tsx is client only page, for now, there's no possible way to set metadata or even use generateMetaData to error.tsx page

But you can use a hack like this

ArtemGrachov · 2024-10-14T07:38:30Z

@Super-Kenil Thanks for reply
My goal was to keep at least default meta tags for error page in case if it is exposed to search engines. However, I noticed that error page has meta robots tag with "noindex" value, so the problem itself seems not actual from the beginning.

It is logical that page with error must not be indexed, but still it is strange that there is no way to handle error page's meta tags on server side. All depends on project needs, it is not ok to just to remove such possibility at all.

Jaynarol · 2024-12-06T14:16:28Z

Here's my workaround for the Next.js metadata issue in not-found.tsx (App Router):
Instead of setting metadata directly in not-found.tsx, handle it in the dynamic route's generateMetadata. This way, the metadata will be set correctly before notFound() is called.

export async function generateMetadata({ params }) {
  const data = await checkIfExists(params.id)
  
  if (!data) {
    return {
      title: '404 - Not Found',
      description: 'This page could not be found'
    }
  }

  return {
    title: `Page: ${data.title}`,
    description: data.description
  }
}

export default async function Page({ params }) {
  const data = await checkIfExists(params.id)
  
  if (!data) {
    notFound()
  }

  return <div>...</div>
}

This approach works because:

generateMetadata runs before the page component
We can set 404 metadata when data is not found
The metadata persists even after notFound() redirects to not-found.tsx
It's cleaner than client-side hacks or complex workarounds

Hope this helps others who are facing the same issue! 🙌

jonathanhefner · 2024-12-10T20:33:56Z

I think this can be handled by React v19's support for document metadata. But you would need to update all pages to use that mechanism instead of generateMetadata; otherwise, it may create duplicate tags in <head>.

darthmaim · 2024-12-10T20:41:46Z

I think this can be handled by React v19's support for document metadata.

Some of it can, sure, but Next.js metadata offers way more features (metadata base, title templates, setting title will also set og:title and twitter:title, ...)

karlhorky · 2024-12-23T16:16:52Z

@huozhi am I correct in assuming this missing metadata feature also applies to the new forbidden.tsx and unauthorized.tsx files in Next.js 15.1?

I guess the current workaround is still the <title> element workaround?

cc @gnoff , in case your work with Float has anything to do with this.

wu0407 · 2025-01-31T15:40:10Z

I think this PR not full fixed, #52678

scottlet · 2025-04-25T07:13:23Z

Just hit an issue with this - we upgraded from Next 14 to Next 15 and the workarounds above no longer seem to work.

If metadata is specified in the not-found file it briefly flashes in the browser title and then vanishes in dev mode.

Tried calling notFound() before the return in my route generateMetadata function but that leads to TS complaining about unreachable code. It also doesn’t seem to have any effect.

Adding <title> into the document works but doesn’t server render a title.

At a loss as to what to do now.

MaximProger · 2025-04-28T14:37:27Z

Just hit an issue with this - we upgraded from Next 14 to Next 15 and the workarounds above no longer seem to work.

If metadata is specified in the not-found file it briefly flashes in the browser title and then vanishes in dev mode.

Tried calling notFound() before the return in my route generateMetadata function but that leads to TS complaining about unreachable code. It also doesn’t seem to have any effect.

Adding <title> into the document works but doesn’t server render a title.

At a loss as to what to do now.

I have the exact same problem. I feel stumped. I don't know what to do.

Except for the header no Metadata is substituted at all. Including favicon and other tags.

Josehower added the template: story label Feb 6, 2023

Josehower changed the title ~~Add app/dir support for custom title in Error page~~ Add app/ directory support for custom title in Error page Feb 6, 2023

Josehower changed the title ~~Add app/ directory support for custom title in Error page~~ Add app/ directory support for custom title in Error page Feb 6, 2023

This was referenced Mar 29, 2023

notFound(); not working with head.js in same folder #45385

Open

Extend not-found.js to catch all unmatched routes #47328

Merged

karlhorky mentioned this issue Mar 29, 2023

NotFound not working with Metadata #46619

Closed

1 task

huozhi self-assigned this Apr 2, 2023

huozhi added kind: story Metadata Related to Next.js' Metadata API. and removed template: story labels Apr 2, 2023

darthmaim mentioned this issue May 1, 2023

Metadata is not working at all in /not-found.tsx (App directory) #49030

Closed

1 task

ReoHakase mentioned this issue May 1, 2023

404ページ/not-found.tsxを作成する astronomy-club-at-nitic/nitic-astronomy#125

Open

shuding mentioned this issue Jun 3, 2023

not-found.js doesn't read metadata #50566

Closed

1 task

MuhammadMinhaj mentioned this issue Jul 9, 2023

not found doesn't catch after dynamic param #48763

Closed

1 task

huozhi mentioned this issue Jul 14, 2023

Support metadata exports for server components not-found #52678

Merged

fredrbus mentioned this issue Nov 30, 2023

feat(app router): migrated board entur/tavla#1350

Merged

jrjake mentioned this issue Aug 3, 2024

notFound() wrong Metadata after hydration #68392

Closed

This comment has been minimized.

Sign in to view

amannn mentioned this issue Jan 9, 2025

custom metadata not working in not-found page amannn/next-intl#1647

Closed

3 tasks

samcx added the Error Handling Related to handling errors (e.g., error.tsx, global-error.tsx). label Jan 29, 2025

amannn mentioned this issue Apr 2, 2025

Metadata is not rendered in not-found.js page amannn/next-intl#1822

Closed

3 tasks

Add app/ directory support for custom title in Error page #45620

Add app/ directory support for custom title in Error page #45620

Comments

Josehower commented Feb 6, 2023 • edited by timneutkens Loading

Describe the feature you'd like to request

Describe the solution you'd like

Describe alternatives you've considered

karlhorky commented Mar 29, 2023

karlhorky commented Mar 29, 2023 • edited Loading

karlhorky commented Mar 29, 2023 • edited Loading

Workaround (<title> element)

huozhi commented Apr 2, 2023

karlhorky commented Apr 2, 2023 • edited Loading

huozhi commented Apr 2, 2023

karlhorky commented Apr 2, 2023 • edited Loading

huozhi commented Apr 2, 2023

jahirfiquitiva commented Apr 13, 2023

lindesvard commented Apr 17, 2023

tobobo commented Apr 29, 2023

bitfrost commented May 3, 2023

bacvietswiss commented May 19, 2023

leonbe02 commented May 19, 2023

huozhi commented May 20, 2023

huozhi commented May 20, 2023

leonbe02 commented May 22, 2023

itsjavi commented Jul 9, 2023

p00000001 commented Jul 9, 2023 • edited Loading

huozhi commented Jul 14, 2023

levipadre commented Sep 1, 2023 • edited Loading

DennieMello commented Sep 14, 2023 • edited Loading

pfurini commented Oct 31, 2023 • edited Loading

Super-Kenil commented Nov 27, 2023 • edited Loading

marcelhageman commented Jan 17, 2024

marcelhageman commented Jan 17, 2024

trevorblades commented May 16, 2024 • edited Loading

This comment has been minimized.

mobeigi commented Sep 19, 2024 • edited Loading

ArtemGrachov commented Oct 12, 2024

Super-Kenil commented Oct 12, 2024

ArtemGrachov commented Oct 14, 2024

Jaynarol commented Dec 6, 2024 • edited Loading

jonathanhefner commented Dec 10, 2024 • edited Loading

darthmaim commented Dec 10, 2024

karlhorky commented Dec 23, 2024 • edited Loading

wu0407 commented Jan 31, 2025

scottlet commented Apr 25, 2025 • edited Loading

MaximProger commented Apr 28, 2025 • edited Loading

Add `app/` directory support for custom title in Error page #45620

Add `app/` directory support for custom title in Error page #45620

Josehower commented Feb 6, 2023 •

edited by timneutkens

Loading

karlhorky commented Mar 29, 2023 •

edited

Loading

karlhorky commented Mar 29, 2023 •

edited

Loading

Workaround (`<title>` element)

karlhorky commented Apr 2, 2023 •

edited

Loading

karlhorky commented Apr 2, 2023 •

edited

Loading

p00000001 commented Jul 9, 2023 •

edited

Loading

levipadre commented Sep 1, 2023 •

edited

Loading

DennieMello commented Sep 14, 2023 •

edited

Loading

pfurini commented Oct 31, 2023 •

edited

Loading

Super-Kenil commented Nov 27, 2023 •

edited

Loading

trevorblades commented May 16, 2024 •

edited

Loading

mobeigi commented Sep 19, 2024 •

edited

Loading

Jaynarol commented Dec 6, 2024 •

edited

Loading

jonathanhefner commented Dec 10, 2024 •

edited

Loading

karlhorky commented Dec 23, 2024 •

edited

Loading

scottlet commented Apr 25, 2025 •

edited

Loading

MaximProger commented Apr 28, 2025 •

edited

Loading