DocumentationBlog ThemeGet Started

Get Started

⚠️
Docs for this theme is under construction.
💡

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:

Quick Start from Template

Start as New Project

Install

To create a Nextra Docs 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
💡

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 in package.json:

package.json
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},

You can either start the server with, for example if you use npm, npm run dev, which will run in development mode or npm run build && npm run start for production mode.

💡

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 the following next.config.mjs file in your project’s root directory:

next.config.mjs
import nextra from 'nextra'
 
const withNextra = nextra({
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.jsx'
})
 
export default withNextra()
 
// If you have other Next.js configurations, you can pass them as the parameter:
// export default withNextra({ /* other next.js config */ })

With the above configuration, Nextra can handle Markdown files in your Next.js project, with the specified theme. Other Nextra configurations can be found in Guide.

Create Blog Theme 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 run the next or next dev command specified in package.json to start developing the project! 🎉

Blog ThemeCustom Theme