From 3da4603a4797d03ae10c971318b851f331dbc35b Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Wed, 6 Nov 2024 20:58:25 +1100
Subject: [PATCH] fix: content pages breaking during ssr on vercel

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

diff --git a/apps/marketing/src/app/(marketing)/[content]/content.tsx b/apps/marketing/src/app/(marketing)/[content]/content.tsx
new file mode 100644
index 000000000..d263d8c35
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/[content]/content.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import Image from 'next/image';
+
+import type { DocumentTypes } 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 ContentPageContentProps = {
+  document: DocumentTypes;
+};
+
+export const ContentPageContent = ({ document }: ContentPageContentProps) => {
+  const MDXContent = useMDXComponent(document.body.code);
+
+  return <MDXContent components={mdxComponents} />;
+};
diff --git a/apps/marketing/src/app/(marketing)/[content]/page.tsx b/apps/marketing/src/app/(marketing)/[content]/page.tsx
index 38200d984..9bcc2b92d 100644
--- a/apps/marketing/src/app/(marketing)/[content]/page.tsx
+++ b/apps/marketing/src/app/(marketing)/[content]/page.tsx
@@ -1,12 +1,11 @@
-import Image from 'next/image';
 import { notFound } from 'next/navigation';
 
 import { allDocuments } from 'contentlayer/generated';
-import type { MDXComponents } from 'mdx/types';
-import { useMDXComponent } from 'next-contentlayer/hooks';
 
 import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
 
+import { ContentPageContent } from './content';
+
 export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { content: string } }) => {
@@ -19,12 +18,6 @@ export const generateMetadata = ({ params }: { params: { content: string } }) =>
   return { title: document.title };
 };
 
-const mdxComponents: MDXComponents = {
-  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
-    <Image {...props} alt={props.alt ?? ''} />
-  ),
-};
-
 /**
  * A generic catch all page for the root level that checks for content layer documents.
  *
@@ -39,11 +32,9 @@ export default async function ContentPage({ params }: { params: { content: strin
     notFound();
   }
 
-  const MDXContent = useMDXComponent(post.body.code);
-
   return (
     <article className="prose dark:prose-invert mx-auto">
-      <MDXContent components={mdxComponents} />
+      <ContentPageContent document={post} />
     </article>
   );
 }