Member-only story
Getting Started with Blog using MDX in Next.js
Create your first blog page using the MDX extension
Published in
4 min readMar 18, 2021
What is an MDX extension?
MDX is known as MarkDown Extension, an extension to embed JSX and simple text on a page. MDX is another form of file like .js, .ts which comes with extended functionality like fast compilation as compilation occurs on build time, default export as a whole component, writing long-form as a simple component and so on.
You can read more about MDX here => https://mdxjs.com/Installation
- We will use Next.js repository => https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/MaterialUIInstallationWithNextJS
- Add Next JS loaders for mdx to instil inbuilt support for this extension.
- Configure the Next.js configuration file for loaders to work on.
- Defining the exported components in the MDX extension
- Import and render the MDX components.
Step 1
Add the following loaders using the yarn or npm. These loaders you need for next to understand and read an MDX file.
yarn add @next/mdx @mdx-js/loader
