Introduction
Welcome to Nextra! This is a basic docs template. You can use it as a starting point for your own project :)
What is Nextra?
A simple, powerful and flexible site generation framework with everything you love from Next.js.
Features
To start using Nextra, you need to select a theme first:
Documentation
The documentation is available at https://nextra.site (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:
pnpm i next react react-dom nextra nextra-theme-docsIf you already have Next.js installed in your project, you only need to install nextra and nextra-theme-docs as the add-ons.
Add Next.js 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()
// 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.
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:
export default {
logo: <span>My Nextra Documentation</span>,
project: {
link: 'https://github.com/shuding/nextra',
},
// ...
}Full theme configurations can be found here.
Ready to Go!
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! 🎉