Quick Start
Start building awesome documentation in under 5 minutes
Visulima 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 Visulima Nextra Docs Theme.
Start as New ProjectPermalink for this section
InstallPermalink for this section
To create a Nextra Docs site manually, you have to install Next.js, React, Nextra, and Visulima Nextra Docs Theme. In your project directory, run the following command to install the dependencies:
bash pnpm i next react react-dom nextra @visulima/nextra-theme-docs nextra and @visulima/nextra-theme-docs as the add-ons.Add Next.js ConfigPermalink for this section
Create the following next.config.js file in your project’s root directory:
const withNextra = require("nextra")({ theme: "@visulima/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. Other Nextra configurations can be found in Guide (opens in a new tab).
Create Docs Theme ConfigPermalink for this section
Lastly, create the corresponding theme.config.jsx file in your project’s root directory. This will be used to configure the Visulima Nextra Docs theme:
export default { logo: <span>My Nextra Documentation</span>, project: { link: "https://github.com/shuding/nextra", }, // ... other theme options};
Full theme configurations can be found here.
Ready to Go!Permalink for this section
Now, you can create your first MDX page as pages/index.mdx:
# Welcome to NextraHello, world!
And run the next or next dev command specified in package.jsonto start developing the project!