Getting Started

Welcome to your new documentation site! This guide will help you get up and running with Nextra 4.0.

What is Nextra?

Nextra is a static site generator built on top of Next.js. It allows you to create documentation sites using Markdown and MDX (Markdown with JSX components).

Project Structure

Your Nextra project has the following structure:

├── app/
│   ├── layout.tsx          # App layout with theme
│   ├── page.mdx            # Homepage
│   ├── getting-started/
│   │   └── page.mdx        # This page
│   └── api/
│       └── page.mdx        # API docs
├── mdx-components.tsx      # MDX components configuration
├── next.config.ts          # Nextra configuration
└── package.json

Writing Content

All your documentation content goes in the app directory as .mdx files:

• Use page.mdx files for your content
• Create folders to organize your content into sections
• Use MDX to combine Markdown with React components

Example MDX

You can include React components in your MDX files:

import { Callout } from 'nextra/components'
 
<Callout type="info" emoji="ℹ️">
  This is an info callout!
</Callout>

Configuration

Edit app/layout.tsx to customize your site’s appearance, navigation, and metadata.

Development

Run the development server:

npm run dev

Your site will be available at http://localhost:3000.