Get Started

Create your own Nextra site and deploy to Vercel:

Vercel will create the Nextra repository and deploy the site for you with just a few clicks.
Once done, every change in the repository will be deployed automatically.


Configurations

  1. Install Next.js and React: yarn add next react react-dom

  2. Install Nextra and the docs theme: yarn add nextra nextra-theme-docs

  3. Create the following Next.js config and theme config under the root directory:

// next.config.js
const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
module.exports = withNextra()
// theme.config.js
export default {
repository: 'https://github.com/shuding/nextra', // project repo
docsRepository: 'https://github.com/shuding/nextra', // docs repo
branch: 'master', // branch of docs
path: '/', // path of docs
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.`,
footerEditOnGitHubLink: true, // will link to the docs repo
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" />
</>
}
  1. Create pages/_app.js and include the theme stylesheet:
import 'nextra-theme-docs/style.css'
export default function Nextra({ Component, pageProps }) {
return <Component {...pageProps} />
}
  1. You are good to go!

💡

Any .md or .mdx file will turn into a doc page and be displayed in sidebar. You can also create a meta.json file to customize the page order and title.

Check the source code: https://github.com/shuding/nextra for more information.

💡

You can also use <style jsx> to style elements inside theme.config.js.