Using react-markdown in Next.js + Supabase Projects

Published: Apr 22, 2025, 11:02 AM

This guide will walk you through the complete process of fetching Markdown content from a Supabase database and rendering it on the frontend using the react-markdown library in a Next.js (App Router) project.

Goals

• Store blog post content in Markdown format in Supabase database
• Fetch Markdown data in Next.js pages (server components)
• Safely render Markdown strings into formatted HTML using react-markdown
• (Optional) Support GitHub Flavored Markdown (GFM) and code syntax highlighting
• Provide suggested methods for inputting/uploading content to Supabase

Tech Stack

• Next.js (App Router)
• Supabase (Database + JS Client - @supabase/ssr, @supabase/supabase-js)
• react-markdown (Markdown rendering library)
• remark-gfm (GFM support plugin)
• rehype-highlight & highlight.js (optional, for code block syntax highlighting)
• Tailwind CSS + @tailwindcss/typography (recommended for Markdown styling)

Step 1: Prerequisites and Installation

Supabase Setup

• Ensure you have a Supabase project
• Confirm you have a posts table with at least one text type column (e.g., content) for storing raw Markdown
• Your Next.js project has Supabase client configured

Install Dependencies

npm install react-markdown remark-gfm rehype-highlight highlight.js
# or
yarn add react-markdown remark-gfm rehype-highlight highlight.js

Required packages:

• react-markdown: Core rendering library
• remark-gfm: Plugin for GitHub Flavored Markdown support
• rehype-highlight: Plugin for code block syntax highlighting
• highlight.js: Core library required by rehype-highlight

Step 2: Uploading Markdown Content

Choose from these approaches:

Method A: Admin Dashboard (Recommended)

• Create protected admin pages for content management
• Use Server Actions for form handling
• Implement proper validation and error handling

Method B: Supabase Studio

• Direct database input through Supabase interface
• Suitable for quick testing and small content volumes

Method C: Standalone Script

• Process local .md files
• Use Node.js script for bulk uploads
• Enable version control for content

Step 3: Fetching Content

// app/blog/[slug]/page.tsx
import { createClient } from '@/utils/supabase/server';
import { notFound } from 'next/navigation';

async function getPost(slug: string) {
  const supabase = createClient();
  const { data: post, error } = await supabase
    .from('posts')
    .select('title, content, published_at')
    .eq('slug', slug)
    .maybeSingle();

  if (error) console.error("Error fetching post:", error);
  if (!post) notFound();

  return post;
}

Step 4: Rendering Content

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);

  return (
    <article className="prose lg:prose-xl dark:prose-invert">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeHighlight]}
      >
        {post.content}
      </ReactMarkdown>
    </article>
  );
}

Step 5: Styling

• Use Tailwind Typography plugin (recommended)
• Import highlight.js theme for code highlighting
• Customize styles as needed

Key Takeaways

• Choose appropriate content management workflow
• Implement secure server-side data fetching
• Use proper plugins for enhanced Markdown features
• Apply consistent styling through Tailwind or custom CSS