Next.js & React-Markdown: A Beginner’s Guide to Content Rendering

In the dynamic world of web development, the ability to seamlessly integrate and display content is paramount. Imagine building a blog, a documentation site, or even a product description page where the content needs to be easily updated and formatted. Manually coding HTML for every piece of text can be time-consuming and inefficient. This is where React-Markdown, a powerful npm package, comes to the rescue. This guide will take you through the process of using React-Markdown within a Next.js application, empowering you to render Markdown content effortlessly.

Why React-Markdown?

Markdown is a lightweight markup language with plain text formatting syntax. It’s incredibly easy to read, write, and convert to HTML. React-Markdown takes Markdown text and converts it into HTML components that React can render. This allows for dynamic content creation and management, making it ideal for:

• Blogs and Articles: Easily write and update blog posts using Markdown.
• Documentation: Create and maintain documentation with a clean and readable format.
• Product Descriptions: Showcase product features using Markdown’s formatting capabilities.
• User-Generated Content: Allow users to submit formatted content through Markdown.

Setting Up Your Next.js Project

Before diving into React-Markdown, you’ll need a Next.js project. If you don’t have one, create a new project using the following command in your terminal:

npx create-next-app my-markdown-app

Navigate into your project directory:

cd my-markdown-app

Next, install React-Markdown and its peer dependency, React:

npm install react-markdown react

Basic Usage of React-Markdown

Let’s create a simple component to render some Markdown. Open your pages/index.js file and replace the existing code with the following:

import ReactMarkdown from 'react-markdown';

const markdownText = `
# Hello, Next.js with React-Markdown!

This is a paragraph with **bold** text and _italic_ text.

- Item 1
- Item 2
- Item 3
`;

function HomePage() {
  return (
    <div>
      <h1>My Markdown Blog</h1>
      {markdownText}
    </div>
  );
}

export default HomePage;

Here’s what’s happening:

• We import ReactMarkdown from the react-markdown package.
• We define a markdownText variable containing a Markdown string.
• We use the ReactMarkdown component, passing the markdownText as its children.

Run your Next.js development server:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see the rendered Markdown content, including the heading, bold and italic text, and the list.

Rendering Markdown from a File

In a real-world scenario, you’ll likely want to load Markdown content from a file (e.g., a .md file). Here’s how to do that:

First, create a new directory called content in your project’s root directory. Inside the content directory, create a file named example.md with the following content:

# Example Markdown File

This content is loaded from a file.

- Point 1
- Point 2

Next, modify your pages/index.js file to read the content of example.md:

import ReactMarkdown from 'react-markdown';
import fs from 'fs';
import path from 'path';

function HomePage({ markdownContent }) {
  return (
    <div>
      <h1>My Markdown Blog</h1>
      {markdownContent}
    </div>
  );
}

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'content', 'example.md');
  const markdownContent = fs.readFileSync(filePath, 'utf8');

  return {
    props: {
      markdownContent,
    },
  };
}

export default HomePage;

Key changes:

• We import the fs (file system) and path modules from Node.js.
• We define a getStaticProps function to read the Markdown file during the build process.
• We use fs.readFileSync to read the content of the example.md file.
• We pass the Markdown content as a prop to the HomePage component.

Now, when you run your development server or build your application, the content from example.md will be rendered.

Styling Markdown with CSS

By default, React-Markdown renders HTML elements based on your Markdown syntax. You can style these elements using CSS. There are a few ways to approach this:

1. Global Styles

You can add CSS rules to your global stylesheet (e.g., styles/globals.css in your Next.js project) to style the HTML elements generated by React-Markdown.

/* styles/globals.css */
h1 {
  color: navy;
}

p {
  font-size: 16px;
}

/* style list items */
ul {
    list-style-type: square;
}

li {
    margin-bottom: 5px;
}

This will apply the styles to all rendered Markdown content throughout your application.

2. Component-Specific Styles

You can use CSS modules or styled-components to apply styles specific to a component. This is often a better approach for maintainability and preventing style conflicts.

Using CSS Modules:

Create a CSS module file (e.g., components/MarkdownStyles.module.css):

/* components/MarkdownStyles.module.css */
.heading {
  color: darkgreen;
}

.paragraph {
  font-family: sans-serif;
}

.list-item {
    margin-bottom: 8px;
}

Import the CSS module and apply the styles to your React-Markdown component:

import ReactMarkdown from 'react-markdown';
import styles from '../components/MarkdownStyles.module.css';

function HomePage({ markdownContent }) {
  return (
    <div>
      <h1>My Markdown Blog</h1>
       <h1>{children}</h1>,
          p: ({ children }) => <p>{children}</p>,
          li: ({ children }) => <li>{children}</li>,
        }}
      >
        {markdownContent}
      
    </div>
  );
}

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'content', 'example.md');
  const markdownContent = fs.readFileSync(filePath, 'utf8');

  return {
    props: {
      markdownContent,
    },
  };
}

export default HomePage;

Here, we use the components prop of ReactMarkdown to override the default rendering of specific HTML elements. We map the `h1`, `p`, and `li` tags to elements with the corresponding CSS classes from our CSS module.

3. Using a CSS Framework

If you’re using a CSS framework like Bootstrap, Tailwind CSS, or Material-UI, you can apply the framework’s classes to the rendered HTML elements. This requires a similar approach to using CSS modules, where you override the default rendering of elements with the components prop.

import ReactMarkdown from 'react-markdown';

function HomePage({ markdownContent }) {
  return (
    <div>
      <h1>My Markdown Blog</h1>
       <h1>{children}</h1>,
          p: ({ children }) => <p>{children}</p>,
        }}
      >
        {markdownContent}
      
    </div>
  );
}

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'content', 'example.md');
  const markdownContent = fs.readFileSync(filePath, 'utf8');

  return {
    props: {
      markdownContent,
    },
  };
}

export default HomePage;

In this example, we’re using Tailwind CSS classes directly within the components prop.

Adding Code Highlighting

React-Markdown itself doesn’t provide code highlighting. However, you can easily integrate a code highlighting library like Prism.js or Highlight.js.

Here’s how to use Prism.js:

1. Install Prism.js:

npm install prismjs

2. Import Prism.js and a language-specific stylesheet:

In your _app.js file (or a similar global component), import Prism.js and a CSS theme:

import '../styles/globals.css';
import 'prismjs/themes/prism-okaidia.css'; // Choose a theme
import Prism from 'prismjs';
import 'prismjs/components/prism-jsx'; // Import the languages you need

function MyApp({ Component, pageProps }) {
  return ;
}

export default MyApp;

Make sure to import the specific languages you need (e.g., jsx, javascript, css, etc.).

3. Create a custom render for code blocks:

Modify your pages/index.js file to use the components prop of ReactMarkdown to render code blocks with Prism.js:

import ReactMarkdown from 'react-markdown';
import fs from 'fs';
import path from 'path';
import Prism from 'prismjs';
import 'prismjs/themes/prism-okaidia.css';
import 'prismjs/components/prism-jsx'; // Import the languages you need

function HomePage({ markdownContent }) {
  return (
    <div>
      <h1>My Markdown Blog</h1>
       {
            const match = /language-(w+)/.exec(className || '');
            return !inline && match ? (
              <pre>
                <code>
                  {Prism.highlight(children.toString(), Prism.languages[match[1]], match[1])}
                
              

) : (

{children}

);
},
}}
>
{markdownContent}

import ReactMarkdown from 'react-markdown';
import fs from 'fs';
import path from 'path';

function HomePage({ markdownContent }) {
  return (
    <div>
      <h1>My Markdown Blog</h1>
       (
            <img src="{src}" alt="{alt}" style="{{" />
          ),
        }}
      >
        {markdownContent}
      
    </div>
  );
}

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'content', 'example.md');
  const markdownContent = fs.readFileSync(filePath, 'utf8');

  return {
    props: {
      markdownContent,
    },
  };
}

export default HomePage;