From 32b65c4d49f373057cdf08085b523a58d95f8e23 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Tue, 5 Nov 2024 18:34:27 +1100
Subject: [PATCH] fix: blog posts breaking during ssr on vercel

---
 .../app/(marketing)/blog/[post]/content.tsx   | 23 +++++++++++++++++++
 .../src/app/(marketing)/blog/[post]/page.tsx  | 15 +++---------
 2 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 apps/marketing/src/app/(marketing)/blog/[post]/content.tsx

diff --git a/apps/marketing/src/app/(marketing)/blog/[post]/content.tsx b/apps/marketing/src/app/(marketing)/blog/[post]/content.tsx
new file mode 100644
index 000000000..ebcd5f8b9
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/blog/[post]/content.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import Image from 'next/image';
+
+import type { BlogPost } from 'contentlayer/generated';
+import type { MDXComponents } from 'mdx/types';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+
+const mdxComponents: MDXComponents = {
+  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
+    <Image {...props} alt={props.alt ?? ''} />
+  ),
+};
+
+export type BlogPostContentProps = {
+  post: BlogPost;
+};
+
+export const BlogPostContent = ({ post }: BlogPostContentProps) => {
+  const MdxContent = useMDXComponent(post.body.code);
+
+  return <MdxContent components={mdxComponents} />;
+};
diff --git a/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx b/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
index 324f742d1..03c5bcb81 100644
--- a/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
+++ b/apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
@@ -1,16 +1,15 @@
-import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
 import { allBlogPosts } from 'contentlayer/generated';
 import { ChevronLeft } from 'lucide-react';
-import type { MDXComponents } from 'mdx/types';
-import { useMDXComponent } from 'next-contentlayer/hooks';
 
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 
 import { CallToAction } from '~/components/(marketing)/call-to-action';
 
+import { BlogPostContent } from './content';
+
 export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
@@ -42,12 +41,6 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
   };
 };
 
-const mdxComponents: MDXComponents = {
-  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
-    <Image {...props} alt={props.alt ?? ''} />
-  ),
-};
-
 export default async function BlogPostPage({ params }: { params: { post: string } }) {
   await setupI18nSSR();
 
@@ -57,8 +50,6 @@ export default async function BlogPostPage({ params }: { params: { post: string
     notFound();
   }
 
-  const MDXContent = useMDXComponent(post.body.code);
-
   return (
     <div>
       <article className="prose dark:prose-invert mx-auto py-8">
@@ -87,7 +78,7 @@ export default async function BlogPostPage({ params }: { params: { post: string
           </div>
         </div>
 
-        <MDXContent components={mdxComponents} />
+        <BlogPostContent post={post} />
 
         {post.tags.length > 0 && (
           <ul className="not-prose flex list-none flex-row space-x-2 px-0">