From 4d2e175e12a79d862f12bfc374a1282cfe0cedc3 Mon Sep 17 00:00:00 2001
From: Nicholas Romero <ncrmro@gmail.com>
Date: Thu, 3 Aug 2023 09:16:58 -0500
Subject: [PATCH 1/2] Update README.md

---
 README.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/README.md b/README.md
index e1fa9d9..f7e3ea0 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,55 @@ While it may seem strange to see these two in the same file, this is one of the
 
 ### Additional Examples
 
+
+
+<details>
+  <summary>Using Nextjs App dir and Server Components</summary>
+
+```jsx
+// app/posts/[slug]/page.js
+import Post from "@/app/posts/[slug]/Post";
+import { db } from "@/lib/database";
+import { serialize } from "next-mdx-remote/serialize";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import React from "react";
+
+export default async function PostPage({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const post = await db.selectFrom("posts")...
+  if (!post) {
+    notFound();
+  }
+  const mdxSource = await serialize(post.body);
+
+  return (
+    <div>
+      <h1>{post.title}</h1>
+      <Post source={mdxSource} />
+    </div>
+  );
+}
+
+```
+
+```jsx
+// app/posts/[slug]/page.js
+"use client";
+import React from "react";
+import { MDXRemote } from "next-mdx-remote";
+
+export default function Post(props: { source: any }) {
+  return <MDXRemote {...props.source} />;
+}
+
+```
+
+</details>
+
 <details>
   <summary>Parsing Frontmatter</summary>
 

From 84bd7fedbf3e4d4b314eb319a729c43b3b11e28e Mon Sep 17 00:00:00 2001
From: Nicholas Romero <ncrmro@gmail.com>
Date: Thu, 3 Aug 2023 10:04:06 -0500
Subject: [PATCH 2/2] Update README.md

---
 README.md | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index f7e3ea0..f445706 100644
--- a/README.md
+++ b/README.md
@@ -62,28 +62,14 @@ While it may seem strange to see these two in the same file, this is one of the
 ```jsx
 // app/posts/[slug]/page.js
 import Post from "@/app/posts/[slug]/Post";
-import { db } from "@/lib/database";
 import { serialize } from "next-mdx-remote/serialize";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import React from "react";
 
-export default async function PostPage({
-  params,
-}: {
-  params: { slug: string };
-}) {
-  const post = await db.selectFrom("posts")...
-  if (!post) {
-    notFound();
-  }
-  const mdxSource = await serialize(post.body);
+export default async function TestPage() {
+  const source = 'Some **mdx** text, with a component <Test />'
+  const mdxSource = await serialize(source);
 
   return (
-    <div>
-      <h1>{post.title}</h1>
-      <Post source={mdxSource} />
-    </div>
+    <Post source={mdxSource} />
   );
 }