MDXProvider

components/PostLayout.js

@@ -1,24 +1,48 @@
 import { Grid, Container, Typography, Paper } from "@mui/material";
+import { MDXProvider } from "@mdx-js/react";
+import Image from "next/image";
+
+const components = {
+  h1: (props) => <Typography variant="h1" {...props} />,
+  h2: (props) => <Typography variant="h2" {...props} />,
+  h3: (props) => <Typography variant="h3" {...props} />,
+  h4: (props) => <Typography variant="h4" {...props} />,
+  h5: (props) => <Typography variant="h5" {...props} />,
+  h6: (props) => <Typography variant="h6" {...props} />,
+  img: (props) => <Image alt={props.alt} layout="responsive" {...props} />,
+  code: (props) => (
+    <code
+      style={{
+        backgroundColor: "lightpink",
+        borderRadius: "0.4rem",
+        padding: "0.2rem",
+      }}
+      {...props}
+    />
+  ),
+};
 
 export default function PostLayout({ children, meta }) {
   return (
-    <Container>
+    <MDXProvider components={components}>
-      <Grid container spacing={3}>
+      <Container>
-        <Grid item xs={12}>
+        <Grid container spacing={3}>
-          <Paper
+          <Grid item xs={12}>
-            style={{
+            <Paper
-              padding: "1rem",
+              style={{
-              margin: "1rem",
+                padding: "1rem",
-              backgroundColor: "#fafafa",
+                margin: "1rem",
-            }}
+                backgroundColor: "#fafafa",
-          >
+              }}
-            <Typography variant="h4">{meta.title}</Typography>
+            >
-            <Typography variant="body1">{meta.description}</Typography>
+              <Typography variant="h4">{meta.title}</Typography>
-            <hr />
+              <Typography variant="body1">{meta.description}</Typography>
-            {children}
+              <hr />
-          </Paper>
+              {children}
+            </Paper>
+          </Grid>
         </Grid>
-      </Grid>
+      </Container>
-    </Container>
+    </MDXProvider>
   );
 }

next.config.js

@@ -3,6 +3,7 @@ const withMDX = require("@next/mdx")({
   options: {
     remarkPlugins: [],
     rehypePlugins: [],
+    providerImportSource: "@mdx-js/react",
   },
 });
 

package-lock.json

@@ -11,6 +11,7 @@
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
         "@mdx-js/loader": "^2.1.1",
+        "@mdx-js/react": "^2.1.1",
         "@mui/icons-material": "^5.5.1",
         "@mui/lab": "^5.0.0-alpha.75",
         "@mui/material": "^5.5.3",
@@ -791,7 +792,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/@mdx-js/react/-/react-2.1.1.tgz",
       "integrity": "sha512-7zlZDf5xmWH8I0kFE4DG91COOkxjaW9DX5f1HWztZpFcVua2gJgMYfIkFaDpO/DH/tWi6Mz+OheW4194r15igg==",
-      "peer": true,
       "dependencies": {
         "@types/mdx": "^2.0.0",
         "@types/react": ">=16"
@@ -6031,7 +6031,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/@mdx-js/react/-/react-2.1.1.tgz",
       "integrity": "sha512-7zlZDf5xmWH8I0kFE4DG91COOkxjaW9DX5f1HWztZpFcVua2gJgMYfIkFaDpO/DH/tWi6Mz+OheW4194r15igg==",
-      "peer": true,
       "requires": {
         "@types/mdx": "^2.0.0",
         "@types/react": ">=16"

package.json

@@ -12,6 +12,7 @@
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@mdx-js/loader": "^2.1.1",
+    "@mdx-js/react": "^2.1.1",
     "@mui/icons-material": "^5.5.1",
     "@mui/lab": "^5.0.0-alpha.75",
     "@mui/material": "^5.5.3",