Next.js Discord

Discord Forum

Metadata export

Answered
Abyssinian posted this in #help-forum
Open in Discord
AbyssinianOP
Hi, I'm building a Next.js 13 site with some static pages. I want to deal with all the metadata logic in a separate util function, in order to keep my components clean and tidy (eventually it's a lot of the same code repeating itself in different components).
I would like to hear from you what do you think about implementing this kind of function (I'll add it in a comment)
The function takes the name of the component and returns the metadata object with the relevant title, description, og etc.
The point is to avoid having those very similar objects in all of the routes, it seems messy and repeats itself.
Any feedback and suggestions are welcome 🙌
Answered by fuma
Of course, You can write a function to create metadata, but I don't think putting metadata of all pages into a file makes sense.
Not to mention you might have dynamically generated metadata, it is hard to maintain.
I would recommend creating a function like createMetadata which takes title, description, etc. as parameters, with default values as well.
export const metadata = createMetadata({ title: "Hello World" });
View full answer

5 Replies

AbyssinianOP
The function code:
interface PageMetadata {
  page: string;
  title: string;
  description: string;
  path: string;
}

// All the pages metadata kept in one place
const pagesMetadata: PageMetadata[]  = [
  {
    page: 'Home',
    title: 'Home Page',
    description: 'Home page description lorem ipsum',
    path: '/',
  },
  {
    page: 'AboutPage',
    title: 'About Us',
    description: 'About page description lorem ipsum',
    path: '/about',
  },
  {
    page: 'AnotherPage',
    title: 'Another Page',
    description: 'Another page description lorem ipsum',
    path: '/another',
  },
  {
    page: 'OneMore',
    title: 'One More Page',
    description: 'One More page description lorem ipsum',
    path: '/onemore',
  },
];

// Create a map for faster search
const objectMap = new Map(pagesMetadata.map(obj => [obj.page, obj]));

// Function takes the page, i.e "Home" and searches for it in the map
export default function MetadataObj(page: string) {
  let currentPage:PageMetadata| undefined = objectMap.get(page);

  // If page doesn't exist in map, return a default metadata object
  if (currentPage === undefined) {
    return {
      title: 'Default Title',
      description: 'Default description',
      openGraph: {
        ...
      },
    };
  } 

  // If page exists in map - use it's content to create the metadata object and return it
  return {
    title: `${currentPage.title}`,
    description: `${currentPage.description}`,
      openGraph: {
        title: `${currentPage.title}`,
        description: `${currentPage.description}`,
        url: `https://example.com${currentPage.path}`,
        siteName: `Example`,
        type: `website`,
        images: [
          {
            url: `https://example.com/image.png`,
            width: 600,
            height: 600,
          },
        ],
      },
    };
}
fuma
Of course, You can write a function to create metadata, but I don't think putting metadata of all pages into a file makes sense.
Not to mention you might have dynamically generated metadata, it is hard to maintain.
I would recommend creating a function like createMetadata which takes title, description, etc. as parameters, with default values as well.
export const metadata = createMetadata({ title: "Hello World" });
Answer
@fuma Of course, You can write a function to create metadata, but I don't think putting metadata of all pages into a file makes sense. Not to mention you might have dynamically generated metadata, it is hard to maintain. I would recommend creating a function like `createMetadata` which takes title, description, etc. as parameters, with default values as well. ts export const metadata = createMetadata({ title: "Hello World" });
AbyssinianOP
Thanks for your input (:
Why putting the metadata for all pages into one place doesn't it makes sense to you?
I'd like to hear more because currently I don't see any advantage in keeping it in the component.
I thought it would actually be easier to maintain, because it's usually not something you change too often. And it also takes all of this text out of the component, makes it more readable and friendly. Note that the descriptions are usually around 150~ notes, not like I did here for the example.
So passing the title, description, path, and any other necessary variable that might not be constant across all pages metadata object, seems to me like a lot of "junk" in the component.
I currently don't need dynamically generated metadata, if I would in the future, I might use this option specifically where it's needed.
fuma
When you want to edit the metadata of a page, you have to open a large list of metadata, and find the one you are looking for.
That's quite annoying for me, maintaining a big list isn't my favor, and not the design purpose of file-system routing either.

Also, it is not a component, instead, it is a page. It should include the information of a page. Tbh, you rarely have a super long description that takes >20% of space in your page.
If it's an open-source project, that can lead to problems for contributors to find the metadata of a page since it's not the standard.

That is my own opinion anyway, you are free to control your codebase and code in your favorite pattern