render markdown in nextjs

1. Install required dependencies:

npm install gray-matter remark remark-html

1. Create a Markdown file (e.g., example.md) with content:

---
title: Example Markdown
---

# Hello, Next.js!

This is an example Markdown file.

1. Create a component to render Markdown (MarkdownComponent.js):

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import remark from 'remark';
import html from 'remark-html';

export default function MarkdownComponent({ content, data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
}

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'example.md');
  const fileContent = fs.readFileSync(filePath, 'utf8');
  const { content, data } = matter(fileContent);

  const processedContent = await remark().use(html).process(content);
  const contentHtml = processedContent.toString();

  return {
    props: {
      content: contentHtml,
      data,
    },
  };
}

1. Use the component in a page (pages/index.js):

import MarkdownComponent from '../components/MarkdownComponent';

export default function Home({ content, data }) {
  return (
    <div>
      <h1>Next.js Markdown Example</h1>
      <MarkdownComponent content={content} data={data} />
    </div>
  );
}

1. Run the Next.js development server:

npm run dev

Visit http://localhost:3000 in your browser to see the rendered Markdown content.