Installation

This guide covers how to set up a new Nextra 3 project from scratch.

Prerequisites

Node.js: Version 18 or later.
Package Manager: npm, pnpm, or yarn.

Automatic Installation

The easiest way to start is by using the Nextra template.

npx create-nextra

Manual Installation

If you prefer to set it up manually:

1. Install Dependencies

npm install next nextra nextra-theme-docs react react-dom

2. Configure `next.config.js`

Create a next.config.js in your root directory:

next.config.js

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
})
 
module.exports = withNextra()

3. Create Theme Config

Create theme.config.tsx:

theme.config.tsx

import React from 'react'
import { DocsThemeConfig } from 'nextra-theme-docs'
 
const config: DocsThemeConfig = {
  logo: <span>My Project</span>,
  project: {
    link: 'https://github.com/shuding/nextra-docs-template',
  },
  chat: {
    link: 'https://discord.com',
  },
  docsRepositoryBase: 'https://github.com/shuding/nextra-docs-template',
  footer: {
    text: 'Nextra Docs Template',
  },
}
 
export default config

4. Create `_app.js`

Nextra 3 requires a custom _app.js (or _app.tsx):

pages/_app.js

import 'nextra-theme-docs/style.css'
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Now you are ready to create your .mdx files in the pages directory!

Overview Build on macOS