@hackersheet/react-document-content

Markdownをレンダリングするためのreact-markdownをHacker Sheet用にカスタマイズしたReactコンポーネントです。

Next.jsでの使用例

page.tsx

import { DocumentContent } from '@hackersheet/react-document-content';
import documentContentStyle from '@hackersheet/react-document-content-styles/basic';
import { notFound } from 'next/navigation';

import { client } from '@/lib/hackersheet/client';

import 'katex/dist/katex.min.css';

export default async function PostPage({ params: { documentSlug } }: { params: { documentSlug: string } }) {
  const { document } = await client.getDocument({ slug: documentSlug });

  if (!document) notFound();

  return (
    <main>
      <h1>{document.title}</h1>

      <DocumentContent
        document={document}
        style={documentContentStyle}
        permaLinkFormat="/posts/{{slug}}"
      />
    </main>
  );
}