Add support for markdown

next.config.js

@@ -1,4 +1,24 @@
-module.exports = {
+const path = require('path');
+const rehypePrism = require('@mapbox/rehype-prism');
+
+const withMDX = require('@next/mdx')({
+  extension: /\.(md|mdx)?$/,
+  options: {
+    rehypePlugins: [rehypePrism]
+  }
+});
+
+let nextConfig = {
   reactStrictMode: true,
   poweredByHeader: false,
+
+  webpack(config, options) {
+    config.resolve.modules.push(path.resolve('./'));
+
+    return config;
   }
+};
+
+nextConfig = withMDX(nextConfig);
+
+module.exports = nextConfig;

package.json

@@ -13,6 +13,10 @@
     "@chakra-ui/react": "^1.6.5",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
+    "@mapbox/rehype-prism": "^0.7.0",
+    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
+    "@next/mdx": "^11.1.0",
     "framer-motion": "^4.1.17",
     "next": "^11.1.0",
     "react": "17.0.2",