開始使用
與文件主題類似，您可以使用以下指令安裝部落格主題
作為新專案開始
安裝
若要手動建立 Nextra 部落格網站，您必須安裝 **Next.js**、**React**、**Nextra** 和 **Nextra 部落格主題**。在您的專案目錄中，執行以下指令以安裝 dependencies
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或以 production 模式
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