Markdown

MDX

With Nextra, all your .mdx files under the pages directory will be rendered with MDX, it's an advanced Markdown format with React component support.

For example, you can use import and use React components inside your MDX files like this:

## Hello MDX
 
import { useState } from 'react'
 
export function Counter({ children }) {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      {children}
      {count}
    </button>
  )
}
 
<Counter>**Clicks**: </Counter>

Generates:

Besides basic MDX, Nextra also has some advanced Markdown features built-in.

GitHub Flavored Markdown

GFM is an extension of Markdown, created by GitHub, that adds support for strikethrough, task lists, tables, and more.

Strikethrough

removed

~~removed~~

Task List

• Write the press release
• Update the website
• Contact the media

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Table

| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |

Autolinks

Visit https://nextjs.org.

Visit https://nextjs.org.

Custom Heading Id

You can specify custom heading id using the format ## My heading [#custom-id]. For example:

## Long heading about Nextra [#about-nextra]

In this example, #about-nextra will be used as the heading link, replacing the default #long-heading-about-nextra.

Extended Syntax Highlighting

Check out the Syntax Highlighting section for more information: