Get Started
Similar to the Docs Theme, you can install the blog theme with the following commands:
Start as a New Project
Install
To create a Nextra Blog site manually, you have to install Next.js, React, Nextra, and Nextra Blog Theme. In your project directory, run the following command to install the dependencies:
npm i next react react-dom nextra nextra-theme-blogIf you already have Next.js installed in your project, you only need to
install nextra and nextra-theme-blog as the add-ons.
Add the following scripts to your package.json:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},You can enable Turbopack in development by appending the --turbopack flag to
the dev command:
- "dev": "next",
+ "dev": "next --turbopack",You can start the server in development mode with the following command according to your package manager:
npm run devor in production mode:
npm run build
npm run startIf 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'
const withNextra = nextra({
// ... Other Nextra config options
})
// You can include other Next.js configuration options here, in addition to Nextra settings:
export default withNextra({
// ... Other Next.js config options
})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
Render MDX files
There are two ways to render MDX files using file-based routing, add your MDX
files via page files or
content directory convention.
Run the project
Run the dev command specified in package.json to start developing the
project! 🎉
npm run dev