目次
この記事について
この記事では、オープンソースソフトウェア（OSS）の中でも特に注目すべき「nextra」を紹介します。連載第45回となる今回は、シンプルでありながら強力なサイト生成フレームワークとしての特長や、開発者にとってどのようなメリットがあるのかを掘り下げていきます。
近年、ウェブサイトやブログの構築がますます注目されていますが、企業や個人が効率的にコンテンツを管理し、公開する方法が求められています。このようなニーズに応える形で登場したのが「nextra」です。このツールは、Next.jsの全ての利点を活かしつつ、柔軟でパワフルな機能を提供します。これにより、開発者は煩雑な設定や煩わしい作業から解放され、コンテンツの作成に集中できるようになります。
今回の紹介を通じて、多様なコンテンツ管理の可能性や、nextraを利用することによって得られる開発の効率化について、具体的な使用例を交えながら考察していきます。
リンク：https://github.com/shuding/nextra
本コンテンツは、弊社AI開発ツール「IXV」を用いたOSSツール紹介です。情報の正確性には努めておりますが、内容に誤りが含まれる可能性がございますのでご了承ください。
1. Nextraの概要
Nextraは、Next.jsの全ての利点を活かしたシンプルで強力、かつ柔軟なサイト生成フレームワークです。このツールは、MarkdownやMDXを使用してドキュメントサイトやブログを簡単に構築するための機能を提供します。NextraのDocs Themeには、モダンなドキュメントサイトを構築するために必要なほぼすべてが含まれています。具体的には、ナビゲーションバー、検索バー、ページサイドバー、目次（TOC）、そして豊富なビルトインコンポーネントを備えています。
2. Nextraのインストール手順
2.1 ライセンスと動作環境
NextraはMITライセンスのもとで提供されており、Node.jsやpnpmが必要です。具体的な推奨動作環境は、Node.jsのバージョン20.x以上です。
2.2 セットアップ手順
以下の手順に従って、Nextraをセットアップします。
Corepackの有効化
corepack enable
もし上記のコマンドが失敗する場合は、以下のコマンドでCorepackをインストールします。
npm install -g corepack@latest
依存関係のインストール
npmを使用する場合
npm install next react react-dom nextra nextra-theme-docs
pnpmを使用する場合
pnpm add next react react-dom nextra nextra-theme-docs
yarnを使用する場合
yarn add next react react-dom nextra nextra-theme-docs
bunを使用する場合
bun add next react react-dom nextra nextra-theme-docs
次に、以下のスクリプトをpackage.jsonに追加します。
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
Turbopackを有効にするには、dev コマンドに --turbopack フラグを追加します。
Nextraのビルド
pnpm --filter nextra build
Nextraを開発モードで実行する場合は、以下のコマンドを使用します。
pnpm --filter nextra dev
Nextraテーマのビルド
pnpm --filter nextra-theme-docs build
2.3 Next.js設定の追加
next.config.mjsファイルをプロジェクトのルートディレクトリに作成し、以下の内容を記述します。
import nextra from 'nextra'
// Nextraの設定
const withNextra = nextra({
// Nextra特有のオプションを追加する
})
// 最終的なNext.jsの設定をエクスポート
export default withNextra({
// 通常のNext.jsオプションを追加する
})
2.4 MDXコンポーネントの追加
次に、mdx-componentsファイルを追加します。このファイルを使用して、MDXファイルで使用するコンポーネントを管理します。
2.5 検索機能の設定
検索機能を設定するには、Nextraの検索エンジンの設定ページを参照してください。
2.6 ルートレイアウトの作成
appフォルダ内でアプリケーションのルートレイアウトを作成します。このレイアウトはNextraテーマを構成するために使用されます。
2.7 MDXファイルのレンダリング
MDXファイルをファイルベースのルーティングを通じてレンダリングするために、pageファイルまたはcontentディレクトリの構成を使用します。
2.8 プロジェクトの実行
次に、package.jsonに指定したdevコマンドを実行してプロジェクトの開発を開始します。
npm run dev
または
pnpm run dev
または
yarn dev
または
bun run dev
3. Nextraの簡単な使い方
Nextraを使用してサイトを構築する際の基本的な流れは以下の通りです。
3.1 ドキュメント作成
MarkdownやMDXファイルを作成し、コンテンツを追加します。Nextraはこれらのファイルを自動的に読み込み、サイトを生成します。
3.2 サイトのカスタマイズ
Nextraでは、テーマやレイアウトを自由にカスタマイズできます。nextra-theme-docsや他のテーマを使用することで、デフォルトのスタイルを変更できます。ナビゲーションバーやフッター、バナーなどのビルトインコンポーネントを使うことで、見た目を強化することができます。
3.3 サイトのデプロイ
アプリが完成したら、ビルドし、静的ファイルをホスティングサービスにデプロイします。例えば、VercelやNetlifyなどを使用することができます。
結論
Nextraは、Next.jsを基盤にした強力なサイト生成フレームワークであり、使いやすさとカスタマイズ性を兼ね備えています。シンプルなインストール手順と柔軟な構成が可能で、すぐにでもドキュメンテーションやブログサイトの構築を始めることができます。Nextraを活用することで、効率的に魅力的なウェブサイトを作成できるでしょう。