MDX in Next JS

MDX is a lightweight markup language used to format text. It allows you to write using plain text syntax and convert it to structurally valid HTML. It’s commonly used for writing content on websites and blogs.

In this article we will see more about MDX in Next JS

What is MDX?

MDX stands for Multidimensional Expressions. It is a markup language that allows you to write programs and information in the same file. It is a superset of markdown and is used to add React Components. It is commonly used to create blogs, documentation, and portfolio websites. Metadata in an MDX increases the discoverability and performance of the application. Next.js supports local and remote MDX files and automatically processes them. We need to install the required dependencies that support MDX and configure them in the application.

Features of MDX in Next JS

• It provides a syntax for text formatting and a smooth experience while creating blogs, documents
• It allows you to write JSX directly in the markdown file and add plugins to it.
• With Mdx we can add interactive components and increase user engagement.
• Next.js easily integrates with the local MDX files and remote MDX files fetched from the server.
• MDX in next.js supports client-side hydration for functionality and interactivity of react components.

Syntax:R

For Heading

#  Heading1
## Heading2
###  Heading3  

Bold

 ** Bold**

Blockquote

> Blockquote

Italics

_Element_

Steps to use MDX in Next JS

Step 1: To create your app, run the following npx command in your terminal to start the creation process:

npx create-next-app@latest mdx-next
cd  mdx-next

Step 2: Provide the necessary details to create your app as shown in the image below.

Step to create a Project

Folder Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@mdx-js/loader": "^3.0.1",
    "@mdx-js/react": "^3.0.1",
    "@next/mdx": "^14.1.0",
    "@types/mdx": "^2.0.11",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18"
},
"devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
}

Step 3: To start the application run the following command.

npm run dev

Step 4: Configure the next.config.js file to support the various types of extension.

//next.config.js

import mdx from "@next/mdx";

const withMDX = mdx();

const nextConfig = {
    // Configure `pageExtensions` to include MDX files
    pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],

};

export default withMDX(nextConfig);

Example 1: Illustration of the local MDX file.

Javascript

//about.mdx

<style jsx-global>{`
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
  }


  .mdx-content {
    color:green;
    text-align: center;
    width: 100%;
    padding: 10px;
  }
  button{
    background-color:red;
  }

`}</style>

<div className="mdx-content">

# Welcome to MDX

<br />
## Heading 2
<br />
### Heading 3
<br />
#### Heading 4
<br />
##### Heading 5
<br />
###### Heading 6
<br />
Paragraph 1 Lorem ipsum, dolor sit
<br />
> Blockquote
<br />
This is some **bold** and _italics_ text.

</div>

CSS

/* global.css */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    color: rgb(255, 255, 255);

}

Output:

MDX NextJs

Explanation of output:

• Run the application and change the URL to http://localhost:3000/about ,mdx components will be rendered.
• The file contains the MDX componenets along with the CSS to style the mdx components.
• Global styles are applied to the components of the MDX through global.css

Example 2: Illustration of the JSX components in the MDX file

Create a project using the above steps and create a new folder named as components. In component folder add new file named as MyComponent.js

Javascript

// about.mdx

import MyComponent from "../components/MyComponent";

<style jsx-global>{`
  .mdx-content {
    color:green;
    text-align: center;

  }
  button{
    font-weight:bold;
    background-color:cyan;
  }

`}</style>

<div className="mdx-content">
//React Component
<MyComponent/>
</div>

Javascript

//MyComponent.js

export default function MyComponent() {
    return (
        <div>
            <h1>React Tutorial</h1>
            <p>
                React is one of the most popular, efficient, and powerful open-source
                JavaScript library for building dynamic and interactive user interfaces.
                Whether you are a beginner or an experienced developer, React Tutorial
                will significantly enhance your development skills. React JS is not a
                framework, it is just a library developed by Facebook.
            </p>
            <h3>ReactJS Advantages</h3>
            <ul>
                <li>
                    Composable: We can divide these codes and put them in custom
                    components. Then we can utilize those components and integrate them
                    into one place.
                </li>
                <li>
                    Declarative: In ReactJS, the DOM is declarative. We can make
                    interactive UIs by changing the state of the component and ReactJS
                    takes care of updating the DOM according to it.
                </li>
            </ul>

            <button onClick={() => alert()}> Lets Start</button>
        </div>
    );
}

CSS

/*global.css */

html,
body {
    margin-top: 0%;
    align-items: center;
    max-width: 100vw;
    line-height: 1.2;
}

h2,
p,
li {
    margin: 0.6rem;
    text-align: justify;
    padding: 0.2rem;
}

Output:

Output