Get Started
Docs for this theme is under construction.
An example of the blog theme can be found 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:
pnpm 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 Next.js Config
Create the following next.config.js
file in your project’s root directory:
const withNextra = require('nextra')({
theme: 'nextra-theme-blog',
themeConfig: './theme.config.jsx',
})
module.exports = withNextra()
// If you have other Next.js configurations, you can pass them as the parameter:
// module.exports = 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:
export default {
footer: <p>MIT 2022 © 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 pnpm next
command to start developing the project! 🎉