The easiest way to write Markdown in NextJS!!

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

---

References

• NextJS PageExtensions
• MDXJS
• MDX and NextJS

---

Socials

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