MDX Tables Not Rendering in Next.js? Here's How to Solve It!

> Ever been frustrated because your MDX tables don't show up in Next.js? You're not alone!

Before I found the real solution, I even asked several AI assistants for help. But honestly? Most of the answers just went in circles—lots of theory, but no practical fix for my table problem. And almost every AI (and even some blog posts) will tell you to use MDXRemote for rendering MDX in Next.js. But here's the catch: that's exactly where the table rendering problem starts!

If you've been through the same, this article is for you: straight to the point, no more endless detours!

Want to display neat tables in your Next.js blog, but all you see is plain text? Relax, you're not the only one. This article will break down the main reasons why MDX tables often don't render in Next.js—and of course, share a proven, practical solution. Pastikan Anda sudah memahami format penulisan markdown dan cara menulis markdown dengan baik sebelum melanjutkan.

Why Do MDX Tables Often Not Show Up in Next.js?

When I first used MDX in Next.js, I was confused too. Other Markdown elements (headings, lists, etc.) rendered perfectly, but tables? Gone! My setup was standard, dependencies up to date, and I'd read the docs.

Here's my project setup:

json

1{
2  "name": "liupurnomo.com",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "dev": "next dev --turbopack",
7    "build": "next build",
8    "start": "next start",
9    "lint": "next lint"
10  },
11  "dependencies": {
12    "@mdx-js/loader": "^3.1.0",
13    "@mdx-js/react": "^3.1.0",
14    "@next/mdx": "^15.4.2",
15    "@types/mdx": "^2.0.13",
16    "framer-motion": "^12.23.5",
17    "gray-matter": "^4.0.3",
18    "lucide-react": "^0.525.0",
19    "next": "15.4.1",
20    "next-mdx-remote": "^5.0.0",
21    "next-themes": "^0.4.6",
22    "react": "19.1.0",
23    "react-dom": "19.1.0",
24    "react-hook-form": "^7.60.0",
25    "react-hot-toast": "^2.5.2",
26    "react-lite-youtube-embed": "^2.5.1",
27    "react-markdown": "^10.1.0",
28    "react-type-animation": "^3.2.0",
29    "remark-gfm": "^4.0.1"
30  },
31  "devDependencies": {
32    "@eslint/eslintrc": "^3",
33    "@tailwindcss/postcss": "^4",
34    "@types/crypto-js": "^4.2.2",
35    "@types/node": "^20",
36    "@types/react": "^19",
37    "@types/react-dom": "^19",
38    "eslint": "^9",
39    "eslint-config-next": "15.4.1",
40    "tailwindcss": "^4",
41    "typescript": "^5"
42  }
43}

Everything worked fine until I tried to add a simple table like this:

mdx

1| Header 1 | Header 2 |
2| -------- | -------- |
3| Data A   | Data B   |
4| Data C   | Data D   |

But when I refreshed the page, the table didn't show up at all! Sometimes I just saw the raw Markdown text. Meanwhile, headings, lists, and other paragraphs rendered just fine. Turns out, this is a common issue in Next.js + MDX.

---

Checked the Docs, But Tables Still Won't Show?

Here's what I tried:

Read the official Next.js MDX guide
Double-checked my App Router config
Followed discussions on GitHub and this issue
Tried various snippets and community workarounds

The result? Tables still wouldn't render! Turns out, there's one crucial step that's often missed.

The Practical Solution: The One Line Everyone Misses!

Turns out, the real key is the remark-gfm plugin. Without it, the MDX parser won't recognize GitHub Flavored Markdown (GFM) table syntax.

1. Install the Required Plugins

Depends on Next.js documentation, you need to install this dependencies:

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

Then install the remark-gfm plugin:

npm install remark-gfm next-mdx-remote

2. Make Sure You Render with compileMDX and remarkGfm

Don't just use MDXRemote—use compileMDX and add remarkGfm to mdxOptions:

tsx

1import { compileMDX } from 'next-mdx-remote/rsc';
2import remarkGfm from 'remark-gfm';
3
4const mdxResult = await compileMDX({
5  source: post.content,
6  components,
7  options: {
8    parseFrontmatter: true,
9    mdxOptions: {
10      remarkPlugins: [remarkGfm],
11    },
12  },
13});

Then render as usual:

tsx

1<div className="prose dark:prose-invert prose-lg px-4 py-12 space-y-8">
2  {mdxResult.content}
3</div>

3. Adjust your next.config.ts Too

tipescript

1import createMDX from '@next/mdx';
2import type { NextConfig } from 'next';
3import remarkGfm from 'remark-gfm';
4
5const nextConfig: NextConfig = {
6  /* config options here */
7  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
8  images: {
9    remotePatterns: [
10
11    ],
12  },
13  experimental: {
14    mdxRs: true,
15  },
16};
17
18const withMDX = createMDX({
19  options: {
20    remarkPlugins: [remarkGfm],
21  },
22  extension: /\.(md|mdx)$/,
23});
24
25export default withMDX(nextConfig);

4. Example Markdown Table That Will Definitely Render

Header 1	Header 2
Data A	Data B
Data C	Data D

Final Thoughts: Don't Give Up—The Solution is Often Simple!

So, if your MDX tables aren't showing up in Next.js:

1. Make sure remark-gfm is installed and used in compileMDX. 2. Double-check your next.config.ts and mdxOptions. 3. Use correct YAML frontmatter array and indentation.

Don't hesitate to explore, ask the community, and keep learning. Sometimes, the answer is just one line of code away!

> Did this help? Share this article with your fellow Next.js devs!

Menu

Latest posts

MDX Tables Not Rendering in Next.js? Here's How to Solve It!

Why Do MDX Tables Often Not Show Up in Next.js?

Checked the Docs, But Tables Still Won't Show?

The Practical Solution: The One Line Everyone Misses!

1. Install the Required Plugins

2. Make Sure You Render with compileMDX and remarkGfm

3. Adjust your next.config.ts Too

4. Example Markdown Table That Will Definitely Render

Final Thoughts: Don't Give Up—The Solution is Often Simple!

Comments

Why Do MDX Tables Often Not Show Up in Next.js?

Checked the Docs, But Tables Still Won't Show?

The Practical Solution: The One Line Everyone Misses!

1. Install the Required Plugins

2. Make Sure You Render with compileMDX and remarkGfm

3. Adjust your next.config.ts Too

4. Example Markdown Table That Will Definitely Render

Final Thoughts: Don't Give Up—The Solution is Often Simple!

Comments

Menu

Latest posts

Comments

Related posts

Comments

Related posts