feat: generate terms page from md file

next.config.mjs

@@ -1,6 +1,9 @@
 import path from 'path'
 import withBundleAnalyzer from '@next/bundle-analyzer'
 import withPWAInit from '@ducanh2912/next-pwa'
+import remarkGfm from 'remark-gfm'
+import remarkHeadingId from 'remark-heading-id'
+import createMDX from '@next/mdx'
 
 const SERVICE_WORKERS_PATH = './src/service-workers'
 
@@ -26,13 +29,21 @@ const nextConfig = {
     unoptimized: true,
   },
 
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
   reactStrictMode: false,
   productionBrowserSourceMaps: true,
   eslint: {
     dirs: ['src', 'cypress'],
   },
   experimental: {
-    optimizePackageImports: ['@mui/material', '@mui/icons-material', 'lodash', 'date-fns', '@sentry/react', '@gnosis.pm/zodiac'],
+    optimizePackageImports: [
+      '@mui/material',
+      '@mui/icons-material',
+      'lodash',
+      'date-fns',
+      '@sentry/react',
+      '@gnosis.pm/zodiac',
+    ],
   },
   webpack(config) {
     config.module.rules.push({
@@ -69,7 +80,15 @@ const nextConfig = {
     return config
   },
 }
+const withMDX = createMDX({
+  extension: /\.(md|mdx)?$/,
+  options: {
+    remarkPlugins: [remarkHeadingId, remarkGfm],
+    rehypePlugins: [],
+  },
+})
+
 
 export default withBundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
-})(withPWA(nextConfig))
+})(withPWA(withMDX(nextConfig)))

package.json

@@ -50,9 +50,12 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@gnosis.pm/zodiac": "^4.0.3",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
     "@mui/icons-material": "^5.14.20",
     "@mui/material": "^5.14.20",
     "@mui/x-date-pickers": "^5.0.20",
+    "@next/mdx": "^14.2.11",
     "@reduxjs/toolkit": "^2.2.6",
     "@safe-global/api-kit": "^2.4.4",
     "@safe-global/protocol-kit": "^4.1.0",
@@ -62,6 +65,7 @@
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",
+    "@types/mdx": "^2.0.13",
     "@walletconnect/utils": "^2.16.1",
     "@walletconnect/web3wallet": "^1.15.1",
     "@web3-onboard/coinbase": "^2.2.6",
@@ -91,6 +95,8 @@
     "react-hook-form": "7.41.1",
     "react-papaparse": "^4.0.2",
     "react-redux": "^9.1.2",
+    "remark-gfm": "^4.0.0",
+    "remark-heading-id": "^1.0.1",
     "semver": "^7.6.3",
     "zodiac-roles-deployments": "^2.2.5"
   },