I’ve been experimenting with Github Flavored Markdown using @next/mdx, but I’m struggling to understand how to use plugins alongside the code. Here’s a breakdown of what I’ve attempted so far:
(I’m following the instructions from the Next.js Documentation: https://nextjs.org/docs/advanced-features/using-mdx)
Getting Started
1. Created a Next.js App with the command:
yarn create next-app next-gfm
2. Added the necessary modules by running:
yarn add @next/mdx @mdx-js/loader
3. In the pages/ directory, replaced the auto-generated index.js with an index.mdx file.
For the next.config.js configuration, I used the following setup:
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
options: {
remarkPlugins: [],
rehypePlugins: [],
},
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})
Running yarn dev at this point seems to work without any issues.
Integrating GFM
However, when trying to incorporate GitHub Flavored Markdown, I installed the necessary packages with:
yarn add remark-gfm rehype-stringify
Import Syntax Error?
While attempting to import the modules in next.config.js using ES6 syntax like:
import remarkGfm from 'remark-gfm'
This resulted in the following error:
import remarkGfm from 'remark-gfm'
^^^^^^
SyntaxError: Cannot use import statement outside a module
Making it a module
Tried adding the line below at the top of my package.json:
"type" : "module",
But this caused conflicts with the require syntax used for importing @next/mdx:
const withMDX = require('@next/mdx')({
...
Resulting in the error:
Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
Trying older import() syntax
After looking online, found the import() syntax and modified my next.config.js as shown below:
const remarkGfm = import('remark-gfm');
const remarkParse = import('remark-parse')
const remarkRehype = import('remark-rehype')
const rehypeStringify = import('rehype-stringify')
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkGfm, remarkParse, remarkRehype],
rehypePlugins: [rehypeStringify],
},
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})
When running this setup with yarn dev, everything seems to be working fine except that none of the markdown plugins are actually functioning (basic markdown works but advanced features like footnotes, tables render as plain text).
If anyone has insight on effectively incorporating external plugins (such as GitHub Flavored Markdown) with MDX and Next.js using the @next/mdx package, your guidance would be greatly appreciated.
Project Structure and Files
Below is the structure along with relevant files in my project:
next-gfm
|_ pages
|_ index.md
|_ package.json
|_ next.config.js
Files
index.md
# GFM
## Autolink literals
www.example.com, https://example.com, and <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a0acadb7a2a0b783a6bba2aeb3afa6eda0acae">[email protected]</a>.
## Footnote
A note[^1]
[^1]: Big note.
## Strikethrough
~one~ or ~~two~~ tildes.
## Table
| a | b | c | d |
| - | :- | -: | :-: |
## Tasklist
* [ ] to do
* [x] done
package.json
{
"name": "next-mdx-template",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@mdx-js/loader": "^2.1.1",
"@next/mdx": "^12.1.5",
"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0",
"rehype-katex": "^6.0.2",
"rehype-stringify": "^9.0.3",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"remark-mdx": "^2.1.1"
},
"devDependencies": {
"eslint": "8.13.0",
"eslint-config-next": "12.1.5"
}
}
next.config.js
const remarkGfm = import('remark-gfm');
const remarkParse = import('remark-parse')
const remarkRehype = import('remark-rehype')
const rehypeStringify = import('rehype-stringify')
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkGfm, remarkParse, remarkRehype],
rehypePlugins: [rehypeStringify],
},
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})