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.
yarn add @next/mdx @mdx-js/loader
OR
npm install --save @next/mdx @mdx-js/loader
Configuration
- In our
next.config.js, add the following
const withMDX = require("@next/mdx")({
extension: /\.mdx$/,
});
module.exports = withMDX({
pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});
Usage
Now we can create an index.mdx file in our src/pages
<!-- 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
Output
Top comments (0)