入门

使用 Vercel 快速开始#

你可以通过点击下面的链接创建自己的 Nextra 网站并且一键部署到 Vercel：

只需单击几下，Vercel 就会为你创建 Nextra 代码仓库和部署网站。 一旦完成之后，你在代码仓库里面的每次修改都会自动部署到 Vercel。

手动安装#

Nextra 的工作原理类似 Next.js 插件, 它通过主题配置 (布局) 来渲染页面。安装步骤如下：

1. 安装 Next.js, Nextra 和 React：yarn add next nextra react react-dom

2. 安装文档主题（你可以使用你喜欢的任何主题）：yarn add nextra-theme-docs

3. 创建如下的 Next.js 配置：

// next.config.js
const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.js',
  // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
})
module.exports = withNextra()

4. 为文档主题创建 theme.config.js 配置文件：

// theme.config.js
export default {
  projectLink: 'https://github.com/shuding/nextra', // GitHub link in the navbar
  docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master', // base URL for the docs repository
  titleSuffix: ' – Nextra',
  nextLinks: true,
  prevLinks: true,
  search: true,
  customSearch: null, // customizable, you can use algolia for example
  darkMode: true,
  footer: true,
  footerText: `MIT ${new Date().getFullYear()} © Shu Ding.`,
  footerEditLink: `Edit this page on GitHub`,
  logo: (
    <>
      <svg>...</svg>
      <span>Next.js Static Site Generator</span>
    </>
  ),
  head: (
    <>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="Nextra: the next docs builder" />
      <meta name="og:title" content="Nextra: the next docs builder" />
    </>
  ),
}

5. 创建 pages/_app.js 并引入主题样式表：

import 'nextra-theme-docs/style.css'
export default function Nextra({ Component, pageProps }) {
  return <Component {...pageProps} />
}

6. 一切准备就绪! 运行 yarn next 启动网站吧。