add support to mdx

Author: byandrev

next.config.js

@@ -1,9 +1,18 @@
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: [],
+  },
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
   images: {
     dangerouslyAllowSVG: true,
     domains: ["firebasestorage.googleapis.com", "flagicons.lipis.dev"],
   },
 };
 
-module.exports = nextConfig;
+module.exports = withMDX(nextConfig);

package.json

@@ -13,6 +13,10 @@
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.4.0",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@mdx-js/runtime": "^1.6.22",
+    "@next/mdx": "^13.4.19",
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
@@ -27,6 +31,7 @@
     "negotiator": "^0.6.3",
     "next": "13.4.12",
     "next-i18next": "^14.0.0",
+    "next-mdx-remote": "^4.4.1",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/app/[lang]/globals.css

@@ -5,4 +5,13 @@
 ::selection {
   color: white;
   background: theme("colors.primary");
+}
+
+.post-content a {
+  color: theme("colors.primary");
+  text-decoration: underline;
+}
+
+.post-content a:hover {
+  color: theme("colors.primaryAlt");
 }

src/app/[lang]/posts/[slug]/getPostService.ts

@@ -1,5 +1,6 @@
+import { serialize } from "next-mdx-remote/serialize";
+
 import { getPostBySlug } from "@/lib/getPosts";
-import markdownToHtml from "@/lib/markdownToHtml";
 
 async function getPost(slug: string, lang: string) {
   const post = getPostBySlug(
@@ -10,7 +11,7 @@ async function getPost(slug: string, lang: string) {
 
   if (!post) return null;
 
-  const content = await markdownToHtml(post.content || "");
+  const content = await serialize(post.content || "");
 
   return {
     ...post,

src/app/[lang]/posts/[slug]/page.tsx

@@ -1,8 +1,9 @@
-import { notFound, redirect } from "next/navigation";
+import { redirect } from "next/navigation";
 
 import Container from "@/components/Container";
 import { Post } from "@/interfaces/Post";
 import getPost from "./getPostService";
+import PostContent from "@/components/PostContent";
 
 type Props = {
   params: { slug: string; lang: string };
@@ -32,10 +33,7 @@ export default async function PostPage({ params: { slug, lang } }: Props) {
               </time>
             </header>
 
-            <div
-              className="prose mt-10"
-              dangerouslySetInnerHTML={{ __html: post.content || "" }}
-            />
+            <PostContent content={post.content} />
           </article>
         </div>
       )}

src/components/PostContent.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { MDXRemote } from "next-mdx-remote";
+
+import Link from "./Link";
+
+export default function PostContent({ content }: { content: any }) {
+  return (
+    <div className="mt-6">
+      <MDXRemote {...content} components={{ Link }} />
+    </div>
+  );
+}

src/interfaces/Post.ts

@@ -3,7 +3,7 @@ export type Post = {
   title?: string;
   author?: string;
   date?: Date;
-  content?: string;
+  content?: any;
   excerpt?: string;
   [key: string]: any;
-};
+};

src/lib/getPosts.ts

@@ -16,8 +16,8 @@ export function getPostBySlug(
   lang: string,
 ) {
   try {
-    const realSlug = slug.replace(/\.md$/, "");
-    const fullPath = join(`${postsDirectory}/${lang}`, `${realSlug}.md`);
+    const realSlug = slug.replace(/\.mdx$/, "");
+    const fullPath = join(`${postsDirectory}/${lang}`, `${realSlug}.mdx`);
     const fileContents = fs.readFileSync(fullPath, "utf8");
 
     const { data, content } = matter(fileContents);

src/lib/markdownToHtml.ts

@@ -1,8 +1,7 @@
 import type { VFileCompatible } from "vfile";
 import { remark } from "remark";
-import html from "remark-html";
 
 export default async function markdownToHtml(markdown: VFileCompatible) {
-  const result = await remark().use(html).process(markdown);
+  const result = await remark().process(markdown);
   return result.toString();
-}
+}

src/posts/en/hello.md renamed to src/posts/en/hello.mdx

@@ -0,0 +1,7 @@
+---
+title: "El RPCIDE"
+excerpt: ""
+date: "2023-08-26"
+---
+
+El RPCIDE es un <Link href="https://es.wikipedia.org/wiki/Entorno_de_desarrollo_integrado" target="_blank">IDE</Link> enfocado en la programación competitiva.

src/posts/es/hello.md renamed to src/posts/es/hello.mdx

@@ -10,6 +10,7 @@ module.exports = {
     extend: {
       colors: {
         primary: "#20BF55",
+        primaryAlt: "#53E383",
       },
     },
   },