Simple Markdown Rendering in React

By: O Wolfson

Check out this simple tutorial on how to create a Markdown page using a server component in React. Using Next.js 14 here. See the app deployed here.

Assuming you have a Next.js project created, install react-markdown for parsing Markdown content.

npm install react-markdown

Create a React Server Component:

Inside the app directory, create a new page.tsx

import ReactMarkdown from "react-markdown";

// Define CSS styles as a constant
const styles = `
  /* Add your CSS styles here */
  h1 {
    font-size: 32px;
    font-weight: bold;
  h2 {
    font-size: 24px;
    font-weight: bold;
  p {
    font-size: 18px;
  ul {
    list-style-type: square;
    margin-left: 20px;
  li:hover {
    color: orange; /* Change color on hover */
    cursor: pointer; /* Optional: Change cursor to pointer on hover */

const content = `## My Markdown Content

This is some **bold** text.

- List item 1
- List item 2
- List item 3

export default function MarkdownPage() {
  return (
      {/* Use the styles constant */}
      <h1>My Markdown Blog</h1>

Start the Development Server: Run the following command in your terminal to start the Next.js development server:

npm run dev

That's it! You've created a Markdown page using a React server component in Next.js. You can modify the content variable with your Markdown content and customize the CSS styles as needed.