Markdown

MDX

With Nextra, all your .mdx files under the pages directory will be rendered with MDX (opens in a new tab), it's an advanced Markdown format with React component support.

For example, you can use import and use React components inside your Markdown 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 (opens in a new tab) 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 (opens in a new tab).

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: