feat: upgrade next-mdx-remote

* chore: upgrade packages

Updating packages:
- "@mapbox/rehype-prism": "^0.6.0"
- "image-size": "1.0.0"
- "next-seo": "4.24.0"
- "remark-code-titles": "0.1.2"
- "remark-footnotes": "^3.0.0"
- "eslint-config-prettier": "^8.3.0"
- "globby": "11.0.3"
- "lint-staged": "^11.0.0"
- "remark-stringify": "9.0.1"

* feat: upgrade next-mdx-remote

It adds MDXRemote and serialize breaking changes

Read more at https://github.com/hashicorp/next-mdx-remote/releases/tag/3.0.0

* fix: downgrade remark-math and rehype-katex

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">