Next.js: Ordering and Merging Metadata

Next.js: Ordering and Merging Metadata

ยท

2 min read


While putting some finishing touches on my blog, I realized I had not spent much time thinking about metadata. Sure, I had the basic title, description and keywords fields, but maybe I needed more. After reviewing standard metadata names, I decided to add the applicationName, authors, generator, referrer, creator and publisher fields as well.

My root layout file for the blog contains static metadata like this:

export const metadata: Metadata = {
  title: {
    template: '%s | Dave Gray',
    default: "Dave Gray Teaches Code",
  },
  description: "Hello, I'm Dave. ๐Ÿ‘‹ I teach coding and web development skills.",
  applicationName: "Dave Gray's Blog",
  authors: [{ name: "Dave Gray" }],
  generator: 'Next.js',
  keywords: ['dave gray', 'code', 'web development', 'javascript', 'react', 'node.js', 'next.js', 'web dev', 'html', 'css', 'python'],
  referrer: 'origin-when-cross-origin',
  creator: 'Dave Gray',
  publisher: 'Dave Gray',
}

And my dynamic post pages generate specific metadata from the MDX files they receive like this:

export async function generateMetadata({ params: { postId } }: Props) {

    const post = await getPostByName(`${postId}.mdx`)

    if (!post) {
        return {
            title: 'Post Not Found'
        }
    }

    const { meta } = post

    return {
        title: meta.title,
        description: meta.description,
        keywords: [...meta.tags],
    }
}

At this point, I began to wonder if I needed to add the other metadata fields to my dynamically generated post pages...

I referenced the Next.js docs and was glad to see Next.js supports Metadata Ordering and Metadata Merging.

Next.js follows an evaluation order for metadata beginning with the root layout, followed by nested layouts and finally, evaluating any specific page file.

Following the evaluation order, exported Metadata objects are then shallowly merged together. This means the static Metadata fields I provided in my root layout do not need to be duplicated in my blog post page files. The Metadata is merged and still represented in each generated page. Any field I provide in the page file will overwrite the same field from the parent layout file or files, too.

Nice!

With the basic Metadata conquered, I then realized I need to dive-in and learn about more Metadata I can provide including (but not limited to):

  • openGraph

  • icons

  • alternates

As I learn more about these other Metadata types and add them to my blog site, I'll be sure to share what I learn about them here, too.


Let's Connect!

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave