Creating a dynamic blog with rich content, including images and videos, has become an integral part of modern web development. Next.js 14 offers a powerful way to achieve this using Markdown (MDX). In this article, we'll explore how to render MDX content in a Next.js 14 application, focusing on a blog page example. We'll also delve into the associated styling to ensure a seamless and visually appealing user experience.
You are currently reading a blog post created in MDX format on MDXBlog.io. Read on for a detailed explanation of the code and styling behind this blog post.
Open the code in github here. We'll ask you to pay particular attention to this blog page code, which is responsible for rendering the MDX files. See a sample MDX formatted post at the bottom of this page.
Read on for the explanation below.
Understanding MDX and Its Integration in Next.js
MDX is an extension of Markdown that allows you to use JSX directly in your markdown files. This powerful combination enables the embedding of interactive components like YouTube videos and custom code blocks within your content.
In our example, we use next-mdx-remote/rsc for rendering MDX content. This package converts MDX into a format that Next.js can understand, enabling us to include dynamic JSX components within our Markdown.
Setting Up the Blog Page Component
The BlogPage component is responsible for rendering individual blog posts. This component fetches the content of a specific post based on the URL slug and uses MDXRemote to render the MDX content.
Fetching and Preparing the Content
The getPost function is called with params, which contains the slug of the post. This function reads the MDX file corresponding to the slug, parses its front matter (metadata like title, author, and date), and returns it along with the MDX content.
Custom MDX Components
In our setup, we define a custom components object. This object maps specific MDX elements to React components, allowing for enhanced customization. For example, pre tags are mapped to a custom Code component for syntax highlighting, and YouTube and Image components are used for embedding videos and images.
Styling the Blog Page
The styling is defined in globals.css.
Conclusion
Rendering MDX content in a Next.js 14 application provides a flexible and powerful way to build interactive and visually appealing blog pages. By combining MDX with custom React components and Tailwind CSS for styling, developers can create rich, dynamic content experiences that are both responsive and engaging.
The integration of next-mdx-remote/rsc simplifies the process of rendering MDX content, while the use of custom components and detailed CSS styling ensures that the content is not only functional but also visually striking. This approach to building blog pages in Next.js 14 opens up a world of possibilities for content creators and developers alike.
References
Sample MDX
---
id: "539fea51-60ac-4afe-a145-c8db4ec96492"
type: "blog"
author: "O Wolfson"
title: " Rendering MDX Content in Next.js 14"
date: "2023-12-22"
description: "Creating a dynamic blog with rich content, including images and videos, has become an integral part of modern web development. Next.js 14 offers a powerful way to achieve this using Markdown (MDX). "
categories:
- Web Development
tags:
- mdx
- rendering
- next.js
image: "/images/default.jpg"
path: "rendering-mdx-content-in-next.js-14.mdx"
---
Creating a dynamic blog with rich content, including images and videos, has become an integral part of modern web development. Next.js 14 offers a powerful way to achieve this using Markdown (MDX). In this article, we'll explore how to render MDX content in a Next.js 14 application, focusing on a blog page example. We'll also delve into the associated styling to ensure a seamless and visually appealing user experience.
You are currently reading a blog post created in MDX format on MDXBlog.io. Read on for a detailed explanation of the code and styling behind this blog post.
Open the code in github [**here**](https://github.com/owolfdev/mdx-blog-basic). We'll ask you to pay particular attention to [**this code**](https://github.com/owolfdev/mdx-blog/blob/main/app/blog/%5Bslug%5D/page.tsx), which is responsible for rendering the MDX files. See a sample MDX formatted post here. Read on for the explanation below.
## Understanding MDX and Its Integration in Next.js
MDX is an extension of Markdown that allows you to use JSX directly in your markdown files. This powerful combination enables the embedding of interactive components like YouTube videos and custom code blocks within your content.
In our example, we use `next-mdx-remote/rsc` for rendering MDX content. This package converts MDX into a format that Next.js can understand, enabling us to include dynamic JSX components within our Markdown.
## Setting Up the Blog Page Component
The `BlogPage` component is responsible for rendering individual blog posts. This component fetches the content of a specific post based on the URL slug and uses `MDXRemote` to render the MDX content.
### Fetching and Preparing the Content
The `getPost` function is called with `params`, which contains the slug of the post. This function reads the MDX file corresponding to the slug, parses its front matter (metadata like title, author, and date), and returns it along with the MDX content.
### Custom MDX Components
In our setup, we define a custom `components` object. This object maps specific MDX elements to React components, allowing for enhanced customization. For example, `pre` tags are mapped to a custom `Code` component for syntax highlighting, and `YouTube` and `Image` components are used for embedding videos and images.
## Styling the Blog Page
The styling is defined in `globals.css`, using Tailwind CSS for utility-first styling. The CSS is organized into various layers and classes, ensuring a responsive and visually consistent design.
### Dark and Light Mode Support
The CSS includes custom properties for both dark and light modes, ensuring a comfortable reading experience regardless of user preference. The `.dark` class contains styles specific to the dark mode.
### Responsive Typography and Layout
The `.mdx` class and its child selectors (like `.mdx h1`, `.mdx p`) define the typography and spacing for the MDX content. Media queries ensure that the layout and font sizes are responsive, adapting to different screen sizes.
### Animations and Visual Effects
The `.gradient-text` and `.animated-text` classes add visual flair to the text, using gradients and animations. These are particularly useful for highlighting certain parts of the content or for decorative purposes.
## Conclusion
Rendering MDX content in a Next.js 14 application provides a flexible and powerful way to build interactive and visually appealing blog pages. By combining MDX with custom React components and Tailwind CSS for styling, developers can create rich, dynamic content experiences that are both responsive and engaging.
The integration of `next-mdx-remote/rsc` simplifies the process of rendering MDX content, while the use of custom components and detailed CSS styling ensures that the content is not only functional but also visually striking. This approach to building blog pages in Next.js 14 opens up a world of possibilities for content creators and developers alike.
## References
- [MDX](https://mdxjs.com/)
- [Next.js 14](https://nextjs.org/blog/next-14)
- [next-mdx-remote/rsc](https://www.npmjs.com/package/next-mdx-remote)
- [page code on GitHub](https://github.com/owolfdev/mdx-blog/blob/main/app/blog/%5Bslug%5D/page.tsx)
- [styling code on GitHub](https://github.com/owolfdev/mdx-blog/blob/main/app/globals.css)