How to work with metadata in NextJS?

You know that metadata is critical to SEO, social sharing, and the overall user experience. Next.js, a popular React framework, provides a powerful and flexible way to manage metadata for your web applications. In this article, we'll take a dive into working with metadata in Next.js, covering both static and dynamic approaches.

Static metadata: The basics

Let's start with the basics. Next.js allows you to define static metadata for your pages using the metadata export. Here's a simple example:

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Page',
  description: 'My homepage description',
}

This code defines a static title and description for your page. It's simple and perfect for pages with constant metadata.

Using metadata templates

Next.js also supports metadata templates, which are particularly useful for maintaining a consistent structure across your site while allowing for page-specific variations. Here's how to set up a template:

export const metadata: Metadata = {
  title: {
    template: '%s || My Page',
    default: 'My Page',
  },
  description: 'My subpage description',
}

In this example, %s acts as a placeholder that will be replaced by page-specific titles. The default value is used if no specific title is provided.

Inheriting and overriding metadata

Child pages can inherit metadata from their parents. For example, in a subpage:

export const metadata: Metadata = {
  title: 'Subpage',
}

This will result in the title "Subpage || My Page", combining the specific title of the subpage with the template defined in the parent page.
If you need to completely override the template for a particular page, you can use the absolute property:

export const metadata: Metadata = {
  title: {
    absolute: 'My absolute override of Title',
  },
}

This will ignore any templates and use the supplied title as is.

Dynamic metadata: Bringing data to life

Static metadata is great, but what if you need to generate metadata based on dynamic data? Next.js has you covered with the generateMetadata function:

export async function generateMetadata({ params }: { params: { id: string } }) {
  const project: Project = await fetch(`https://api.example.com/projects/${params.id}`).then(res => res.json());

  return {
    title: project.title,
  }
}

This feature allows you to retrieve data and generate metadata dynamically. It's perfect for pages that display content from a database or API.

Understanding title behavior

Let's summarize how titles behave in Next.js:

• A title string defines the title for the given page.
• If a page doesn't have a title, it inherits the title template from the nearest parent section.
• title.absolute defines a title that ignores any templates set in parent sections.
• title.template in page.js doesn't affect anything because pages are the last section of a route.

Conclusion

Working with metadata in Next.js is a powerful way to improve the SEO and user experience of your application. By understanding the interplay between static and dynamic metadata, inheritance and overriding, you can create a flexible and maintainable metadata system for your Next.js applications.

Happy SEOing!