import { Callout, Tab, Tabs } from 'nextra-theme-docs'
Nextra Docs Theme is a theme that includes almost everything you need to build a modern documentation website. It includes a top navigation bar, a search bar, a pages sidebar, a TOC sidebar, and other built-in components.
This website itself is built with the Nextra Docs Theme.
{/* 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. */}
(todo)
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
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()
// If you have other Next.js configurations, you can pass them as the parameter:
// module.exports = withNextra({ /* other next.js config */ })
With the above configuration, Nextra can handle Markdown files in your Next.js project, with the specified theme. Full Nextra configurations can be found here.
Lastly, create the corresponding theme.config.jsx
file in your project’s root directory. This will be used to configure the Nextra Docs theme:
export default {
logo: <span>My Nextra Documentation</span>,
project: {
link: 'https://github.com/shuding/nextra',
},
titleSuffix: ' – Nextra',
// ...
}
Full theme configurations can be found here.
Now, you can create your first MDX page as pages/index.mdx
:
# Welcome to Nextra
Hello, world!
And run the pnpm next
command to start developing the project! 🎉
Next, check out the next section to learn about organizing the documentation structure and configuring the website theme:
import { Card, Cards } from '@components/card'
} title="Page Structure" href="/docs/docs-theme/page-configuration"/> } title="Theme Configuration" href="/docs/docs-theme/theme-configuration"/> } title="Built-in Components" href="/docs/docs-theme/built-ins"/>