Docs Theme - Nextra (opens in a new tab)
nextra
公式
npm i next react react-dom nextra nextra-theme-docs公式通りだと非常にシンプルな構成なので、記事を書くだけの構成だとこれで良いのだが、このサイトでは、カスタマイズをしていくので、Next.js の初段階から作成していく
したがって、公式と書式が異なる部分があることに注意
Next.js
まずは、next.js を作成 nextra-docs の名前で src モード有効、experimental を無効にて作成
npm create next-appテーマを追加
npm add nextra nextra-theme-docs一応、素の Next.js が起動することを localhost:3000 で確認
npm run devこの時点では、nextra の表示ではなく、Next.js の初期画面が表示される
next.config.js 作成
テーマを読み込む設定を行う
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
// export時にnext/imageのエラー回避
unoptimized: true,
// 外部URL画像を許可
domains: ["s3.us-west-2.amazonaws.com", "i.imgur.com"],
},
};
const withNextra = require('nextra')({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.tsx',
});
// If you have other Next.js configurations, you can pass them as the parameter:
// module.exports = withNextra({ /* other next.js config */ })
module.exports = withNextra(nextConfig)images のプロパティは任意に設定
theme.config.tsx 作成
export default {
logo: <span>My Nextra Documentation</span>,
project: {
link: 'https://github.com/shuding/nextra',
},
// ...
}index.mdx
/pages/index.tsxを削除し、
/pages/index.mdxを作成 (中身は普通の markdown)
# Welcome to Nextra
Hello, world!不要ファイルなど
/pages/apiは使わないので削除
CSS は Docs テーマが適用されるので、/stylesも削除
なお、/stylesを削除した事により、/pages/_app.tsx を修正しておく
(globals.css を import している箇所を削除)
_app.tsx
// import '@/styles/globals.css'
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}実行
pnpm nextlocalhost:3000 で、Hello, world!が表示されるか確認