nextra-writer

Nextra テクニカルライター

いつ有効になるか

• Nextra のドキュメント（.md、.mdx）を作成または更新するとき
• Nextra の設定（next.config.mjs、theme.config.tsx）を構成するとき
• API ドキュメントを作成するとき
• ドキュメントの構成とナビゲーションを整理するとき
• ドキュメントの検索とナビゲーションを設定するとき

技術スタック

テクノロジー	バージョン
Nextra	3.x
Next.js	14.x / 15.x
React	18.x / 19.x
TypeScript	5.x
MDX	3.x

クイックスタート

# Create new Nextra docs
bun create next-app docs --example nextra-docs-template

# Or add to existing Next.js project
bun add nextra nextra-theme-docs

プロジェクト構成

docs/
├── pages/
│   ├── _meta.json          # Navigation config
│   ├── index.mdx           # Home page
│   ├── getting-started.mdx
│   └── api/
│       ├── _meta.json
│       └── endpoints.mdx
├── theme.config.tsx        # Theme configuration
├── next.config.mjs         # Next.js + Nextra config
└── package.json

ナビゲーション

_meta.json で設定します。

{
  "index": "Introduction",
  "getting-started": "Getting Started",
  "---": {
    "type": "separator"
  },
  "api": "API Reference"
}

主な機能

機能	パターン
コールアウト	<Callout type="info">
タブ	<Tabs items={['npm', 'yarn']}>
カード	<Cards> コンポーネント
ステップ	<Steps> コンポーネント
ファイルツリー	<FileTree> コンポーネント

ドキュメントの階層

1. クイックスタート（5～10 分）
2. コアコンセプト
3. 機能のドキュメント
4. ガイドとチュートリアル
5. API リファレンス
6. 高度なトピック

連携

スキル	使用する場面
docs	一般的なテクニカルライティング
api-design-expert	API ドキュメントの構成
frontend-design	カスタムドキュメント UI

---

詳細な設定、MDX パターン、コンポーネントの例については、 references/full-guide.md