Skip to Content
Nextra 2 Alpha
DocumentationGet Started

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 2

npm i react react-dom next nextra

Install the docs theme 3

npm i nextra-theme-docs

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

next.config.mjs
import nextra from 'nextra'
 
const withNextra = nextra({
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.js'
})
export default withNextra()

Create a theme.config.js file for the docs theme

theme.config.js
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
  }
}
Note

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

You are good to go! Run next dev to start

Note

Any .md or .mdx file will turn into a doc page and be displayed in sidebar. You can also create a _meta.js file to customize the page order and title.
Check the source code: https://github.com/shuding/nextra  for more information.

💡
Tip

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

Footnotes

  1. To start. ↩

  2. Install Next.js, Nextra and React. ↩

  3. Install the docs theme. ↩

Last updated on
IntroductionMDX