src/pages/policies/[slug].tsx

import React from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';

interface PolicyProps {
  content: string;
}

const PolicyPage: React.FC<PolicyProps> = ({ content }) => {
  return (
    <div className="container mx-auto py-8">
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
};

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [],
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps<PolicyProps> = async ({ params }) => {
  const { slug, fileName } = params as { slug: string; fileName: string };
  const filePath = path.join(process.cwd(), 'content', 'policies', slug, fileName);
  const fileContent = fs.readFileSync(filePath, 'utf-8');
  const { content } = matter(fileContent);

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

export default PolicyPage;