Use nextjs mdx feature and configure plugins

examples/data-literate/package.json

@@ -4,19 +4,19 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
     "build": "next build && next export",
     "start": "next start"
   },
   "dependencies": {
     "@headlessui/react": "^1.3.0",
     "@heroicons/react": "^1.0.3",
-    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/loader": "^2.0.0",
+    "@next/mdx": "^12.1.0",
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.0.4",
     "frictionless.js": "^0.13.4",
     "gray-matter": "^4.0.3",
-    "next": "11.1.3",
+    "next": "12.1.0",
     "next-mdx-remote": "^3.0.4",
     "papaparse": "^5.3.1",
     "postcss": "^8.2.10",
@@ -26,6 +26,7 @@
     "react-vega": "^7.4.4",
     "remark": "^13.0.0",
     "remark-footnotes": "^3.0.0",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^1.0.0",
     "remark-html": "^13.0.2",
     "remark-slug": "^6.1.0",