Markdown import

Import of markdown file

import External from '@app/_components/external.mdx'
 
<External />

Import of another page

You can also import complete pages:

import IndexPage from '../../index.mdx'
 
<IndexPage params={props.params} />

Nextra Doc Template

import nextra from 'nextra'
 
const withNextra = nextra({
  defaultShowCopyCode: true,
  latex: true
})
 
export default withNextra({
  // Your Next.js config
})

export function useMDXComponents(components) {
  return {
    // Customize MDX components
    ...components,
  }
}

{
  "dependencies": {
    "next": "^15.0.0",
    "nextra": "^4.4.0",
    "nextra-theme-docs": "^4.4.0"
  }
}

Nextra is a powerful static site generation framework built on top of Next.js that enables you to create beautiful, content-focused websites with Markdown and MDX. It combines the full power of Next.js with the simplicity of Markdown to deliver exceptional developer and user experiences.

Overview

// pages/_app.js
import { NextraTheme } from 'nextra-theme-docs'
 
export default function App({ Component, pageProps }) {
  return (
    <NextraTheme>
      <Component {...pageProps} />
    </NextraTheme>
  )
}

// content/getting-started.mdx
---
title: Getting Started
---
 
# Welcome to Nextra
 
Start building your documentation site with just a few files.
 
## Features
 
- 📝 Write in Markdown or MDX
- 🎨 Built-in beautiful themes
- 🔍 Full-text search
- 🌙 Dark mode support

Nextra leverages Next.js’s file-based routing system, automatically creating pages from your Markdown files. Each .mdx file in your content directory becomes a route, with frontmatter for metadata and full MDX support for interactive components.

Features

With Nextra, you get a comprehensive set of features designed for modern documentation and content websites:

• Zero-config setup for most common documentation needs
• MDX-powered content with React component support
• Automatic TypeScript types for your content
• Built-in search with Pagefind integration
• Internationalization support out of the box
• SEO optimized with proper meta tags and structure
• Performance focused with Next.js optimizations
• Fully customizable themes and components

Nextra provides everything you need to build professional documentation sites:

• File-based routing with Next.js App Router
• Automatic syntax highlighting with Shiki
• Optimized images and links with Next.js components
• Responsive design with Tailwind CSS
• Accessibility (a11y) as a top priority
• Hybrid rendering (SSR, SSG, ISR) support
• Custom component integration
• LaTeX math equation support
• Mermaid diagram support
• And much more

Community

Nextra is created and maintained by Shu Ding  and the open source community. It’s trusted by thousands of developers and companies for their documentation needs.

Join the growing community of Nextra users and contributors! Feel free to ask questions, share your projects, or contribute to the development on GitHub Discussions .

Built with ❤️ using Nextra itself.