Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shuding/nextra/llms.txt

Use this file to discover all available pages before exploring further.

nextra-theme-blog provides a minimal, content-focused layout for blog sites built with Next.js and Nextra. Unlike the docs theme, configuration is entirely prop-based on the <Layout> component — there is no separate theme config file. The theme integrates next-themes for dark mode and next-view-transitions for smooth page animations.

​
Import

import { Layout, Navbar, Footer } from 'nextra-theme-blog'
import 'nextra-theme-blog/style.css'
Remember to import nextra-theme-blog/style.css once in your root layout. Without it, the theme’s Tailwind-based utility classes will not apply.

​
BlogMetadata type

BlogMetadata describes the shape of the frontmatter fields that Nextra reads from each .mdx blog post file. These values are available on pageMap entries as frontMatter and are used by components like <PostCard> to render post listings. 
type BlogMetadata = {
  /** Post author name */
  author?: string
  /** Publication date in ISO 8601 format, e.g. '2024-01-15' */
  date?: string
  /** Short description for SEO and post listing cards */
  description?: string
  /** Reading-time estimate, auto-populated by remark-reading-time */
  readingTime?: ReadingTime
  /** Array of tag strings used for categorisation */
  tags?: string[]
  /** Post title displayed in listings and the browser tab */
  title?: string
}
Add these fields to the frontmatter of any post:
posts/my-post.mdx
---
title: "Getting started with Nextra"
date: "2024-03-10"
description: "A quick tour of the nextra-theme-blog starter."
author: "Ada Lovelace"
tags: ["nextra", "next.js", "tutorial"]
---

​
ReadingTime type

The readingTime field is populated automatically when you enable the remark-reading-time plugin in your Nextra configuration. 
type ReadingTime = {
  /** Human-readable string: '3 min read' */
  text: string
  /** Decimal minutes: 3.2 */
  minutes: number
  /** Milliseconds: 192000 */
  time: number
  /** Total word count: 640 */
  words: number
}

​
Layout props

The <Layout> component wraps your entire site in a next-themes ThemeProvider and a next-view-transitions ViewTransitions provider, then renders content inside a centered prose container.
​
children
ReactNode
required
The page content. In the Next.js App Router, this is the {children} slot automatically passed to every root layout.
​
nextThemes
object
Configuration forwarded to the next-themes ThemeProvider. Accepts all ThemeProvider props except children.
​
banner
ReactNode
Optional banner content rendered inside the ThemeProvider wrapper, above the prose article container. Use this for site-wide announcements.
<Footer> in nextra-theme-blog is intentionally minimal — it renders a small <small> element with bottom margin.
​
children
ReactNode
default:"'CC BY-NC 4.0 {year} © Shu Ding.'"
Copyright or other footer text. Replace with your own content.
The blog <Footer> is a plain <small> block styled with Tailwind prose utilities. It is separate from nextra-theme-docs’s <Footer>, which includes locale and theme switchers.

​
Full layout example

The following shows a complete app/layout.tsx for a nextra-theme-blog site with a navbar, footer, and the blog stylesheet imported: 
import { Footer, Layout, Navbar } from 'nextra-theme-blog'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-blog/style.css'

export default async function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  const pageMap = await getPageMap()

  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Layout>
          <Navbar pageMap={pageMap}>
            {/* Extra navbar items rendered after page links */}
            <a href="/rss.xml" aria-label="RSS feed">RSS</a>
          </Navbar>
          {children}
          <Footer>
            <p>MIT {new Date().getFullYear()} © My Blog.</p>
          </Footer>
        </Layout>
      </body>
    </html>
  )
}
Because <Layout> wraps content in a ViewTransitions provider, page navigations will automatically use the browser’s View Transitions API when available, giving your blog smooth cross-page animations with no extra configuration.

​
Individual post layout

For pages that display a single post, render children directly inside a Next.js page file. Nextra’s MDX pipeline injects the prose container from <Layout> automatically. Use the built-in <Meta> internals via frontmatter to display author, date, tags, and reading time:
posts/hello-world.mdx
---
title: "Hello World"
date: "2024-06-01"
author: "Your Name"
tags: ["hello", "first-post"]
description: "My very first Nextra blog post."
---

Welcome to my blog! This is the first post.
Nextra reads these frontmatter fields and makes them available through the pageMap API for use in listing pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us