MDX

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

You can use import and use React components inside your Markdown files like this:

import { Callout } from 'nextra/components'
 
**Markdown With React Components**
 
<Callout emoji="✅">
  **MDX** (the library), at its core, transforms MDX (the syntax) to JSX. It
  receives an MDX string and outputs a _JSX string_. It does this by parsing the
  MDX document to a syntax tree and then generates a JSX document from that
  tree.
</Callout>

Generates:

Markdown With React Components

Headings

Hello, This Is a Title Inside h1

Hello, This Is a Title Inside h2

Hello, This Is a Title Inside h3

Hello, This Is a Title Inside h4

Hello, This Is a Title Inside h5

Hello, This Is a Title Inside h6

List

1. one
2. two
3. three

• one
• two
• three

Task List

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

Renders

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

Syntax Highlighting

Automatic syntax highlighting

```js
console.log('hello, world')
```

Renders:

console.log('hello, world')

You can also add the {line|range} modifier to highlight specific lines:

```jsx {4,6-8}
import useSWR from 'swr'
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
```

import useSWR from 'swr'
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Inline Code

You can use `content` to wrap inline code content like: let x = 1.

Blockquote

Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.

— Alan Kay, A Personal Computer for Children of All Ages

Nested quotes:

Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.

— Alan Kay, A Personal Computer for Children of All Ages

This is great.

— Shu Ding.

Table

React Components

React components and Markdown can be mixed together, for instance:

<Callout>Give [**Nextra**](https://github.com/shuding/nextra) a star!</Callout>

Renders: