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 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:
import { useState } from 'react'
export function Counter({ children }) { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>{children}{count} }
<h2>Hello MDX</h2>
<Counter>**Clicks**: </Counter>
Besides basic MDX, Nextra also has some advanced Markdown features built-in.
GFM is an extension of Markdown, created by GitHub, that adds support for strikethrough, task lists, tables, and more.
removed
~~removed~~
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
Syntax | Description | Test Text |
---|---|---|
Header | Title | Here's this |
Paragraph | Text | And more |
Strikethrough |
| Syntax | Description | Test Text |
| :------------ | :---------: | ----------: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
| Strikethrough | | ~~Text~~ |
Visit https://nextjs.org.
Visit https://nextjs.org.
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
.