Nextjs MDX doesn't show strikethrough in App Router

Question

I am using next14 and mdx markdown file. Every markdown syntax is correctly shown but strikethrough. I used ~~this is my strikethrough~~ like that. In my vscode, the strikethrough is even shown with a line passing in the middle of the text. In the result, it shows like I wrote ~~this is my strikethrough~~ like that. This is my dependencies.

"dependencies": {
    "@mdx-js/loader": "^3.0.1",
    "@mdx-js/react": "^3.0.1",
    "@next/mdx": "^14.1.1",
    "@types/mdx": "^2.0.11",
    "bootstrap": "^5.3.2",
    "clsx": "^2.1.0",
    "next": "14.1.0",
    "react": "^18",
    "react-bootstrap": "^2.10.1",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "typescript": "^5"
  }

Every other tag is fine. It doesn't show only strikethrough. Did they change about markdown syntax? All I could search was using these before and after the text ~~. \n I am using App Router and my mdx file directory is src/app/docs/page.mdx. I have mdx-components.tsx at src. I have changed my next.config.js file according to nextjs guide.

Answer 1

Add the remark-gfm plugin as a dependency and configure @next-mdx to use it in the next.config.js file.

https://nextjs.org/docs/app/building-your-application/configuring/mdx#remark-and-rehype-plugins