技術スタック紹介


以下の技術を使用しています

  • Next.js
  • Tailwind CSS
  • Biome
  • Valibot
  • Shiki
  • remark

public 内の md ファイルに記事を書き、slug ページで ↓ のように取得し表示しています

const Schema = v.object({
  date: v.date(),
  html: v.string(),
});

async function getPostBySlug(slug: string) {
  const filename = `./public/${slug}/index.md`;
  const { content, data } = matter(await readFile(filename, "utf8"));
  const html = await markdownToHtml(content);
  return v.parse(Schema, { html, ...data });
}

export default async function PostPage(props: {
  params: Promise<{ slug: string }>;
}) {
  const params = await props.params;
  const data = await getPostBySlug(params.slug);

  return <Markdown>{data.value}</Markdown>;
}

GitHub リポジトリ - ryujito.me