Get 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'
  // optional: add `staticImage: true` to enable Nextra's auto image import
})
export default withNextra()

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

theme.config.js
/**
 * @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="AbyssalDetention: official wiki" />
      <meta name="og:title" content="AbyssalDetention: official wiki" />
    </>
  ),
  primaryHue: {
    dark: 204,
    light: 212
  }
}
💡

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

You are good to go! Run next dev to start

💡

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.

💡

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. ↩

IntroductionInstallation