MDX

With Nextra, all your .md and .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.

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:

Heading

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:

💡

Give Nextra (opens in a new tab) a star!