快速上手
与文档主题类似，您可以使用以下命令安装博客主题
作为新项目开始
安装
要手动创建一个 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