Blog

Nextra Docsの使い方とVercelへのデプロイ：ステップバイステップガイド

Ashley Goolam

Ashley Goolam

12 6月 2025

Nextra Docsの使い方とVercelへのデプロイ：ステップバイステップガイド

簡単かつ洗練されたモダンなドキュメントウェブサイトを作成したいなら、Nextra Docsは利用可能なツールの中でも最高の一つです。Next.js上に構築されたNextraを使えば、MarkdownまたはMDXでドキュメントを記述し、見た目をカスタマイズし、特にVercel上では楽にデプロイできます。この記事では、Nextra Docsサイトをゼロからセットアップし、無料でVercelにデプロイする方法を順を追って説明します。

💡
美しいAPIドキュメントを生成する優れたAPIテストツールをお探しですか？

最大限の生産性で開発チームが共同作業できる統合されたオールインワンプラットフォームをお探しですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！
ボタン

Nextra Docsとは？あなたのドキュメント構築BFF

Nextra docsは、ドキュメントサイトの作成を簡単にするNext.jsベースのフレームワークです。ナビゲーション、検索、目次をすぐに利用できる組み込みのDocsテーマを備えたMarkdown（またはMDX）コンテンツが特徴です。nextra docsが優れている理由は以下の通りです。

ユーザーはnextra docsの「ゼロコンフィグの洗練さ」とVercelへのデプロイを絶賛しています。サイトを構築する準備はできましたか？さっそく始めましょう！

なぜNextra DocsをVercelと一緒に使うのか？

Nextra docsは、プロレベルのドキュメントを迅速に必要とする開発者、スタートアップ、オープンソースプロジェクトに最適です。Next.jsの本拠地であるVercelと組み合わせることで、以下のメリットが得られます。

テストサイトをVercelにデプロイしたところ、5分もかからずにライブになりました。まるでバターのようにスムーズでした！

Nextra Docsのセットアップ方法：ステップバイステップガイド

Next.jsのApp Routerを使用して、nextra docsサイトをゼロから作成しましょう。手順通りに進めば、約20分でローカルサイトが稼働します！

1. 新しいNext.jsプロジェクトを作成する

npx create-next-app my-nextra-docs
next js project options
cd my-nextra-docs

2. Nextra Docsの依存関係をインストールする

nextra docsのコアパッケージをインストールします。

npm install next react react-dom nextra nextra-theme-docs

3. package.jsonのスクリプトを更新する

package.jsonに以下のスクリプトが含まれていることを確認します（これらは通常create-next-appによって追加されます）。

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

"dev": "next --turbopack"
package.json
npm run dev

http://localhost:3000にアクセスして、Next.jsアプリが動作することを確認します。

next js home page

醜い:( でも、動作はします！では、これを修正してみましょう。

4. Nextra Docsを設定する

import nextra from 'nextra'

const withNextra = nextra({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.js'
})

export default withNextra({
  async redirects() {
    return [
      {
        source: '/',
        destination: '/resources',
        permanent: true
      }
    ]
  }
})

"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.mjs", ".next/types/**/*.ts"]

5. MDXコンポーネントを設定する

import { useMDXComponents as getThemeComponents } from 'nextra-theme-docs'

const themeComponents = getThemeComponents()

export function useMDXComponents(components) {
  return {
    ...themeComponents,
    ...components
  }
}

6. Appレイアウトを更新する

import { Footer, Layout, Navbar } from 'nextra-theme-docs'
import { Banner, Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-docs/style.css'
 
export const metadata = {
  // ここにメタデータを定義します
  // メタデータAPIの詳細については、以下を参照してください: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
}
 
const banner = <Banner storageKey="some-key">Nextra 4.0がリリースされました🎉</Banner>
const navbar = (
  <Navbar
    logo={<b>Nextra</b>}
    // ... その他のナビゲーションバーオプション
  />
)
const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>
 
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      // 必須ではありませんが、SEOに良いです
      lang="en"
      // 設定必須です
      dir="ltr"
      // `next-themes`パッケージ推奨 https://github.com/pacocoursey/next-themes#with-app
      suppressHydrationWarning
    >
      <Head
      // ... その他のheadオプション
      >
        {/* その他のタグは、``要素の`children`として渡す必要があります */}
      </Head>
      <body>
        <Layout
          banner={banner}
          navbar={navbar}
          pageMap={await getPageMap()}
          docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
          footer={footer}
          // ... その他のレイアウトオプション
        >
          {children}
        </Layout>
      </body>
    </html>
  )
}

7. ドキュメントページを追加する

home page 404 error message
/app/resources
  /page.mdx

テスト目的で、以下を追加しました。

# リソース

さまざまなトピックや分野に関連するリソース。

## 学習
- [Build Your Own X](https://github.com/codecrafters-io/build-your-own-x): 好きなテクノロジーをゼロから再構築してプログラミングをマスターしましょう。

## 役立つ記事
- [CSR vs SSR vs SSG vs ISR: モダンウェブ開発のための詳細な比較](csr-vs-ssr-vs-ssg-vs-isr-a-deep-dive-for-modern-web-development-33kl#:~:text=Here's%20a%20quick%20summary%3A,as%20SPAs%2C%20CSR%20is%20perfect.)
- [The Art of Comand Line](https://github.co./jlevy/the-art-of-command-line)

しかし、コンテンツは複雑である必要はなく、以下のようにシンプルでも構いません。

# はじめに

こんにちは、<あなたの名前>さん！あなたの**nextra docs**サイトへようこそ:)

- 簡単なMarkdown編集
- 自動ナビゲーション
- 検索と目次が組み込み済み
nextra home page

さあ、このページを編集したり、ページを追加したり、ダーク/ライトモードなどのすべての機能を試してみてください。力はあなたの手にあり、可能性は無限大です！

light and dark mode

Nextra DocsをVercelにデプロイする

次に、nextra docsサイトをVercelでライブにしましょう。VercelはNext.js向けに構築されているため、非常に簡単です。

8. コードをGitHubにプッシュする

git init
git add .
git commit -m "Initial nextra docs"
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

9. Vercelにデプロイする

varcel

Nextra Docsサイトをカスタマイズする

nextra docsを魅力的にしたいですか？これらを試してみてください。

私はドキュメントにカスタムコールアウトコンポーネントを追加しました。10分でプロフェッショナルに見えるようになりました！

Nextra Docsのトラブルシューティングとヒント

custom nextra documentation example

なぜNextra DocsとVercelは完璧な組み合わせなのか

Nextra docsは、そのMarkdownのシンプルさとNext.jsの速度でドキュメント作成を楽しくします。Vercelのワンクリックデプロイと無料ホスティングが決定的な要因です。確かに、App RouterはNext.js初心者には戸惑うかもしれませんが、Nextra docsはしっかりしています。Docusaurusと比較すると、nextra docsはより軽量でモダンな印象です。

ドキュメントを公開する準備はできましたか？あなたのnextra docsサイトを構築し、Vercelにデプロイしましょう。あなたの作品を見るのが楽しみです！そして、ぜひApidogもチェックしてみてください。

💡
美しいAPIドキュメントを生成する優れたAPIテストツールをお探しですか？

最大限の生産性で開発チームが共同作業できる統合されたオールインワンプラットフォームをお探しですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！
ボタン

ApidogでAPIデザイン中心のアプローチを取る

APIの開発と利用をよりシンプルなことにする方法を発見できる

無料会員登録ダウンロード