Get Started
Quick Start with Vercel
You can start by creating your own Nextra site and deploying to Vercel by clicking the link:
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.
Create Manually
Nextra works like a Next.js plugin, and it accepts a theme config (layout) to render the page. To start:
- Install Next.js, Nextra and React
yarn add react react-dom next nextra
- Install the docs theme
yarn add nextra-theme-docs
- Create the following Next.js config and theme config under the root directory:
const withNextra = require('nextra')({
theme: 'nextra-theme-blog',
themeConfig: './theme.config.js'
// optional: add `staticImage: true` to enable Nextra's auto image import
})
module.exports = withNextra()
- Create a
theme.config.js
file for the docs theme:
/**
* @type {import('nextra-theme-docs').DocsThemeConfig}
*/
export default {
project:{
link: 'https://github.com/shuding/nextra' // GitHub link in the navbar
},
docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master', // base URL for the docs repository
getNextSeoProps: () => ({ titleTemplate: '%s – Nextra' }),
navigation: true,
darkMode: true,
footer: {
text: `MIT ${new Date().getFullYear()} © Shu Ding.`
},
editLink: {
text: '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" />
</>
),
primaryHue: {
dark: 204,
light: 212
}
}
More configuration options for the docs theme can be found here.
- You are good to go! Run
yarn next
to start.
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 (opens in a new tab) for
more information.
You can also use <style jsx>
(opens in a new tab) to style elements inside theme.config.js
.