start.mdx

Docs Theme

import { Callout, Tab, Tabs } from 'nextra-theme-docs'

Quick Start from Template

{/* You can start by creating your own Nextra site and deploying to Vercel by clicking the link: */}

{/* */}

{/* Vercel will fork the Nextra Docs template and deploy the site for you. Once done, every commit in the repository will be deployed automatically. */}

Deploy to Vercel

Fork the Template

(todo)

Start from Empty Project

<style jsx>{` .steps-container { margin-left: 1rem; padding-left: 1.5rem; counter-reset: step; border-left: 1px solid; border-color: rgb(229 231 235/1); } .steps-container :global(h3) { counter-increment: step; } .steps-container :global(h3):before { content: counter(step); display: inline-block; position: absolute; margin-top: 3px; margin-left: -41px; width: 33px; height: 33px; text-align: center; text-indent: -1px; color: #999; border-radius: 100%; border: 4px solid #fff; background: #f3f3f3; line-height: 1.5rem; font-size: 1rem; font-weight: 400; } `}</style>

Install

To create a Nextra Docs site manually, you have to install Next.js, React, Nextra, and Nextra Docs Theme. In your project directory, run the following command to install the dependencies:

<Tabs items={['pnpm', 'npm', 'yarn']}> bash pnpm i next react react-dom nextra nextra-theme-docs bash npm i next react react-dom nextra nextra-theme-docs bash yarn add next react react-dom nextra nextra-theme-docs

Like any Next.js projects, you need to also add scripts to your package.json:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

If you already have Next.js running, you only need to install nextra and nextra-theme-docs as the add-ons.

Create Nextra Config

Create the following next.config.js file in your project’s root directory:

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.jsx',
})

module.exports = withNextra()
// or module.exports = withNextra({ /* other next.js config */ })

Here you can configure Nextra to propoerly handle your Markdown files. With the above configurations, Nextra will first compile the content to JSX, and then render the site with configured theme.

import { Card, Cards } from '@components/card'

Full Nextra configurations can be found here:

import switchIcon from '@components/icons/switch'

Create Docs Theme Config

Lastly, create the corresponding theme.config.jsx file in your project’s root directory:

export default {
  logo: <span>My Nextra Documentation</span>,
  // ...
}

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

Ready to Go!

Now, you can create an initial MDX page:

# Welcome to Nextra

Hello, world!

And run the dev command to start developing the project:

pnpm dev