Shubham Verma | Blogs

Shubham Verma | Blogs

The easiest way to write Markdown in NextJS!!

The easiest way to write Markdown in NextJS!!

Listen to this article

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

Output.gif


References


Socials

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

#reactjs#nextjs#javascript#web-development
 
Share this