インストール

このガイドでは、Nextra 3 プロジェクトをゼロからセットアップする方法について説明します。

前提条件

Node.js: バージョン 18 以降
パッケージマネージャー: npm, pnpm, または yarn

自動インストール

最も簡単な方法は、Nextra テンプレートを使用することです。

npx create-nextra

手動インストール

手動で設定したい場合のステップは以下の通りです。

1. 依存関係のインストール

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

2. `next.config.js` の設定

ルートディレクトリに next.config.js を作成します。

next.config.js

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
})
 
module.exports = withNextra()

3. テーマ設定の作成

theme.config.tsx を作成します。

theme.config.tsx

import React from 'react'
import { DocsThemeConfig } from 'nextra-theme-docs'
 
const config: DocsThemeConfig = {
  logo: <span>My Project</span>,
  project: {
    link: 'https://github.com/shuding/nextra-docs-template',
  },
  // その他の設定...
}
 
export default config

4. `_app.js` の作成

Nextra 3 ではカスタム _app.js (または _app.tsx) が必須です。

pages/_app.js

import 'nextra-theme-docs/style.css'
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

これで pages ディレクトリに .mdx ファイルを作成する準備が整いました！

概要 macOSでのビルド