Problems with mdx on next

Question

I want to render mdx on next application. Syntax like heading, paragraph are working but table, code, blockquote etc are not working. Should I install any extra package or change any config? I followed the steps in next documentation for mdx support.

Dependencies in package.json:

    "@mdx-js/loader": "^2.3.0",
    "@mdx-js/react": "^2.3.0",
    "@next/mdx": "^13.4.19",

hello.mdx:

| a | b  |  c |  d  |
| - | :- | -: | :-: |

> Blockquote    

I have a hello.mdx file in the app folder and importing like this :

import HelloWorld from "../../app/hello.mdx";

Answer 1

MDX doesn’t support GFM by default. To support GFM in MDX in Next.js, add the following to you next.config.mjs:

import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'

const withMDX = nextMDX({
  options: {
    // More MDX options
    remarkPlugins: [remarkGfm],
  }
})

export default withMDX({
  // Next.js options
})

Also from What is MDX?:

Indented code does not work in MDX

Instead, use a fenced code block:

```js
console.log('This is a code block')
```

Blockquotes should just work.