Next.jsでMDXブログをゼロから作る - このブログの作り方

今読んでいただいているこのブログには、データベースも管理画面もありません。記事はすべてマークダウンファイル1枚です。どうやって作ったのか、そのまま公開します。

なぜファイルベースなのか

ブログツールはたくさんありますが、個人開発者にはほとんどが過剰です。

• CMS: 管理画面・連携・料金がついてきます
• Notion連携: 便利ですが、レンダリング・速度・カスタマイズで詰まります
• マークダウンファイル: 記事がコードと一緒にバージョン管理でき、無料で、git push がそのまま公開です

私は3番目を選びました。摩擦が一番少ないからです。

フォルダ構成

核心だけ見るとこんな形です。

src/
├── app/
│   ├── page.tsx              # 홈 - 글 목록
│   ├── posts/[slug]/page.tsx # 글 상세
│   └── sitemap.ts            # /sitemap.xml
├── content/posts/*.mdx       # ← 글은 여기에만 추가
└── lib/posts.ts              # 목록·메타 로딩

ファイル名がそのままURLになります。hello.mdx は /posts/hello で開けます。

MDX設定

App RouterでMDXを使うには @next/mdx を組み込みます。Next 16はTurbopackがデフォルトなので、remark/rehypeプラグインを文字列の名前で渡す必要があります(関数の参照は渡せません)。

const withMDX = createMDX({
  options: {
    remarkPlugins: ["remark-gfm"],   // 표·취소선 지원
    rehypePlugins: ["rehype-slug"],  // 제목 앵커
  },
})

frontmatterの代わりにmeta export

普通はマークダウン冒頭の --- ブロック(frontmatter)にタイトルや日付を書きますが、MDXはJavaScriptを中に持てるので、もっとすっきりした方法があります。そのままオブジェクトをexportするんです。

export const meta = {
  title: "글 제목",
  date: "2026-07-06",
  category: "dev",
}

## 본문 시작

一覧ページでは各ファイルを動的importして、この meta だけを読みます。

const mod = await import(`@/content/posts/${slug}.mdx`)
return mod.meta   // 본문 렌더 없이 메타만

パース用ライブラリも、別途のインデックスも必要ありません。

SEOは最初から

ブログの目的が流入なら、SEOは後回しではなく最初に入れるべきです。私は記事ごとのメタデータ・Open Graph・JSON-LD構造化データに加えて、sitemap.xml・robots.txt・rss.xml まで最初から敷いておきました。この話は次の記事で詳しく扱います。

まとめ

• 記事は .mdx ファイル1枚、ファイル名がURL
• @next/mdx + 文字列プラグイン(Turbopack)
• frontmatterの代わりに export const meta
• SEOは最初のコミットから

この構成そのままなら、皆さんのブログも30分で立ち上げられます。私はこの方式で今日の波のようなプロダクトの話を積み重ねています。