Generate Metadata Dynamically for multiple Pages in Next.js (App Router)

I was working on my side project and wanted to generate metadata dynamically for multiple static pages in Next.js. Here’s how I did it. I don’t know if this is the best way to do it, but it works for me. And this used DRY (Don’t Repeat Yourself) principle so it’s good.

I had a list of pages that I wanted to generate metadata for. I wanted to generate metadata for those pages dynamically. I didn’t want to repeat the same code for each page. Because in the future I might add more pages and I don’t want to repeat the same code again and again. So I created a function that takes the page name and returns the metadata for that page.

Here’s how I did it.

Code

// pageList.ts

export const pageList = [
  {
    title: "Page 1",
    description: "This is the page 1",
    slug: "page-1",
    image: "page-1.png",
  },
  {
    title: "Page 2",
    description: "This is the page 2",
    slug: "page-2",
    image: "page-2.png",
  },
  {
    title: "Page 3",
    description: "This is the page 3",
    slug: "page-3",
    image: "page-3.png",
  },
];

This is the list of pages that I want to generate metadata for. I have the title, description, slug, and image for each page.

// utils.ts

import { pageList } from "./pageList";

export const generateMetaData = (pageSlug: string) => {
  const page = pageList.find((page) => page.slug === pageSlug);
  if (!page) {
    return {
      title: "404",
      description: "Page not found",
      openGraph: {
        title: "404",
        description: "Page not found",
        url: "/404",
        images: [
          {
            url: "https://example.com/image.jpg",
          },
        ],
      },
    };
  }
  return {
    title: page.name,
    description: page.description,
    openGraph: {
      title: page.name,
      description: page.description,
      url: `/${page.slug}`,
      images: [
        {
          url: page.image || "https://example.com/image.jpg",
        },
      ],
    },
  };
};

This is the function that generates metadata for the page. It takes the page slug as an argument and returns the metadata for that page. If the page is not found in the list of pages, it returns the metadata for the 404 page.

Now I have the function that generates metadata for the page. I can use this function every page to generate metadata for that page.

// page-1/page.tsx

import { generateMetaData } from "./utils";
import type { Metadata } from "next";

export const metadata: Metadata = generateMetaData("page-1");

export default function Page() {
  return <div>your stuff here</div>;
}

This is how I generate metadata for the page. I import the generateMetaData function and call it with the page slug. I use the metadata object to set the metadata for the page.

Please let me know if there is a better way to do this. I would love to hear your thoughts. As I’m learning Next.js, I’m sure there are better ways to do this. But this works for me. I hope this helps you too. This all things just for the sake of SEO.