Docs Theme

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-docs

Like any Next.js projects, you need to also add the following scripts to your package.json file:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

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. Full Nextra configurations can be found here:

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>,
  // ...
}

More options for this theme can be found here:

Ready to Go!

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

# Welcome to Nextra
 
Hello, world!

And run the dev command to start developing the project:

pnpm dev