MDX-Based Blog with Next.js

Building a modern blog that is rich in content has never been easier, thanks to MDX and Next.js. With MDX, you can mix Markdown and React components effortlessly, making your blog more interactive and flexible. Whether you're a developer sharing technical insights or a writer who loves well-structured content, Next.js with MDX gives you the best of both worlds, fast performance, server-side rendering, and static site generation. In this guide, I'll walk you through setting up an MDX-powered blog with Next.js so you can create a dynamic, customizable blogging experience with ease.

Prerequisites

You need to have some dependencies for this project:

Next.js: React framework for building web applications.
Tailwind CSS: CSS framework for rapidly building custom designs.
Next MDX Remote: For rendering MDX content in Next.js.
Remark GFM: For parsing GitHub Flavored Markdown in MDX.
Gray Matter: For extracting front matter from markdown files.

Setting Up Next.js

First, you need to create a new Next.js (App Router) project by running the following command:

While installing Next.js, you'll be prompted with some questions to configure your project. Here are the recommended answers but feel free to customize them based on your preferences:

Installing Dependencies

After setting up the Next.js project, navigate to the project directory and install the required dependencies:

Configuring MDX File

Create a new directory named content in the root of your project. Inside the content directory, you can put all your blog posts in MDX format.

Once you've created the content directory, add the following content to the my-first-post.mdx file:

Reading MDX Files using File System API

Now, you need to list all the MDX files from the content directory. To achieve this, you need to use the Node.js File System API.

Navigate to the app/page.tsx file and add the following code:

Now, you need to list all the MDX files from the content directory:

The getBlogPosts function will read each file from the content directory, parse the content of each MDX file using the gray-matter package and then return an array of posts.

Next, you need to display the list of blog posts on the page to do this, update the app/page.tsx file with the following code:

Now you have a list of blog posts. Clicking on a post will take you to the post page, where you can render the full content of the post.

http://localhost:3000

Rendering MDX Content using File System API

To render the content of each blog post, we need to read the content of the MDX file and render it using next-mdx-remote package.

First, create a new directory named [slug] in the app directory and then create a new file named page.tsx inside the [slug] directory.

Next, you need to build the structure of the blog post page by adding the following code to the app/[slug]/page.tsx file:

Next, you need to configure the next-mdx-remote to render the MDX content.

Next, you need to read the content of the MDX file and render it using next-mdx-remote.

Now you can render the content of each blog post on the post page. The readMdxFile function reads the content of the MDX file based on the slug and returns the content to be rendered using next-mdx-remote. It then displays the full content of the post on the post page.

http://localhost:3000/my-first-post

Styling the Blog with Tailwind CSS Typography

To style the blog posts, you can use Tailwind CSS Typography. First, install the @tailwindcss/typography plugin:

Next, add the @tailwindcss/typography plugin to the tailwind.config.ts file:

Now you can use the typography styles provided by @tailwindcss/typography to style the blog posts. Update the app/[slug]/page.tsx file with the following code:

The prose class provided by @tailwindcss/typography applies typography styles to the content of the blog post, making it more readable and visually appealing.