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 renders every .mdx file in your content directory using MDX — an advanced Markdown format that lets you embed React components directly inside your prose. On top of standard MDX, Nextra ships with GitHub Flavored Markdown (GFM), alert syntax, frontmatter parsing, and custom heading IDs out of the box.

​
MDX

MDX gives you the full power of React inside Markdown. You can import components at the top of any .mdx file and use them inline, just like JSX: 
## Hello MDX

import { useState } from 'react'

export function Counter({ children }) {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      {children}
      {count}
    </button>
  )
}

<Counter>**Clicks**: </Counter>
You can also import components defined elsewhere in your project: 
import { MyChart } from '../components/my-chart'

## Sales Report

Here is the chart for Q3:

<MyChart year={2024} quarter={3} />
Any valid JSX is valid inside an .mdx file. You can use export to define helper components inline or import to bring in external ones.

​
GitHub Flavored Markdown

GFM is a Markdown extension created by GitHub that adds strikethrough, task lists, tables, autolinks, and more. Nextra enables GFM by default — no extra configuration required.

​
Strikethrough

Use double tildes to strike through text: 
~~removed~~
Renders as: removed

​
Task Lists

Create interactive-looking checklists with - [x] (checked) and - [ ] (unchecked): 
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

​
Tables

Use pipe characters to define columns, and colons in the separator row to control alignment: 
| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |
Left-aligned (:---), center-aligned (:---:), and right-aligned (---:) columns are all supported. Bare URLs are automatically converted into clickable links: 
Visit https://nextjs.org.
Renders as: Visit https://nextjs.org.

​
GitHub Alert Syntax

Nextra supports GitHub’s blockquote-based alert syntax for callout blocks. Use > [!TYPE] followed by your content: 
> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!CAUTION]
> Negative potential consequences of an action.
The five alert types map to distinct visual styles so readers can quickly identify the intent of each callout.

​
Frontmatter

Every .mdx file can include a YAML frontmatter block between --- delimiters at the very top. Nextra reads this block and exposes it to your theme: 
---
title: My Page Title
description: A short summary shown in search results and meta tags.
---

# Page content starts here
The title and description frontmatter keys are used by nextra-theme-docs to set the page’s <title> tag and Open Graph metadata automatically.

​
Custom Heading IDs

By default, Nextra generates anchor IDs from heading text (e.g., ## Long Heading becomes #long-heading). You can override this with a custom ID by appending [#your-id] after the heading text: 
## Long heading about Nextra [#about-nextra]
In this example, the heading link becomes #about-nextra instead of the default #long-heading-about-nextra. This is useful when you want stable, short URLs even if the heading text changes over time.
Custom heading IDs are especially valuable for headings that appear in external links, since renaming the heading text won’t break the anchor.

Build docs developers (and LLMs) love

Get started for freeTalk to us