MDX Table Not Rendering in Next.js App Router

[anandhuremanan]

Summary

Hi everyone,

I'm using MDX with the App Router in Next.js and following the official documentation. However, my Markdown tables are not rendering correctly. Here’s an example of what I have in my .mdx file:

# Props Table  

| Name   | Type   | Description          |  
| ------ | ------ | -------------------- |  
| `name` | string | Name of the resource |  
| `path` | string | Path to the resource |  

Instead of rendering as a table, it just appears as plain text in a

tag.

Setup Details:
Next.js version: 15.2.2

MDX library: @next/mdx 15.2.2

Rendering method: Using App Router (not Pages Router)

Does anyone know what might be causing this issue? Am I missing a configuration step?

Thanks in advance! 🙌

Additional information

No response

Example

No response

[anandhuremanan]

I dig a lil bit on the issues and find this

Dev server not working when using @next/mdx with plugins and --turbo

and it's is closed without fixing? 🤯

[kisszoltan]

In my case the comment from @karlhorky on the issue above solved the issue.

TLDR;

next/mdx does not support tables by default, you have to use remark-gfm. Unfortunately remark and rehype plugins does not work with Turbopack when they are imported, so you have to define them "manually" like so:

import createMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  extension: /\.mdx$/,
  options: {
    remarkPlugins: [["remark-gfm", { strict: true, throwOnError: true }]],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

[lhew]

Any updates on this?

[lucafaggianelli]

I got the same problem and I followed the same comment quoted by @kisszoltan and I obtained the same code, finally to make it work I had to remove this lines in nextConfig (it was enabling the Rust MDX loader / compiler or something):

experimental: {
  mdxRs: true,
}

[alemoraru]

I've also encountered the same issue as reported above.
I'm using:

• next: 15.3.1
• next/mdx": 15.3.1

It would be nice to have the support for tables already within the above, and not through some other plugin...

[cyyyu]

In my case I have contentLayer integrated. I have to modify contentlayer.config.ts. Here is what I ended up with:

import remarkGfm from "remark-gfm";
//...
export default makeSource({
  //...other configs
  mdx: {
    remarkPlugins: [
      [
        remarkGfm,
        {
          strict: true,
          throwOnError: true,
        },
      ],
    ],
  },
});

However, the latest version of remark-gfm doesn't work for me. I need to specifically install [email protected] which is an old version and it is compatible with the following:

    "@next/mdx": "^15.3.3",
    "next-mdx-remote": "^5.0.0",
    "next": "^15.3.3",
    "next-contentlayer": "^0.3.4",

Now it should be good. Hope this helps.

[liu-purnomo]

Hey everyone,

I saw this discussion and wanted to share that I've actually written a guide on how to tackle this very issue with Next.js, MDX, and tables on my blog. You can find a detailed solution in the following article:

https://liupurnomo.com/next-mdx-table

Hope this helps!

[anandhuremanan]

Thanks, btw your portfolio site is cool..

[karlhorky]

@liu-purnomo thanks for this!

You can go simpler though - switch from next-mdx-remote to just @next/mdx with dynamic import():

• https://github.com/karlhorky/next-mdx-dynamic-import-demo
• Docs: Clarify that first-party `@next/mdx` also has dynamic `import()` - not just `next-mdx-remote` #70417

More features and one fewer dependency 👍