Next.js metadata vs React 19 title and meta components

[vladshcherbin]

What to use and when, what is recommended? It would also be nice to have some note about this in the docs.

Refs:

• https://nextjs.org/docs/app/building-your-application/optimizing/metadata
• https://react.dev/reference/react-dom/components/title
• https://react.dev/reference/react-dom/components/meta

[icyJoseph]

Well... guess what! Next.js uses those internally. At least from looking at:

• https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/metadata/generate/basic.tsx#L49

  return MetaFilter([
    metadata.title !== null && metadata.title.absolute ? (
      <title>{metadata.title.absolute}</title>
    ) : null, /* rest of implementation */

or

export function ViewportMeta({ viewport }: { viewport: ResolvedViewport }) {
  return MetaFilter([
    <meta charSet="utf-8" />,
    Meta({ name: 'viewport', content: resolveViewportLayout(viewport) }), /* rest of impl */

Not just that function but all of the functions ultimately used at:

• https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/metadata/metadata.tsx#L341

Which in turn is invoked by: https://github.com/vercel/next.js/blob/f140b2df6e4694fa0c12bf26261b06b0808ae8f8/packages/next/src/lib/metadata/metadata.tsx#L283C16-L283C30

And yada yada, yeah the metadata collected from the object exports, or generateMetadata calls, is ultimately used to create meta, title and other tags.

So the Next.js set of utility functions, is an API to utilise these new React APIs, like, you focus on describing the metadata, and have it centralised at layout, or page file, level, rather than sprinkled all over the place.

[vladshcherbin]

@icyJoseph okay, what about the use with client components?

If I use nextjs metadata in a page component with use client directive, I get error:

export const metadata: Metadata = {
  title: 'Log in'
}

If I simply use react <title> tag, I get no errors and the page title is set:

<title>Log in</title>

Seems like they don't work the same 🤔

[icyJoseph]

Exactly. The metadata from Next.js is their API, that does a whole bunch of checks and aggregations, that have to happens within a Server Component, which, at the end, uses the <title> tag. It is a more constrained API to keep things under control, so to speak.

[vladshcherbin]

@icyJoseph that's the question, what are the pros/cons of using metadata or native react components?

I understand that metadata was a nice way of setting title, etc when there was no <title> and <meta> components in react. Now that they were added, why wouldn't I just use them instead of metadata.

To me, the part that I can't add use client to the whole page (react doesn't restrict this) and have to extract client components just to add a title via metadata is certainly a drawback.

[icyJoseph]

What I am trying to say here is that, you can just use the React APIs directly, because, Next.js implemented their metadata API, around them. It's just that their metadata API needs a server/build runtime, to generate the tags. And it has their benefits of you passing the metadata as objects, rather than having to map it all to JSX yourself. You can make API calls, to backend services, and hide that from the client, yada yada, introducing a layer of separation between what'll go in the body, and what stays in the head.

Next.js has been using React canary, where these API existed, for a very long time. So if using title directly, fits your use case, you might as well go for it. In other situations, you might benefit from the declarative metadata API, etc, in other cases the metadata API might not have all meta tags you want, etc...

[vladshcherbin]

@icyJoseph that's what I would like to see in the docs to confirm using pure title and meta tags is not considered as bad practice in next.js projects 🙌

[icyJoseph]

This bad/best practice focus, is not the right approach, I believe anyway. This gets a bit more complex, into the discussion of where Next.js' responsibility of documentation and patterns starts, versus where does the React core knowledge end, and on top of that whether or not we are correctly adopting server components... But good that some stuff was clarified at least :)

[icyJoseph]

A small update, Lee Rob sort of mentioned this on a reddit thread: https://www.reddit.com/r/nextjs/s/lXJM6sC1i0

[vladshcherbin]

@icyJoseph thank you for this update!