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

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