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
Create root layout
import { Footer, Layout, Navbar, ThemeSwitch } from 'nextra-theme-blog'
import { Banner, Head, Search } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-blog/style.css'
export const metadata = {
title: 'Blog Example'
}
export default async function RootLayout({ children }) {
const banner = (
<Banner storageKey="4.0-release">
🎉 Nextra 4.0 is released.{' '}
<a href="#" className="x:text-primary-600">
Read more →
</a>
</Banner>
)
return (
<html lang="en" suppressHydrationWarning>
<Head backgroundColor={{ dark: '#0f172a', light: '#fefce8' }} />
<body>
<Layout banner={banner}>
<Navbar pageMap={await getPageMap()}>
<Search />
<ThemeSwitch />
</Navbar>
{children}
<Footer>
<abbr
title="This site and all its content are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
style={{ cursor: 'help' }}
>
CC BY-NC 4.0
</abbr>{' '}
{new Date().getFullYear()} © Dimitri POSTOLOV.
<a href="/feed.xml" style={{ float: 'right' }}>
RSS
</a>
</Footer>
</Layout>
</body>
</html>
)
}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