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
    Socials
    If you like my content then do follow me on Twitter Shubham Verma

    11

    This website collects cookies to deliver better user experience

    The easiest way to write Markdown in NextJS!!