Nextra Blog Theme: Minimal Blog with Tags and RSS

---
title: Building Documentation Sites with Nextra
date: 2024-03-15
author: Jane Doe
tags: [nextra, tutorial, documentation]
description: Learn how to set up a fast, searchable docs site using Nextra and the blog theme.
---

Your post content begins here...

type BlogMetadata = {
  author?: string        // Post author name
  date?: string          // ISO 8601 date string, e.g. "2024-03-15"
  description?: string   // Short description shown in post cards and SEO
  readingTime?: ReadingTime // Auto-populated when readingTime: true in nextra config
  tags?: []              // Tuple of tag strings for categorisation (e.g. ['nextra', 'tutorial'])
  title?: string         // Post title shown in listings and the browser tab
}

import { Layout } from 'nextra-theme-blog'

import { Banner } from 'nextra/components'

<Layout
  banner={
    <Banner storageKey="v4-release">
      🎉 Nextra 4.0 is out!{' '}
      <a href="/posts/v4-release">Read the announcement →</a>
    </Banner>
  }
  nextThemes={{ defaultTheme: 'dark' }}
>
  {children}
</Layout>

import { Navbar } from 'nextra-theme-blog'

import { Search } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import { Navbar, ThemeSwitch } from 'nextra-theme-blog'

<Navbar pageMap={await getPageMap()}>
  <Search />
  <ThemeSwitch />
</Navbar>

import { Footer } from 'nextra-theme-blog'

<Footer>
  CC BY-NC 4.0 {new Date().getFullYear()} © Jane Doe.
  <a href="/rss.xml" style={{ float: 'right' }}>
    RSS
  </a>
</Footer>

import { normalizePages } from 'nextra/normalize-pages'
import { getPageMap } from 'nextra/page-map'

export async function getPosts() {
  const { directories } = normalizePages({
    list: await getPageMap('/posts'),
    route: '/posts'
  })
  return directories
    .filter(post => post.name !== 'index')
    .sort((a, b) => new Date(b.frontMatter.date) - new Date(a.frontMatter.date))
}

export async function getTags() {
  const posts = await getPosts()
  const tags = posts.flatMap(post => post.frontMatter.tags)
  return tags
}

import Link from 'next/link'
import { PostCard } from 'nextra-theme-blog'
import { getPosts, getTags } from './get-posts'

export const metadata = { title: 'Posts' }

export default async function PostsPage() {
  const tags = await getTags()
  const posts = await getPosts()
  const allTags = Object.create(null)

  for (const tag of tags) {
    allTags[tag] ??= 0
    allTags[tag] += 1
  }

  return (
    <div data-pagefind-ignore="all">
      <h1>{metadata.title}</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
        {Object.entries(allTags).map(([tag, count]) => (
          <Link key={tag} href={`/tags/${tag}`} className="nextra-tag">
            {tag} ({count})
          </Link>
        ))}
      </div>
      {posts.map(post => (
        <PostCard key={post.route} post={post} />
      ))}
    </div>
  )
}

import { PostCard } from 'nextra-theme-blog'

import { PostCard } from 'nextra-theme-blog'
import { getPosts, getTags } from '../../posts/get-posts'

export async function generateMetadata(props) {
  const params = await props.params
  return {
    title: `Posts Tagged with "${decodeURIComponent(params.tag)}"`
  }
}

export async function generateStaticParams() {
  const allTags = await getTags()
  return [...new Set(allTags)].map(tag => ({ tag }))
}

export default async function TagPage(props) {
  const params = await props.params
  const { title } = await generateMetadata({ params })
  const posts = await getPosts()

  return (
    <>
      <h1>{title}</h1>
      {posts
        .filter(post =>
          post.frontMatter.tags.includes(decodeURIComponent(params.tag))
        )
        .map(post => (
          <PostCard key={post.route} post={post} />
        ))}
    </>
  )
}

import { getPosts } from '../posts/get-posts.js'

const CONFIG = {
  title: 'My Blog',
  siteUrl: 'https://your-domain.com',
  description: 'Latest posts from my blog',
  lang: 'en-us'
}

export async function GET() {
  const allPosts = await getPosts()

  const items = allPosts
    .map(
      post => `    <item>
        <title>${post.title}</title>
        <description>${post.frontMatter.description}</description>
        <link>${CONFIG.siteUrl}${post.route}</link>
        <pubDate>${new Date(post.frontMatter.date).toUTCString()}</pubDate>
    </item>`
    )
    .join('\n')

  const xml = `<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
  <channel>
    <title>${CONFIG.title}</title>
    <link>${CONFIG.siteUrl}</link>
    <description>${CONFIG.description}</description>
    <language>${CONFIG.lang}</language>
${items}
  </channel>
</rss>`

  return new Response(xml, {
    headers: { 'Content-Type': 'application/rss+xml' }
  })
}

import { Comments } from 'nextra-theme-blog'

export default function CommentsLayout({ children }) {
  return (
    <>
      {children}
      <Comments lang="en" appId="your-cusdis-app-id" />
    </>
  )
}

import { ThemeSwitch } from 'nextra-theme-blog'

<ThemeSwitch />

app/
├── layout.jsx              ← Root layout with Layout, Navbar, Footer
├── page.mdx                ← Homepage / about page
├── mdx-components.js       ← Re-exports useMDXComponents
├── posts/
│   ├── get-posts.js        ← getPosts() and getTags() helpers
│   ├── page.jsx            ← /posts listing page
│   ├── my-first-post.mdx   ← Individual post
│   └── (with-comments)/
│       ├── layout.jsx      ← Adds <Comments> to matching posts
│       └── another-post.mdx
├── tags/
│   └── [tag]/
│       └── page.jsx        ← /tags/:tag filtered listing
└── rss.xml/
    └── route.js            ← RSS 2.0 feed generator