Using react-markdown in Next.js + Supabase Projects

Next.jsSupabaseMarkdown

Published Apr 22, 2025

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

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

Step 4: Rendering Content

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