When developing a website, it's common to need to load and display content dynamically. One popular way to manage content is by using Markdown files, which offer a simple and readable format for writing structured text. In this blog post, we'll explore how to read Markdown files in a Next.js project and display their content on a web page.
Why Use Markdown?
Markdown is a lightweight markup language that allows you to write rich text using a plain text editor. It's widely used for documentation and content management because it's easy to read and write. Some of its features include:
Headings: Created with # symbols.
Bold: Denoted by wrapping text in double underscores (__).
Italic: Denoted by wrapping text in single underscores (_).
Lists: Created by prefixing items with *.
Setting Up the Project
To begin, let's organize our project by creating a folder structure for our Markdown content. We'll create a content/reviews directory to store our review files.
mkdir -p content/reviewsNext, we'll create a Markdown file for a game review. For example, let's create stardew-valley.md with the following content:
# Stardew Valley Review
## Overview
Stardew Valley is a farming simulation game with __engaging__ gameplay and _charming_ graphics.
## Features
- Relaxing gameplay
- Extensive farming options
- Community building
## Conclusion
A must-play for fans of farming simulators.Reading the Markdown File
To read the Markdown file and display its content in a React component, we'll take advantage of Next.js's Server Components. These components run on the server, allowing us to use Node.js modules like fs (file system) to read files.
First, let's import the necessary modules and set up our component:
// app/StardewValleyPage.jsx
import { readFile } from 'node:fs/promises';
import Heading from '@/components/Heading';
export default async function StardewValleyPage() {
const filePath = './content/reviews/stardew-valley.md';
const text = await readFile(filePath, 'utf8');
return (
<>
<Heading>Stardew Valley</Heading>
<img src="/images/stardew-valley.jpg" alt="Stardew Valley" width="640" height="360" className="mb-2 rounded" />
<div dangerouslySetInnerHTML={{ __html: text }} />
</>
);
}Explanation of the Code
Importing readFile: We import the readFile function from node:fs/promises to read the Markdown file asynchronously.
Defining the Component: We define an asynchronous React Server Component called StardewValleyPage.
Reading the File: We use await readFile(filePath, 'utf8') to read the Markdown file's content as a string.
Displaying Content: We use the dangerouslySetInnerHTML prop to inject the Markdown content into the component. (Note: This is a simple example; in a real-world scenario, you would convert Markdown to HTML safely before rendering.)
Converting Markdown to HTML
To properly render Markdown content as HTML, we should convert the Markdown text to HTML. We can use a library like marked for this purpose.
First, install the marked library:
npm install markedThen, update the component to convert the Markdown text to HTML:
// app/StardewValleyPage.jsx
import { readFile } from 'node:fs/promises';
import { marked } from 'marked';
import Heading from '@/components/Heading';
export default async function StardewValleyPage() {
const filePath = './content/reviews/stardew-valley.md';
const markdown = await readFile(filePath, 'utf8');
const htmlContent = marked(markdown);
return (
<>
<Heading>Stardew Valley</Heading>
<img src="/images/stardew-valley.jpg" alt="Stardew Valley" width="640" height="360" className="mb-2 rounded" />
<div dangerouslySetInnerHTML={{ __html: htmlContent }} />
</>
);
}Explanation of the Update
Importing marked: We import the marked library, which converts Markdown text to HTML.
Converting Markdown: We use marked(markdown) to convert the Markdown content to HTML before rendering it.
Conclusion
By following these steps, you can read Markdown files in a Next.js project and display their content on your web pages. This approach keeps your content organized and separate from your presentation logic, making it easier to manage and update.
Markdown's simplicity and readability, combined with Next.js's powerful server-side capabilities, provide a robust solution for dynamic content management. Happy coding!
Comments