lib/mdx.js

@@ -1,7 +1,7 @@
 import MDXComponents from '@/components/MDXComponents'
 import fs from 'fs'
 import matter from 'gray-matter'
-import renderToString from 'next-mdx-remote/render-to-string'
+import { serialize } from 'next-mdx-remote/serialize'
 import path from 'path'
 import readingTime from 'reading-time'
 import visit from 'unist-util-visit'
@@ -49,7 +49,7 @@ export async function getFileBySlug(type, slug) {
     : fs.readFileSync(mdPath, 'utf8')
 
   const { data, content } = matter(source)
-  const mdxSource = await renderToString(content, {
+  const mdxSource = await serialize(content, {
     components: MDXComponents,
     mdxOptions: {
       remarkPlugins: [

package.json

@@ -11,7 +11,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@mapbox/rehype-prism": "^0.5.0",
+    "@mapbox/rehype-prism": "^0.6.0",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@next/mdx": "10.2.0",
@@ -19,10 +19,10 @@
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.5",
     "gray-matter": "^4.0.2",
-    "image-size": "0.9.7",
+    "image-size": "1.0.0",
     "next": "10.2.0",
-    "next-mdx-remote": "^2.1.3",
-    "next-seo": "4.23.0",
+    "next-mdx-remote": "^3.0.1",
+    "next-seo": "4.24.0",
     "next-themes": "^0.0.14",
     "postcss": "^8.2.8",
     "preact": "^10.5.13",
@@ -31,9 +31,9 @@
     "reading-time": "1.3.0",
     "rehype-katex": "^4.0.0",
     "remark-autolink-headings": "6.0.1",
-    "remark-code-titles": "0.1.1",
-    "remark-footnotes": "^2.0.0",
-    "remark-math": "3.0.1",
+    "remark-code-titles": "0.1.2",
+    "remark-footnotes": "^3.0.0",
+    "remark-math": "^3.0.1",
     "remark-slug": "6.0.0",
     "tailwindcss": "^2.1.1"
   },
@@ -42,22 +42,22 @@
     "@svgr/webpack": "^5.5.0",
     "@tailwindcss/jit": "^0.1.18",
     "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.0.0",
-    "globby": "11.0.1",
+    "globby": "11.0.3",
     "husky": "^6.0.0",
-    "lint-staged": "^10.5.3",
+    "lint-staged": "^11.0.0",
     "next-compose-plugins": "^2.2.1",
     "next-remote-watch": "^1.0.0",
     "prettier": "2.2.1",
     "rehype": "11.0.0",
     "remark-frontmatter": "3.0.0",
     "remark-parse": "9.0.0",
-    "remark-stringify": "9.0.0",
+    "remark-stringify": "9.0.1",
     "unified": "9.2.1",
     "unist-util-visit": "2.0.3"
   },

pages/blog/[...slug].js

@@ -1,10 +1,10 @@
+import fs from 'fs'
+import { MDXRemote } from 'next-mdx-remote'
 import MDXComponents from '@/components/MDXComponents'
 import PageTitle from '@/components/PageTitle'
 import PostLayout from '@/layouts/PostLayout'
 import generateRss from '@/lib/generate-rss'
 import { formatSlug, getAllFilesFrontMatter, getFileBySlug, getFiles } from '@/lib/mdx'
-import fs from 'fs'
-import hydrate from 'next-mdx-remote/hydrate'
 
 export async function getStaticPaths() {
   const posts = getFiles('blog')
@@ -34,15 +34,12 @@ export async function getStaticProps({ params }) {
 
 export default function Blog({ post, prev, next }) {
   const { mdxSource, frontMatter } = post
-  const content = hydrate(mdxSource, {
-    components: MDXComponents,
-  })
 
   return (
     <>
       {frontMatter.draft !== true ? (
         <PostLayout frontMatter={frontMatter} prev={prev} next={next}>
-          {content}
+          <MDXRemote {...mdxSource} components={MDXComponents} />
         </PostLayout>
       ) : (
         <div className="mt-24 text-center">