はじめに
Docsテーマと同様に、次のコマンドでブログテーマをインストールできます。
新規プロジェクトとして開始する
インストール
Nextraブログサイトを手動で作成するには、Next.js、React、Nextra、およびNextraブログテーマをインストールする必要があります。プロジェクトディレクトリで、次のコマンドを実行して依存関係をインストールします。
npm i next react react-dom nextra nextra-theme-blog💡
すでにプロジェクトにNext.jsがインストールされている場合は、アドオンとしてnextraとnextra-theme-blogのみをインストールする必要があります。
package.jsonに次のスクリプトを追加します。
package.json
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},パッケージマネージャーに応じて、次のコマンドで開発モードでサーバーを起動できます。
npm run devまたは本番モードでは
npm run build
npm run start💡
Next.jsに慣れていない場合は、Next.jsがナビゲートするすべてのページをコンパイルするため、開発モードが大幅に遅くなることに注意してください。
Next.jsの設定を追加する
プロジェクトのルートディレクトリに次のnext.config.mjsファイルを作成します。
next.config.mjs
import nextra from 'nextra'
const withNextra = nextra({
theme: 'nextra-theme-blog',
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ブログテーマを設定するために使用されます。
theme.config.jsx
export default {
footer: <p>MIT 2023 © Nextra.</p>,
head: ({ title, meta }) => (
<>
{meta.description && (
<meta name="description" content={meta.description} />
)}
{meta.tag && <meta name="keywords" content={meta.tag} />}
{meta.author && <meta name="author" content={meta.author} />}
</>
),
readMore: 'Read More →',
postFooter: null,
darkMode: false,
navs: [
{
url: 'https://github.com/shuding/nextra',
name: 'Nextra'
}
]
}Next.jsのAppコンポーネントを作成する
次の内容でpages/_app.jsxファイルを作成します。
pages/_app.jsx
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}準備完了！
これで、最初のMDXページをpages/index.mdxとして作成できます。
pages/index.mdx
# Welcome to Nextra
Hello, world!そして、package.jsonで指定されたdevコマンドを実行して、プロジェクトの開発を開始できます！🎉
npm run dev