How We Set Up Our Blog with Nextra 4

We’re excited to launch the Evermuse blog! In this first post, we’ll share how we integrated Nextra 4 into our existing Next.js application to create a modern, performant blog that aligns perfectly with our product’s design.

Why Nextra?

When deciding on a blogging solution, we had several requirements:

MDX Support - We wanted to write in Markdown while having the flexibility to embed React components
Performance - The blog needed to be as fast as our main application
Search - Built-in full-text search was essential for our readers
Theming - It needed to match our existing design system
SEO-Friendly - Great metadata handling and static generation

Nextra 4 checked all these boxes and more.

The Setup Process

1. Installing Dependencies

First, we installed Nextra and the blog theme:

npm install nextra nextra-theme-blog @next/mdx @mdx-js/loader @mdx-js/react

2. Configuring Next.js

We updated our next.config.mjs to include Nextra:

import nextra from 'nextra'
 
const withNextra = nextra({
  // Nextra configuration options
})
 
// Add turbopack configuration for MDX
const nextConfig = {
  turbopack: {
    resolveAlias: {
      'next-mdx-import-source-file': './mdx-components.tsx'
    }
  },
  // ... rest of your config
}
 
// Wrap our existing Next.js config
export default withNextra(nextConfig)

3. Creating the MDX Components File

A critical step is creating the mdx-components.tsx file in the root directory:

import { useMDXComponents as getThemeComponents } from 'nextra-theme-blog'
import type { MDXComponents } from 'mdx/types'
 
const themeComponents = getThemeComponents ? getThemeComponents({}) : {}
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...themeComponents,
    ...components,
  }
}

4. Creating the Blog Layout

We created a custom layout in app/blog/layout.tsx that integrates Nextra’s blog theme components:

import { Footer, Layout, Navbar } from 'nextra-theme-blog'
import { Head } from 'nextra/components'
import { getPageMap } from 'nextra/page-map'
import 'nextra-theme-blog/style.css'
 
export default async function BlogLayout({ children }) {
  const pageMap = await getPageMap()
  
  return (
    <html lang="en" suppressHydrationWarning>
      <Head backgroundColor={{ dark: '#0f172a', light: '#ffffff' }} />
      <body>
        <Layout>
          <Navbar pageMap={pageMap} />
          {children}
          <Footer>
            {/* Custom footer content */}
          </Footer>
        </Layout>
      </body>
    </html>
  )
}

Key Features We Love

Full-Text Search

Nextra provides built-in search functionality that indexes all our blog content automatically. Readers can quickly find the information they need.

Syntax Highlighting

Code blocks are automatically highlighted with support for multiple languages:

def analyze_customer_feedback(feedback):
    """Analyze customer feedback using AI"""
    insights = ai_model.analyze(feedback)
    return {
        'sentiment': insights.sentiment,
        'key_topics': insights.topics,
        'recommendations': insights.recommendations
    }

MDX Flexibility

We can embed React components directly in our posts, making content more interactive and engaging.

Static Generation

All blog posts are statically generated at build time, ensuring fast load times and excellent SEO performance.

Troubleshooting Common Issues

Module Resolution Error

If you encounter the error Module not found: Can't resolve 'next-mdx-import-source-file', ensure:

Your mdx-components.tsx file exists in the root directory
The turbopack configuration in next.config.mjs includes the proper path resolution
All MDX-related dependencies are installed

Styling Issues

Make sure to import the blog theme styles in your layout:

import 'nextra-theme-blog/style.css'

What’s Next?

Now that our blog is live, we’re excited to share more content with you! Expect posts about:

Product Management Best Practices - How to effectively gather and analyze customer feedback
AI in Product Development - Leveraging AI to make better product decisions
Customer Insights - Deep dives into understanding user behavior
Technical Tutorials - How to integrate Evermuse into your workflow
Case Studies - Real-world examples of successful product improvements

Conclusion

Setting up Nextra 4 with our Next.js application was straightforward once we understood the configuration requirements. We now have a powerful, flexible blog that integrates seamlessly with our existing infrastructure.

The key to success was properly configuring the mdx-components.tsx file and ensuring the turbopack resolver could find it. With these pieces in place, Nextra handles everything else beautifully.

Stay tuned for more posts as we share our journey in helping product teams build better products through AI-powered customer insights!

Have questions about our setup or want to share your own Nextra experience? Contact us - we’d love to hear from you!