---
title: "Nextraとは：Next.jsでドキュメントサイトを作る手順と既存サイトへの同居構成【4.6系・2026年11月】"
url: "https://www.issoh.co.jp/tech/details/19169/"
published: 2026-11-01
updated: 2026-11-01
categories: ["開発"]
publisher: "株式会社一創"
---

# Nextraとは：Next.jsでドキュメントサイトを作る手順と既存サイトへの同居構成【4.6系・2026年11月】

Nextraは、Next.jsのプラグインとして動き、MarkdownとMDXの原稿からドキュメントサイトやブログを組み立てるオープンソースのフレームワークです。2026年11月1日にnpm registryで確認した`nextra`のlatestは4.6.1（2025年12月4日公開）で、4.x系はApp Router専用になりました。日本語で読める解説はNextra 2〜3時代のpages前提の手順が多く、そのままでは今の版で動きません。この記事では、4.6系での新規作成の手順、Pagefindによる日本語検索、既存のNext.jsサイトの`/docs`配下に同居させる構成、npmに出ていない修正の扱い、DocusaurusやVitePressとの選び分けまでを、公式ドキュメントとGitHubのソースをもとに整理します。

## まとめ：Nextraを選んでよい条件と4.6系で既存のNext.jsサイトに足す結論

結論から書きます。自社の製品サイトや管理画面がすでにNext.jsで動いていて、その同じリポジトリに説明書を足したい。この条件ならNextraが第一候補です。説明書のためだけに別の言語や別のビルド系を持ち込まずに済みます。

見送るのは、製品の版ごとに説明書を出し分けたい場合と、Next.jsを使っていない組織が単体のドキュメントサイトを作る場合です。前者は版管理を標準で持つDocusaurus、後者は設定の少ないVitePressのほうが早く立ち上がります。

版の扱いにも注意が要ります。npmで配布されている最新は4.6.1で、GitHubのmainには4.6.5までの修正が積まれたまま公開されていません。`basePath`を使うとサイト内検索が動かない不具合の修正もそこに含まれるため、4.6.1では`basePath`を使わず、Nextraの`contentDirBasePath`でパスを分ける構成を選びます。

## Nextraの定義｜Next.jsのプラグインとして動くMDXのサイト生成フレームワーク

まず、NextraがNext.jsの何を受け持つのかを押さえます。

### next.configに組み込むプラグイン方式とdocs・blogの2つの公式テーマ

[公式ドキュメントの冒頭](https://nextra.site/docs)は、NextraをNext.jsの上に載るフレームワークと説明しています。`next.config.mjs`で`nextra()`の関数を通すだけで、Next.jsのアプリがMarkdownとMDXのページを扱えるようになる仕組みです。ルーティングや画像、メタデータはNext.jsの機能をそのまま使います。

見た目は、ドキュメント用の`nextra-theme-docs`とブログ用の`nextra-theme-blog`の2つの公式テーマから選びます。ドキュメントテーマには上部ナビゲーション、サイドバー、目次、検索窓が入っています。公式サイトの[GitHubリポジトリ](https://github.com/shuding/nextra)はMITライセンスで、2026年11月1日時点のスター数は約13,900でした。土台のNext.jsとApp Routerの仕組みは[Next.jsの16系App Routerで最小アプリを動かす手順](https://www.issoh.co.jp/tech/details/17373/)で整理しています。

### Nextra 4でApp Router専用になった変更と日本語の解説記事の版ずれ

2025年1月13日に出た[Nextra 4の公式移行ガイド](https://the-guild.dev/blog/nextra-4)で、構成が大きく変わりました。Pages Routerの対応が外れ、`theme.config.jsx`は廃止され、設定は`app/layout.jsx`で`Layout`や`Navbar`に渡すpropsへ移っています。検索エンジンもFlexSearchからRust製のPagefindに替わりました。同じガイドは、Next.js 15.1.3での計測としてドキュメントテーマの共通JavaScriptが168kBから106kBに減ったと示しています。

検索で上位に出る日本語の解説を5本確かめたところ、4本は2021〜2023年に書かれた`pages/`と`theme.config`前提の手順でした。公式のよくある質問も「Pages Routerで使えるのはNextra 1〜3だけ」と明記しています。記事の手順を試す前に、`theme.config`という語が出てくるかを見れば、古い版の手順かどうかを見分ける手掛かりになるためです。App Routerのファイル規約は[App Routerのファイル規約とPages Routerとの違い](https://www.issoh.co.jp/tech/details/4026/)が参考になります。

## npm latestの4.6.1とGitHubのmainにある4.6.5の差と版の確かめ方

Nextraを本番で使う前に、配布されている版と開発中の版の差を把握しておきます。

### npm registryとCHANGELOGで見えるリリース間隔と未公開の修正

2026年11月1日時点で、npmの`nextra`と`nextra-theme-docs`のlatestはどちらも4.6.1です。[GitHubのリリース一覧](https://github.com/shuding/nextra/releases)も4.6.1が最新で、4.5.1（2025年9月27日）、4.6.0（10月2日）、4.6.1（12月4日）と続いた後、11か月近く新しい版が出ていません。

一方、mainブランチの`packages/nextra/package.json`は4.6.5まで上がっています。[CHANGELOG](https://github.com/shuding/nextra/blob/main/packages/nextra/CHANGELOG.md)には、4.6.2で`basePath`配下の検索の修正、4.6.5でgit worktree内のビルドが遅くなる不具合の修正が載っています。後者は、110ファイルのサイトでビルドが約1.8秒から約176秒に延びた不具合として記録されている事例です。CIでworktreeを使う構成なら、ビルド時間の急増に心当たりがないかを確かめます。

### basePath配下でPagefind検索が動かない不具合と4.6.1での避け方

CHANGELOGの4.6.2の項によると、Next.jsの`basePath: '/docs'`のようにサブパスへ置いたとき、Pagefindが索引ファイルを`/`から読みに行き、検索が動きませんでした。修正はmainに入っていますが、npmの4.6.1には含まれていません。

4.6.1で避ける方法は、アプリ全体をずらす`basePath`を使わず、Nextraの`contentDirBasePath`で原稿の配信先だけを`/docs`に寄せることです。既存サイトに同居させる構成（第6章）もこの形で組みます。新しい版がnpmに出たら、CHANGELOGの4.6.2以降を読んでから上げます。

## Next.js 16とnextra-theme-docsで新規ドキュメントサイトを作る手順

ここからは手を動かす部分です。例は[ドキュメントテーマのGet Started](https://nextra.site/docs/docs-theme/start)と、リポジトリ内の公式example（`examples/docs`）に沿って書きます。npmのpeerDependenciesは`next`が14以上、`react`が18以上で、Node.jsは18以上が条件です。

### 依存の導入とnext.config.mjs・mdx-components.jsの用意

パッケージを入れ、`package.json`のスクリプト、`next.config.mjs`、`mdx-components.js`の3つを用意します。[mdx-componentsファイルの説明](https://nextra.site/docs/file-conventions/mdx-components-file)は、このファイルを必須としています。

```
# 依存パッケージ（Next.jsが入っている既存プロジェクトなら後ろの2つだけ）
npm i next react react-dom nextra nextra-theme-docs
npm i -D pagefind

// next.config.mjs
import nextra from 'nextra'

const withNextra = nextra({
  // content/ 配下の原稿を /docs 以下で配信する
  contentDirBasePath: '/docs'
})

export default withNextra({
  reactStrictMode: true
})

// mdx-components.js（プロジェクト直下か src/ に置く）
import { useMDXComponents as getDocsMDXComponents } from 'nextra-theme-docs'

const docsComponents = getDocsMDXComponents()

export const useMDXComponents = components => ({
  ...docsComponents,
  ...components
})
```

Next.js 15.3以降で`next-mdx-import-source-file`が見つからないというエラーが出たら、同じ説明ページのとおり`turbopack.resolveAlias`に`mdx-components`の実際のパスを書きます。

### contentディレクトリとcatch-allルートで既存のMarkdownを並べる構成

原稿の置き方は2通りあります。`app/`の中に`page.mdx`を置く方法と、[contentディレクトリ](https://nextra.site/docs/file-conventions/content-directory)に`install.mdx`のような普通の名前で並べる方法です。既存のMarkdownを持ち込むなら後者が向いています。`content/`への入口として、次のcatch-allルートを1つだけ置きます。

```
// app/docs/[[...mdxPath]]/page.jsx（公式exampleと同じ内容）
import { generateStaticParamsFor, importPage } from 'nextra/pages'
import { useMDXComponents as getMDXComponents } from '../../../mdx-components'

export const generateStaticParams = generateStaticParamsFor('mdxPath')

export async function generateMetadata(props) {
  const params = await props.params
  const { metadata } = await importPage(params.mdxPath)
  return metadata
}

const Wrapper = getMDXComponents().wrapper

export default async function Page(props) {
  const params = await props.params
  const { default: MDXContent, toc, metadata, sourceCode } = await importPage(params.mdxPath)
  return (
    <Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
      <MDXContent {...props} params={params} />
    </Wrapper>
  )
}
```

`contentDirBasePath`を`/docs`にしたので、ルートも`app/docs/`の下に置きます。`sourceCode`を渡しているのは、4.4.0で入った「ページの内容をコピーする」ボタンを`content/`の構成で動かすためで、CHANGELOGに必須と書かれています。

### \_meta.jsでサイドバーの並び順と日本語の表示名を指定する書き方

サイドバーの順序と表示名は、各フォルダに置く`_meta.js`で決めます。何も書かなければファイル名順で、Nextra 4でサイドバーの題名に使われるのは、ページの最初の`h1`です。日本語の表示名を付けるなら、次のように書きます。

```
// content/_meta.js（content/ に同じ名前の .mdx がある前提）
export default {
  index: 'はじめに',
  install: 'インストール手順',
  api: 'APIリファレンス',
  changelog: {
    title: '変更履歴',
    theme: { copyPage: false }
  }
}
```

移行ガイドによると、4.xの`_meta`はサーバー側で読まれ、`'use client'`は要りません。中身はzodで検証され、3系で使えた`newWindow`や`theme.layout: 'raw'`は4.xで削除された項目です。古い記事から設定を写す場合は、この2つを消してから試します。

## Pagefindで日本語の全文検索を動かすpostbuild設定と静的書き出しの差

検索窓はテーマに入っていますが、索引を作る手順は自分で足します。ここを飛ばすと、検索窓だけがあって何も見つからないサイトになります。

### postbuildで索引を作る設定とhtmlのlang属性で決まる日本語の分割

[検索の設定ガイド](https://nextra.site/docs/guide/search)によると、Pagefindはビルド後のHTMLから索引を作ります。`package.json`に`postbuild`を足し、生成物の`_pagefind/`は`.gitignore`に入れます。

```
{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "postbuild": "pagefind --site .next/server/app --output-path public/_pagefind",
    "start": "next start"
  }
}
```

日本語サイトで気を付けるのは`html`要素の`lang`属性です。[Pagefindの多言語ガイド](https://pagefind.app/docs/multilingual/)は、索引を作るときに`lang`属性で言語を判定し、言語ごとに別の索引を作ると書いています。空白で区切られない日本語の分割はextended版だけの機能ですが、[導入ガイド](https://pagefind.app/docs/installation/)によるとnpm経由で常に入るのはextended版です。公式のレイアウト例は`lang="en"`なので、写したままにせず`lang="ja"`へ書き換えます。

### output exportで静的に書き出すときの出力先と自動振り分けの制約

Next.jsのサーバーを置かず、ファイルだけをS3やGitHub Pagesに置く場合は、[静的書き出しのガイド](https://nextra.site/docs/guide/static-exports)のとおり`output: 'export'`と`images.unoptimized: true`を指定します。`postbuild`の出力先も`out/_pagefind`に変えます。

```
// next.config.mjs（静的書き出しの場合）
import nextra from 'nextra'

const withNextra = nextra({ contentDirBasePath: '/docs' })

export default withNextra({
  output: 'export',
  images: { unoptimized: true }  // これが無いと書き出せない
})

// package.json の postbuild も出力先を out 側へ変える
// "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind"
```

代わりに使えなくなる機能への注意も必要です。多言語化のガイドは、ブラウザの言語で振り分ける`nextra/locales`の`proxy`が、静的書き出しでは動かないと警告しています。多言語で自動の振り分けが要るなら、Next.jsのサーバーで動かす配信先を選びます。

### Turbopackで関数のremarkプラグインを渡せない制約と–webpack指定

[Turbopackとの併用ガイド](https://nextra.site/docs/guide/turbopack)によると、Turbopackでは`nextra()`にJSONで表せる値しか渡せません。`mdxOptions`の`remarkPlugins`や`rehypePlugins`は関数なので、渡すと`does not have serializable options`のエラーで止まります。

Next.js 16では`next build`もTurbopackが既定です。公式exampleの`examples/docs`は、ビルドのスクリプトを`next build --webpack`と明示していました。独自のremarkプラグインを使うサイトは、ビルドだけwebpackに固定します。Turbopack側の既定の変化は[Next.js 16で既定になったTurbopackの設定と移行判断](https://www.issoh.co.jp/tech/details/16015/)で扱っています。

## 既存のNext.jsサイトの/docs配下にNextraを同居させる構成と注意点

Nextraを選ぶ理由が「製品サイトがNext.jsだから」なら、新しいサイトを作るより、動いている製品サイトに説明書を足す形になります。公式のレイアウト例はルートの`app/layout.jsx`でサイト全体をNextraのテーマで包むため、そのままでは既存のページまでテーマの見た目に変わります。

### Route Groupsで既存サイトとドキュメントのルートレイアウトを分ける

Next.jsの[Route Groups](https://nextjs.org/docs/app/api-reference/file-conventions/route-groups)は、括弧付きのフォルダ名がURLに入らない規約で、用途の1つに複数のルートレイアウトを挙げています。これを使い、既存サイトとドキュメントで`html`と`body`を出すレイアウトを分けます。

```
app/
  (site)/
    layout.jsx          ← 既存サイトのルートレイアウト（Nextraを読み込まない）
    page.jsx            ← トップページ（/）
    pricing/page.jsx    ← 既存のページ群
  (docs)/
    layout.jsx          ← ドキュメント用のルートレイアウト
    docs/[[...mdxPath]]/page.jsx
content/
  _meta.js
  index.mdx             ← /docs
  install.mdx           ← /docs/install
mdx-components.js
next.config.mjs         ← contentDirBasePath: '/docs'
```

既存の`app/layout.jsx`は`(site)/layout.jsx`へ移します。同じページは、最上位の`layout.js`を置かない場合はトップページ（`/`）をどちらかのグループに入れること、別グループ同士で同じURLを作らないことを求めています。catch-allルートが1段深くなるので、`mdx-components`のimportに指定するパスは`../../../../mdx-components`です。

### getPageMap(‘/docs’)で読み込む範囲を絞るドキュメント側のレイアウト

ドキュメント側のレイアウトでは、サイドバーに出す範囲を`getPageMap`の引数で絞ります。ソースの`packages/nextra/src/server/page-map/get.ts`は、引数にルートを渡すとその配下だけを返し、例として`getPageMap('/blog')`を挙げています。

```
// app/(docs)/layout.jsx
import { Footer, Layout, Navbar } from 'nextra-theme-docs'
import { Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-docs/style.css'

export const metadata = {
  title: { template: '%s | 製品ドキュメント' }
}

export default async function DocsLayout({ children }) {
  return (
    <html lang="ja" dir="ltr" suppressHydrationWarning>
      <Head />
      <body>
        <Layout
          navbar={<Navbar logo={<b>製品ドキュメント</b>} />}
          footer={<Footer>© Example Inc.</Footer>}
          pageMap={await getPageMap('/docs')}
          docsRepositoryBase="https://github.com/example/product/tree/main"
        >
          {children}
        </Layout>
      </body>
    </html>
  )
}
```

`nextra-theme-docs/style.css`をこのレイアウトだけで読むことで、既存サイトのCSSとの衝突を`/docs`の内側に閉じ込めます。この構成は公式exampleとNext.jsの規約を組み合わせたものなので、取り込む前に`next build`と`postbuild`を通し、既存ページの見た目と検索の動作を確かめてから本番へ出します。

### ルートレイアウトをまたぐ遷移でページ全体が再読み込みになる制約

Route Groupsの説明は、ルートレイアウトが異なるページ間の移動はページ全体の再読み込みになると明記しています。製品サイトのヘッダーから`/docs`へ移るたびに、クライアント側の遷移ではなくページ全体の読み直しが起きる仕組みです。説明書は入口から入った後、ドキュメント内で行き来する使われ方が中心なので、多くの製品サイトでは許容できます。

許容できないのは、製品の画面と説明書を頻繁に往復させる管理画面のような使い方です。その場合は同居をやめ、`docs.example.com`のようなサブドメインに独立したNextraのアプリを立てます。リポジトリを分けると依存の更新も独立し、Nextraの版上げで製品側のビルドが止まる事態も避けられます。

## Docusaurus・VitePressとの違いと受託開発で採用してよい条件・見送る場面

Markdownから説明書を作るツールは複数あります。差は機能の数より、土台の技術と、版の出し分けへの対応に出ます。

### Nextra・Docusaurus・VitePressの土台・版の出し分け・検索方式比較

| ツール         | 土台                  | 版の出し分け     | 標準の検索                  |
| ----------- | ------------------- | ---------- | ---------------------- |
| Nextra 4.6系 | Next.js（App Router） | 公式ガイドに章が無い | Pagefind（postbuildで索引） |
| Docusaurus  | React・独自のビルド        | 標準機能で対応    | 別途の導入が必要               |
| VitePress   | Vue 3・Vite          | 標準機能には無い   | ローカル検索あり               |

Nextraの強みは、既存のNext.jsアプリのルーティングやコンポーネントをそのまま説明書の中で使える点です。Docusaurusの版管理と翻訳の仕組みは[Docusaurusの構築手順とバージョン管理・多言語・検索の設定](https://www.issoh.co.jp/tech/details/18707/)で、VitePressは[VitePressの作り方と1.6系・2.0版の選び方](https://www.issoh.co.jp/tech/details/19167/)で扱っています。API仕様書が中心で、ホスティングまで外に任せたいなら[MintlifyでAPIドキュメントを公開する手順と料金](https://www.issoh.co.jp/tech/details/18709/)も候補になります。

### Nextraを採用してよい条件と別のツールを選ぶべき3つの場面

採用してよいのは、製品やサービスのフロントエンドがすでにNext.jsで、説明書を同じリポジトリで保守したい場合です。原稿の中で自社のReactコンポーネントを動かせるので、APIの試し打ち画面や料金の計算表を説明書に埋め込めます。

別のツールを選ぶ場面は3つあります。第一に、利用者ごとに異なる版の説明書を読ませる製品で、版の切り出しを自作する手間がかかります。第二に、Next.jsを社内で保守していない組織です。説明書のためだけにNext.jsのメジャー更新を追い続けることになり、VitePressやMkDocsのほうが軽く済みます。第三に、npmの公開が止まっている間に直ってほしい不具合を抱える案件です。4.6.1の時点では、`basePath`が必須の配信構成ならmainからのビルドか別ツールかを先に決めます。

### ドキュメントサイトと製品サイトの構築を外部に委託する際の進め方

Nextraのサイトを外部に作らせる場合は、着手前に3点を決めておくと引き継ぎで揉めません。既存サイトに同居させるかサブドメインに分けるか、Next.jsのサーバーで配信するか静的に書き出すか、多言語で自動の振り分けが要るかです。どれも後から変えると、URLの構造か配信の費用が変わります。

説明書に加えて技術ブログや製品のお知らせも同じサイトで出す、デザインを製品サイトと揃える、といった要件が重なると、テーマの差し替えだけでは収まりません。当社では記事サイトや情報発信サイトの構築を[オウンドメディアサイト制作](https://www.issoh.co.jp/service/web/media/)として受託しており、ツールの選定から公開後の運用設計まで含めて相談いただけます。

## よくある質問

Nextraの導入検討で挙がりやすい論点を、公式ドキュメントとnpm registryの記録をもとに整理します。

### NextraはPages RouterのNext.jsプロジェクトでも使えますか？

4.x系では使えません。公式のよくある質問は、Pages Routerに対応するのはNextra 1〜3だけで、Nextra 4はApp Router専用だと書いています。Pages Routerのまま使うなら3系に留まることになります。移行するなら、`pages`フォルダを`content`に改名してcatch-allルートを置く方法が、移行ガイドで案内されている最小の手順です。

### Nextraは無料で商用利用できますか？

できます。npm registryに記録された`nextra`と`nextra-theme-docs`のライセンスはMITで、商用サイトでの利用や改変に制約はありません。費用が発生しうるのはツールの外側で、Next.jsのサーバーを動かすホスティングの料金が該当します。静的に書き出してS3やGitHub Pagesに置けば、配信の費用は小さく抑えられます。

### NextraとDocusaurusはどちらを選ぶべきですか？

製品の版ごとに説明書を出し分けるならDocusaurusです。版の切り出しを標準機能で持っており、Nextraの公式ガイドにはその章がありません。版を1つに保つ説明書で、製品がすでにNext.jsで動いているならNextraを選びます。チームがReactを書けるかどうかは両者で同じ条件なので、決め手は版管理の要否と、既存のNext.jsアプリに同居させたいかどうかです。

### Nextraの検索で日本語がうまく見つからないのはなぜですか？

まず`html`要素の`lang`属性を確かめます。Pagefindは`lang`属性で言語を判定し、日本語の単語の分割はその判定に従って行われます。公式のレイアウト例を写して`lang="en"`のままだと、日本語として扱われません。次に、`postbuild`が実行されて`_pagefind/`が`public`か`out`に出力されているかを見ます。開発サーバーでは索引が作られない点にも注意します。

### Nextraの開発は止まっていませんか？

2026年11月1日時点で、npmの最新は2025年12月4日の4.6.1です。ただしGitHubのmainでは2026年6月まで修正が入り、`package.json`は4.6.5まで上がっていました。2026年6月にはnpmへの公開手順をTrusted Publishingへ切り替える変更も入っています。公開が止まっている理由は公式に示されていないため、採用時はリリース一覧を定期的に確かめ、直ってほしい不具合がmainにしか無いかを把握しておきます。

## 関連記事

- [Docusaurusとは：ドキュメントサイトの構築手順とバージョン管理・多言語・検索の設定【3.10対応】](https://www.issoh.co.jp/tech/details/18707/)
- [VitePressとは：Vue製ドキュメントサイトの作り方と1.6系・2.0版の選び方【2026年11月版】](https://www.issoh.co.jp/tech/details/19167/)
- [Next.jsとは？16系App Routerで最小アプリを動かす手順と採用判断](https://www.issoh.co.jp/tech/details/17373/)
- [Turbopackとは：Next.js 16で既定になったRust製バンドラの設定と移行判断](https://www.issoh.co.jp/tech/details/16015/)
- [Mintlifyとは：docs.jsonとOpenAPIでAPIドキュメントを公開する手順と料金・注意点](https://www.issoh.co.jp/tech/details/18709/)

---

出典: [Nextraとは：Next.jsでドキュメントサイトを作る手順と既存サイトへの同居構成【4.6系・2026年11月】](<https://www.issoh.co.jp/tech/details/19169/>)（株式会社一創）