Metadata in Next.js 14

Next.js 14 introduces a new feature called metadata that makes it easier to manage and control the metadata for your pages. Metadata is information about your page that is used by search engines and other applications, such as the title, description, and keywords.

There are two ways to use metadata in Next.js 14:

• Config-based metadata: This involves exporting a static metadata object or a dynamic generateMetadata function from your layout.js or page.js files.

• File-based metadata: This involves adding static or dynamically generated metadata files to your route segments.

Using Metadata in Next.js 14

Next.js 14 introduces a new feature called metadata that makes it easier to manage and control the metadata for your pages. Metadata is information about your page that is used by search engines and other applications, such as the title, description, and keywords.

There are two ways to use metadata in Next.js 14:

• Config-based metadata: This involves exporting a static metadata object or a dynamic generateMetadata function from your layout.js or page.js files.

• File-based metadata: This involves adding static or dynamically generated metadata files to your route segments.

Config-based metadata next 14

To use config-based metadata, you can export a static metadata object from your layout.js or page.js file. This object can contain any of the following properties:

• title: The title of the page.

• description: The description of the page.

• keywords: The keywords for the page.

• image: The image for the page.

• url: The URL of the page.

• twitter: The Twitter card metadata for the page.

• openGraph: The Open Graph metadata for the page.

For example, the following code exports a static metadata object from a layout.js file:

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'A simple Next.js application.',
  keywords: ['Next.js', 'React', 'JavaScript'],
};

Twitter card metadata

The twitter property is used to define the Twitter card metadata for your page. This metadata is used to control the way your page is displayed when it is shared on Twitter.

The following properties are available for the twitter object:

• card: The type of Twitter card. This can be one of the following values:
• summary: A simple summary card with a title, description, and image.
• summary_large_image: A summary card with a large image.
• article: An article card with a title, description, image, and author.
• product: A product card with a title, description, image, price, and availability.

• site: The URL of your website.

• title: The title of the page.

• description: The description of the page.

• image: The image for the page.

• creator: The Twitter username of the page author.

For example, the following code defines the Twitter card metadata for a page:

export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'A simple Next.js application.',
  keywords: ['Next.js', 'React', 'JavaScript'],
  twitter: {
    card: 'summary_large_image',
    site: 'https://www.example.com',
    title: 'My Next.js App',
    description: 'A simple Next.js application.',
    image: 'https://www.example.com/image.jpg',
    creator: '@johndoe',
  },
};

You can also use a dynamic generateMetadata function to generate metadata based on the current page. This function is passed an object with the following properties:

• params: The route parameters for the current page.

• locale: The locale for the current page.

• defaultLocale: The default locale for the application.

For example, the following code exports a dynamic generateMetadata function from a page.js file:

import { Metadata } from 'next';

export const generateMetadata: MetadataGenerator = (params, locale) => {
  if (params.id) {
    return {
      title: `Product ${params.id}`,
      description: `A description of product ${params.id}.`,
      keywords: ['product', 'description'],
    };
  } else {
    return {
      title: 'Products',
      description: 'A list of all products.',
      keywords: ['products', 'list'],
    };
  }
};

Open Graph metadata

The openGraph property is used to define the Open Graph metadata for your page. This metadata is used to control the way your page is displayed when it is shared on social media sites other than Twitter.

The following properties are available for the openGraph object:

• type: The type of Open Graph object. This can be one of the following values:
• article: An article.
• website: A website.
• book: A book.
• music: A music album.
• video: A video.
• profile: A profile page.

• url: The URL of the page.

• title: The title of the page.

• description: The description of the page.

• image: The image for the page.

• site_name: The name of your website.

• locale: The locale of the page.

For example, the following code defines the Open Graph metadata for a page:

export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'A simple Next.js application.',
  keywords: ['Next.js', 'React', 'JavaScript'],
  openGraph: {
    type: 'article',
    url: 'https://www.example.com/blog/my-post',
    title: 'My Next.js Blog Post',
    description: 'This is a blog post about Next.js.',
    image: 'https://www.example.com/blog/post.jpg',
    site_name: 'My Website',
    locale: 'en_US',
  },
};

File-based metadata

To use file-based metadata, you can add static or dynamically generated metadata files to your route segments. These files should be named metadata.json and should contain a JSON object with the same properties as the config-based metadata object.

For example, the following code adds a static metadata.json file to a blog route segment:

{
  "title": "My Blog",
  "description": "A blog about Next.js and JavaScript.",
  "keywords": ["blog", "Next.js", "JavaScript"],
}

You can also use a dynamic getStaticProps or getServerSideProps function to generate metadata files based on the current page. This function is passed an object with the same properties as the generateMetadata function.

For example, the following code uses a getStaticProps function to generate metadata.json files for a blog route segment:

export const getStaticProps = async ({ params, locale }) => {
  const posts = await getPosts(locale);
  const post = posts.find((post) => post.id === params.id);

  if (post) {
    return {
      props: {
        post,
      },
      revalidate: 60, // Revalidate the data every 60 seconds
    };
  } else {
    return {
      notFound: true,
    };
  }
};

Metadata precedence

Metadata is evaluated in order, starting from the root segment down to the segment closest to the final page.js segment. This means that child route segments can override metadata from parent route segments.

For example, if you have a blog route segment with a static metadata.json file that defines the title as "My Blog", and you also have a blog/post/[id] route segment with a dynamic generateMetadata function that defines the title as Product ${params.id}, then the title for the /blog/post/1 page will be "