DEV Community

Cover image for The easiest way to write Markdown in NextJS!!
Shubham Verma
Shubham Verma

Posted on • Originally published at blogs.shubhamverma.me

The easiest way to write Markdown in NextJS!!

#react #nextjs #programming

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
Enter fullscreen mode Exit fullscreen mode

OR

npm install --save @next/mdx @mdx-js/loader
Enter fullscreen mode Exit fullscreen mode

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"], });
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Output

Output.gif

References

Socials

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

Top comments (0)