Skip to content
Documentation
nextra-theme-docs
Get Started

Get Started

Docs Theme

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.

Quick Start from Template

Deploy to Vercel

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

Vercel will fork the Nextra Docs template (opens in a new tab) and deploy the site for you. Once done, every commit in the repository will be deployed automatically.

Fork the Template

You can also manually fork the template repository (opens in a new tab).

Start as New Project

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:


_10
pnpm i next react react-dom nextra @visulima/nextra-theme-docs

💡

If you already have Next.js installed in your project, you only need to install nextra and @visulima/nextra-theme-docs as the add-ons.

Add Next.js Config

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


_10
const withNextra = require('nextra')({
_10
theme: '@visulima/nextra-theme-docs',
_10
themeConfig: './theme.config.jsx'
_10
})
_10
_10
module.exports = withNextra()
_10
_10
// If you have other Next.js configurations, you can pass them as the parameter:
_10
// 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. Other Nextra configurations can be found in Guide.

Create Docs Theme Config

Lastly, create the corresponding theme.config.jsx file in your project’s root directory. This will be used to configure the Nextra Docs theme:


_10
export default {
_10
logo: <span>My Nextra Documentation</span>,
_10
project: {
_10
link: 'https://github.com/shuding/nextra'
_10
}
_10
// ...
_10
}

Full theme configurations can be found here.

Ready to Go!

Now, you can create your first MDX page as pages/index.mdx:


_10
# Welcome to Nextra
_10
_10
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: