Shubham Verma
Shubham Verma | Blogs

Shubham Verma | Blogs

The easiest way to write Markdown in NextJS!!

The easiest way to write Markdown in NextJS!!

Shubham Verma

Published on Jun 29, 2021

1 min read

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

 
Share this