Install Nextra Theme

Add the following scripts to your package.json:

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

[!TIP]

You can enable Turbopack in development by appending the --turbopack flag to the dev command:

diffCopy

- "dev": "next",
+ "dev": "next --turbopack",

You can start the server in development mode with the following command according to your package manager:

npm run dev

or in production mode:

npm run build
npm run start

[!NOTE]

If you're not familiar with Next.js, note that development mode is significantly slower since Next.js compiles every page you navigate to.

Add Next.js config

Create a next.config.mjs file in your project's root directory with the following content:

import nextra from 'nextra'

// Set up Nextra with its configuration
const withNextra = nextra({
  // ... Add Nextra-specific options here
})

// Export the final Next.js config with Nextra included
export default withNextra({
  // ... Add regular Next.js options here
})

With this configuration, Nextra will handle Markdown files in your Next.js project. For more Nextra configuration options, check out the Guide.

Add mdx-components file

Setup search

To set up search, follow the instructions on the Search Engine page.

Create the root layout

Next, create the root layout of your application inside the app folder. This layout will be used to configure your Nextra Theme: