Markdown

MDX

With Nextra, all your .mdx files under the content 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(prev => prev + 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.