如何在下一个项目中渲染 Markdown frontmatter 中的文本和列表？

Question

有两张图片。 我想使用像博客这样的动态页面来实现这两个图像。 我想从 markdown frontmatter 获取数据。

如何制作markdown文件以及如何在下一个项目中实现它？

我试过这个。

Markdown 文件。

focusAreas:
  - Implemented a scalable React Native app with TypeScript for cross-platform support
    - React Navigation for seamless routing
    - Redux Toolkit for state management
    - React Query for data fetching 
    - Styled Components for consistent UI
  - Created reusable UI components
  - Developed personalization engine

/[slug]/page.tsx

const caseStudy = await getCaseStudyData(slug);


{renderList(caseStudy.frontmatter.focusAreas)}


const renderList = (items) => (
  <div className="flex w-5/6 flex-col gap-2 text-[16px] font-[500] leading-7 max-w-[702px]">
    {items.map((item, index) =>
      typeof item === 'string' ? (
        <p key={index} className="text-[16px] font-[500] leading-7">{item}</p>
      ) : (
        <ul key={index} className="list-disc px-5">
          {Object.keys(item)[0]}
          {renderList(Object.values(item)[0])}
        </ul>
      )
    )}
  </div>
);

Answer 1

Next.js 官方文档对此进行了解释：https://nextjs.org/docs/app/building-your-application/configuring/mdx#frontmatter