Как мне динамически вставлять метаданные на мою страницу с помощью NextJS?

Question

Как мне динамически вставлять метаданные на мою страницу?

Я следовал руководству и смог получить страницу со списком имен моих служб, используя имена файлов в каталоге _services, однако этот метод позволяет мне только вставить slug.

Я хочу загрузить service_description и thumbnail, но использование {thumbnail} не работает.

КОД Находится в каталоге / pages

    import Link from "next/link";
        import fs from "fs";
        import {getAllServiceTypes} from '../lib/services'
        import Layout from '../components/layout'
        import Container from '../components/container'

        const Services = ({ slugs }) => (

 
  <Layout>
     <Container>  
  <div>
    
    {slugs.map(slug => {
      return (
        <div key={slug}>
         
          <Link href={"/services/" + slug}>
            <a>{slug}</a>
          </Link>
      
       </div>        
      );
    })}
  </div>
</Container>
</Layout>
);

       export const getStaticProps = async () => {
       const allServiceTypes = getAllServiceTypes([
  
       
       ]);

       const files = fs.readdirSync("data/_services");
        return {
         props: {
          slugs: files.map(filename => filename.replace(".md", ""))
    }
  };
};

        export default Services;

КОД Находится в каталоге / lib

import fs from 'fs'
import { join } from 'path'
import matter from 'gray-matter'


const servicesDirectory = join(process.cwd(), 'data/_services')



export function getServiceSlugs() {
  return fs.readdirSync(servicesDirectory)
}


export function getServiceBySlug(slug, fields = []) {
  const realSlug = slug.replace(/\.md$/, '')
  const fullPath = join(servicesDirectory, `${realSlug}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')
  const { data, content } = matter(fileContents)

  const items = {}

  // Ensure only the minimal needed data is exposed
  fields.forEach((field) => {
    if (field === 'slug') {
      items[field] = realSlug
    }
    if (field === 'content') {
      items[field] = content
    }

    if (data[field]) {
      items[field] = data[field]
    }
  })

  return items
}



export function getAllServiceTypes(fields = []) {
  const slugs = getServiceSlugs()
  const posts = slugs
    .map((slug) => getServiceBySlug(slug, fields))
    // sort posts by date in descending order
    .sort((post1, post2) => (post1.date > post2.date ? '-1' : '1'))
  return posts
}

Файл Markdown, из которого я хочу извлечь атрибуты.

     title: 'Corporate Identity'
    thumbnail: "/assets/blog/avx-studio-black.png"
    service_description: 'Some Text About Business Goes Here'
    design_tags: