Get Started

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

Configurations#

1. Install Next.js, Nextra and React: yarn add next nextra react react-dom

2. Install the blog theme: yarn add nextra-theme-blog

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

// next.config.js
const withNextra = require('nextra')({
  theme: 'nextra-theme-blog',
  themeConfig: './theme.config.js',
  // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
})
module.exports = withNextra()

// theme.config.js
export default {
  footer: <p>MIT 2021 © Nextra.</p>,
  head: (
    <>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="Nextra: the next blog builder" />
      <meta name="og:title" content="Nextra: the next blog builder" />
    </>
  ),
  readMore: 'Read More →',
  titleSuffix: null,
  postFooter: null
}

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

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

5. You are good to go!