Add MDX support

next.config.js

@@ -1,9 +1,12 @@
+const withMDX = require('@next/mdx')();
+
 /** @type {import('next').NextConfig} */
 const config = {
     output: 'export',
+    reactStrictMode: true,
     images: {
         unoptimized: true,
     },
 };
 
-module.exports = config;
+module.exports = withMDX(config);

package.json

@@ -7,16 +7,22 @@
     "start": "next start"
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/runtime": "^1.6.22",
+    "@next/mdx": "^14.2.3",
     "classnames": "^2.5.1",
     "date-fns": "^3.3.1",
     "gray-matter": "^4.0.3",
     "next": "14.1.0",
+    "next-mdx-remote": "^4.4.1",
     "react": "^18",
     "react-dom": "^18",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1"
   },
   "devDependencies": {
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

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

@@ -1,15 +1,22 @@
-import { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { getAllPosts, getPostBySlug } from "@/lib/api";
-import { CMS_NAME } from "@/lib/constants";
-import markdownToHtml from "@/lib/markdownToHtml";
 import Alert from "@/app/_components/alert";
 import Container from "@/app/_components/container";
 import Header from "@/app/_components/header";
 import { PostBody } from "@/app/_components/post-body";
 import { PostHeader } from "@/app/_components/post-header";
+import { getAllPosts, getPostBySlug } from "@/lib/api";
+import { DEFAULT_TITLE } from "@/lib/constants";
+import markdownToHtml from "@/lib/markdownToHtml";
+import { ContainerMDX } from "@/mdx-components";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
 
-export default async function Post({ params }: Params) {
+interface PageBlogPostProps {
+  params: {
+    slug: string;
+  };
+};
+
+export default async function Post({ params }: PageBlogPostProps) {
   const post = getPostBySlug(params.slug);
 
   if (!post) {
@@ -31,26 +38,23 @@ export default async function Post({ params }: Params) {
             author={post.author}
           />
           <PostBody content={content} />
+          <div className="max-w-2xl mx-auto">
+            <ContainerMDX source={post.content}/>
+          </div>
         </article>
       </Container>
     </main>
   );
 }
 
-type Params = {
-  params: {
-    slug: string;
-  };
-};
-
-export function generateMetadata({ params }: Params): Metadata {
+export function generateMetadata({ params }: PageBlogPostProps): Metadata {
   const post = getPostBySlug(params.slug);
 
   if (!post) {
     return notFound();
   }
 
-  const title = `${post.title} | Next.js Blog Example with ${CMS_NAME}`;
+  const title = `${post.title} | ${DEFAULT_TITLE} Blog`;
 
   return {
     title,
@@ -62,9 +66,6 @@ export function generateMetadata({ params }: Params): Metadata {
 }
 
 export async function generateStaticParams() {
-  const posts = getAllPosts();
-
-  return posts.map((post) => ({
-    slug: post.slug,
-  }));
+  const result: PageBlogPostProps['params'][] = getAllPosts().map((post) => ({ slug: post.slug }));
+  return result;
 }

_posts/dynamic-routing.md → src/content/blog/dynamic-routing.mdx

@@ -12,6 +12,13 @@ ogImage:
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
 
+<div>
+  Hello <span className="" style={{color: 'red'}}>Test</span>
+</div>
+
+<Alert/>
+<Alert preview/>
+
 Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae. Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
 
 ## Lorem Ipsum

src/lib/api.ts

@@ -3,19 +3,23 @@ import fs from "fs";
 import matter from "gray-matter";
 import { join } from "path";
 
-const postsDirectory = join(process.cwd(), "_posts");
+const blogPostsDir = join(process.cwd(), 'src/content/blog');
 
 export function getPostSlugs() {
-  return fs.readdirSync(postsDirectory);
+  return fs.readdirSync(blogPostsDir);
 }
 
 export function getPostBySlug(slug: string) {
-  const realSlug = slug.replace(/\.md$/, "");
-  const fullPath = join(postsDirectory, `${realSlug}.md`);
-  const fileContents = fs.readFileSync(fullPath, "utf8");
+  const realSlug = slug.replace(/\.mdx?$/, '');
+  const fullPath = join(blogPostsDir, `${realSlug}.mdx`);
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
   const { data, content } = matter(fileContents);
 
-  return { ...data, slug: realSlug, content } as Post;
+  return {
+    ...data,
+    slug: realSlug,
+    content,
+  } as Post;
 }
 
 export function getAllPosts(): Post[] {

src/lib/constants.ts

@@ -1,4 +1,5 @@
 export const EXAMPLE_PATH = "blog-starter";
 export const CMS_NAME = "Markdown";
+export const DEFAULT_TITLE = "GrapesJS";
 export const HOME_OG_IMAGE_URL =
   "https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg";

src/mdx-components.tsx

@@ -0,0 +1,30 @@
+import Alert from "@/app/_components/alert";
+import { Intro } from "@/app/_components/intro";
+import markdownStyles from "@/app/_components/markdown-styles.module.css";
+import type { MDXComponents } from 'mdx/types';
+import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc';
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}
+
+const mdxComponents = {
+  Alert,
+  Intro,
+};
+
+export function ContainerMDX({ source }: MDXRemoteProps) {
+  // @ts-ignore
+  const result = <MDXRemote
+    components={mdxComponents}
+    source={source}
+  />;
+
+  return (
+    <div className={markdownStyles["markdown"]}>
+        {result}
+    </div>
+  );
+}