Get Started

Note

An example of the blog theme can be found here , with source code here .

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

pnpm add next react react-dom nextra nextra-theme-blog

yarn add next react react-dom nextra nextra-theme-blog

bun add next react react-dom nextra nextra-theme-blog

Note

If 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:

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:

package.json

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

pnpm run dev

yarn dev

bun run dev

or in production mode:

npm run build
npm run start

pnpm run build
pnpm run start

yarn build
yarn run start

bun run build
bun 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:

next.config.mjs

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 Next.js Config

Lastly, create the corresponding theme.config.jsx file in your project’s root directory. This will be used to configure the Nextra Blog theme:

theme.config.jsx

export default {
  footer: <p>MIT 2023 © Nextra.</p>,
  head: ({ title, meta }) => (
    <>
      {meta.description && (
        <meta name="description" content={meta.description} />
      )}
      {meta.tag && <meta name="keywords" content={meta.tag} />}
      {meta.author && <meta name="author" content={meta.author} />}
    </>
  ),
  readMore: 'Read More →',
  postFooter: null,
  darkMode: false,
  navs: [
    {
      url: 'https://github.com/shuding/nextra',
      name: 'Nextra'
    }
  ]
}

Ready to Go!

Now, you can create your first MDX page as content/index.mdx:

content/index.mdx

# Welcome to Nextra
 
Hello, world!

And run the dev command specified in package.json to start developing the project! 🎉

npm run dev

pnpm run dev

yarn dev

bun run dev