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:

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

  2. Install the docs theme (you can use any theme you like): yarn add nextra-theme-docs

  3. Create the following next.config.js file:

// 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()
  1. Create a theme.config.js file for the docs theme:
// theme.config.js
export default {
projectLink: '', // GitHub link in the navbar
docsRepositoryBase: '', // 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: (
<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" />

More configuration options for the docs theme can be found here.

  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! 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: for more information.


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