Get Started

Configurations

Similar to the docs theme, you can install the blog theme with the following commands:

Install Next.js, Nextra and React

npm i next nextra react react-dom

pnpm add next nextra react react-dom

yarn add next nextra react react-dom

bun add next nextra react react-dom

Install the blog theme

npm i nextra-theme-blog

pnpm add nextra-theme-blog

yarn add nextra-theme-blog

bun add nextra-theme-blog

Create the following Next.js config and theme config under the root directory:

next.config.mjs

import nextra from 'nextra'
 
const withNextra = nextra({
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.js'
})
export default withNextra()

theme.config.js

export default {
  footer: <p>MIT 2021 © 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 →',
  titleSuffix: null,
  postFooter: null,
  cusdis: {
    appId: 'your_app_id',
    host: 'your_host(optional)',
    lang: 'your_lang'
  },
  darkMode: false,
  navs: [
    {
      url: 'https://github.com/shuding/nextra',
      name: 'Nextra'
    }
  ]
}

Create `pages/_app.js` and include the theme stylesheet:

_app.js

import 'nextra-theme-blog/style.css'
 
export default function Nextra({ Component, pageProps }) {
  const getLayout = Component.getLayout || (page => page)
  return <Component {...pageProps} />
}

You are good to go!

💡

Tip

You can also use <style jsx> to style elements inside theme.config.js.

Note

An example of the blog theme can be found here .