ドキュメントテーマ
Nextraドキュメントテーマは、最新のドキュメントWebサイトを構築するために必要なほぼすべてを含むテーマです。トップナビゲーションバー、検索バー、ページサイドバー、目次（TOC）、その他の組み込みコンポーネントが含まれています。
このWebサイト自体はNextraドキュメントテーマを使用して構築されています。
テンプレートからクイックスタート
Vercelにデプロイ
リンクをクリックして、独自のNextraサイトを作成し、Vercelにデプロイすることで開始できます
VercelはNextraドキュメントテンプレートをフォークし、サイトをデプロイします。完了すると、リポジトリのすべてのコミットが自動的にデプロイされます。
テンプレートをフォーク
テンプレートリポジトリを手動でフォークすることもできます。
新規プロジェクトとして開始
インストール
Nextraドキュメントサイトを手動で作成するには、**Next.js**、**React**、**Nextra**、および**Nextraドキュメントテーマ**をインストールする必要があります。プロジェクトディレクトリで、次のコマンドを実行して依存関係をインストールします
npm i next react react-dom nextra nextra-theme-docsプロジェクトにNext.jsが既にインストールされている場合は、アドオンとしてnextraとnextra-theme-docsのみをインストールする必要があります。
package.jsonに次のスクリプトを追加します
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},パッケージマネージャーに応じて、次のコマンドで開発モードでサーバーを起動できます
npm run devまたは、本番モードで
npm run build
npm run startNext.jsに慣れていない場合は、Next.jsはナビゲートするすべてのページをコンパイルするため、開発モードがかなり遅くなることに注意してください。
Next.js設定の追加
プロジェクトのルートディレクトリに次のnext.config.mjsファイルを作成します
import nextra from 'nextra'
const withNextra = nextra({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.jsx'
})
export default withNextra()
// If you have other Next.js configurations, you can pass them as the parameter:
// export default withNextra({ /* other next.js config */ })上記の設定により、Nextraは指定されたテーマを使用して、Next.jsプロジェクトのMarkdownファイルを処理できます。その他のNextra設定は、ガイドにあります。
ドキュメントテーマ設定の作成
最後に、プロジェクトのルートディレクトリに対応するtheme.config.jsxファイルを作成します。これは、Nextraドキュメントテーマの設定に使用されます
export default {
logo: <span>My Nextra Documentation</span>,
project: {
link: 'https://github.com/shuding/nextra'
}
// ... other theme options
}テーマの完全な設定はこちらにあります。
Next.js App コンポーネントの作成
次の内容でpages/_app.jsxファイルを作成します
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}準備完了！
これで、最初のMDXページをpages/index.mdxとして作成できます
# Welcome to Nextra
Hello, world!package.jsonで指定されたdevコマンドを実行して、プロジェクトの開発を開始します！ 🎉
npm run dev次に、次のセクションで、ドキュメント構造の構成とWebサイトテーマの設定について学習します