MDXProvider

components/PostLayout.js

@@ -1,7 +1,30 @@
 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 (
+    <MDXProvider components={components}>
       <Container>
         <Grid container spacing={3}>
           <Grid item xs={12}>
@@ -20,5 +43,6 @@ export default function PostLayout({ children, meta }) {
           </Grid>
         </Grid>
       </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",