examples/docs/src/content/get-started.mdx
import { Steps } from 'nextra/components'
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.
Nextra works like a Next.js plugin, and it accepts a theme config (layout) to render the page. To start: 1
<Steps> ### Install Next.js, Nextra and React [^1]npm i react react-dom next nextra
npm i nextra-theme-docs
import nextra from 'nextra'
const withNextra = nextra({
theme: 'nextra-theme-blog',
themeConfig: './theme.config.js'
})
export default withNextra()
theme.config.js file for the docs themeexport 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.
next dev to start[!NOTE]
Any
.mdor.mdxfile will turn into a doc page and be displayed in sidebar. You can also create a_meta.jsfile 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 insidetheme.config.js.