In this short blog, I’ll show you how you can write Markdown in NextJS using MDX.

Installation

• Before getting starting, I assume you have already initialized a NextJS project.

1
yarn add @next/mdx @mdx-js/loader
Copy

OR

1
npm install --save @next/mdx @mdx-js/loader
Copy

---

Configuration

• In our next.config.js, add the following

1
2
3
4
5
6
7
const withMDX = require('@next/mdx')({
  extension: /\.mdx$/
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
})
Copy

---

Usage

Now we can create a index.mdx file in our src

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- src/pages/index.mdx -->

# This is a Markdown Syntax

## React starts from here

import { useState } from "react";

export const Home = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Count {count} </h1>
      <button onClick={() => setCount((prev) => prev + 1)}> Increment </button>
    </div>
  );
};

<Home />

## React ends here

## I can continue to write Markdown here
Copy

---

Output

---

References

• NextJS PageExtensions
• MDXJS
• MDX and NextJS

---

Socials

If you like my content then do follow me on Twitter Shubham Verma