feat: migrate Payload CMS to MDX and harden static infrastructure

app/[locale]/[slug]/page.tsx

@@ -4,7 +4,7 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getPageBySlug, getAllPages } from '@/lib/pages';
 import { mapSlugToFileSlug, mapFileSlugToTranslated } from '@/lib/slugs';
-import PayloadRichText from '@/components/PayloadRichText';
+import MDXContent from '@/components/MDXContent';
 import { SITE_URL } from '@/lib/schema';
 import TrackedLink from '@/components/analytics/TrackedLink';
 
@@ -82,7 +82,7 @@ export default async function StandardPage({ params }: PageProps) {
   if (pageData.frontmatter.layout === 'fullBleed') {
     return (
       <div className="flex flex-col min-h-screen">
-        <PayloadRichText data={pageData.content} className="" />
+        <MDXContent data={pageData.content} className="" />
       </div>
     );
   }
@@ -121,7 +121,7 @@ export default async function StandardPage({ params }: PageProps) {
 
           {/* Main content with shared blog components */}
           <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary">
-            <PayloadRichText data={pageData.content} />
+            <MDXContent data={pageData.content} />
           </div>
 
           {/* Support Section */}

app/[locale]/blog/[slug]/page.tsx

@@ -19,7 +19,7 @@ import { setRequestLocale } from 'next-intl/server';
 import BlogEngagementTracker from '@/components/analytics/BlogEngagementTracker';
 
 // Payload CMS Imports
-import PayloadRichText from '@/components/PayloadRichText';
+import MDXContent from '@/components/MDXContent';
 
 interface BlogPostProps {
   params: Promise<{
@@ -215,7 +215,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
 
             {/* Main content with enhanced styling rendering Payload Lexical */}
             <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary">
-              <PayloadRichText data={post.content} />
+              <MDXContent data={post.content} />
             </div>
 
             {/* Power CTA */}

app/[locale]/layout.tsx

@@ -2,7 +2,6 @@ import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
 import SkipLink from '@/components/SkipLink';
-import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
 import AnalyticsShell from '@/components/analytics/AnalyticsShell';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
@@ -144,9 +143,6 @@ export default async function Layout(props: {
             {children}
           </main>
           <Footer />
-
-          <CMSConnectivityNotice />
-
           <AnalyticsShell />
           <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />
         </NextIntlClientProvider>

app/[locale]/not-found.tsx

@@ -1,8 +1,6 @@
 import { getTranslations } from 'next-intl/server';
 import { Container, Button, Heading } from '@/components/ui';
 import Scribble from '@/components/Scribble';
-import { getPayload } from 'payload';
-import configPromise from '@payload-config';
 import { headers } from 'next/headers';
 import ClientNotFoundTracker from '@/components/analytics/ClientNotFoundTracker';
 
@@ -20,61 +18,19 @@ export default async function NotFound() {
   if (urlPath) {
     const slug = urlPath.split('/').filter(Boolean).pop();
     if (slug) {
-      try {
-        const payload = await getPayload({ config: configPromise });
+      // Logic for alternative locale checking is tricky without DB.
+      // We'll just provide a simple fallback if the user is in wrong locale
+      const currentLocale = urlPath.startsWith('/en') ? 'en' : 'de';
+      const alternativeLocale = currentLocale === 'de' ? 'en' : 'de';
+      suggestedLang = alternativeLocale === 'de' ? 'Deutsch' : 'English';
 
-        // Check posts
-        const postRes = await payload.find({
-          collection: 'posts',
-          where: { slug: { equals: slug } },
-          locale: 'all',
-          limit: 1,
-        });
-
-        // Check products
-        const productRes =
-          postRes.docs.length === 0
-            ? await payload.find({
-                collection: 'products',
-                where: { slug: { equals: slug } },
-                locale: 'all',
-                limit: 1,
-              })
-            : { docs: [] };
-
-        // Check pages
-        const pageRes =
-          postRes.docs.length === 0 && productRes.docs.length === 0
-            ? await payload.find({
-                collection: 'pages',
-                where: { slug: { equals: slug } },
-                locale: 'all',
-                limit: 1,
-              })
-            : { docs: [] };
-
-        const anyDoc = postRes.docs[0] || productRes.docs[0] || pageRes.docs[0];
-
-        if (anyDoc) {
-          // If the doc exists, we can figure out its native locale or
-          // offer the alternative locale (if we are in 'de', offer 'en')
-          const currentLocale = urlPath.startsWith('/en') ? 'en' : 'de';
-          const alternativeLocale = currentLocale === 'de' ? 'en' : 'de';
-
-          suggestedLang = alternativeLocale === 'de' ? 'Deutsch' : 'English';
-
-          // Reconstruct the URL for the alternative locale
-          const pathParts = urlPath.split('/').filter(Boolean);
-          if (pathParts.length > 0 && (pathParts[0] === 'en' || pathParts[0] === 'de')) {
-            pathParts[0] = alternativeLocale;
-          } else {
-            pathParts.unshift(alternativeLocale);
-          }
-          suggestedUrl = '/' + pathParts.join('/');
-        }
-      } catch (e) {
-        // Ignore Payload errors in 404
+      const pathParts = urlPath.split('/').filter(Boolean);
+      if (pathParts.length > 0 && (pathParts[0] === 'en' || pathParts[0] === 'de')) {
+        pathParts[0] = alternativeLocale;
+      } else {
+        pathParts.unshift(alternativeLocale);
       }
+      suggestedUrl = '/' + pathParts.join('/');
     }
   }
 

app/[locale]/products/[...slug]/page.tsx

@@ -16,7 +16,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { notFound, redirect } from 'next/navigation';
 import ProductEngagementTracker from '@/components/analytics/ProductEngagementTracker';
-import PayloadRichText from '@/components/PayloadRichText';
+import MDXContent from '@/components/MDXContent';
 
 interface ProductPageProps {
   params: Promise<{
@@ -266,15 +266,17 @@ export default async function ProductPage({ params }: ProductPageProps) {
     notFound();
   }
 
-  // Extract technical data natively from the Lexical AST for Schema.org
   let technicalItems = [];
-  if (product.content?.root?.children) {
-    const productTabsBlock = product.content.root.children.find(
-      (node: any) => node.type === 'block' && node.fields?.blockType === 'productTabs',
-    );
-    if (productTabsBlock && productTabsBlock.fields?.technicalItems) {
-      technicalItems = productTabsBlock.fields.technicalItems;
+  try {
+    const tabMatch =
+      typeof product.content === 'string' &&
+      product.content.match(/<Block type="productTabs" data={({.*?})}\s*\/>/s);
+    if (tabMatch && tabMatch[1]) {
+      const data = JSON.parse(tabMatch[1]);
+      technicalItems = data.technicalItems || [];
     }
+  } catch (e) {
+    // Ignore JSON parse errors for AST
   }
 
   const datasheetPath = getDatasheetPath(productSlug, locale);
@@ -288,56 +290,17 @@ export default async function ProductPage({ params }: ProductPageProps) {
     ? t(`categories.${categoryKey}.title`)
     : categoryFileSlug;
 
-  // Split content into Description and Technical Data
-  const rootChildren = product.content?.root?.children || [];
-  const technicalBlocks = rootChildren.filter(
-    (node: any) =>
-      node.type === 'block' &&
-      (node.fields?.blockType === 'productTabs' ||
-        node.fields?.blockType === 'productTechnicalData'),
-  );
-  let descriptionChildren = rootChildren.filter(
-    (node: any) =>
-      !(
-        node.type === 'block' &&
-        (node.fields?.blockType === 'productTabs' ||
-          node.fields?.blockType === 'productTechnicalData')
-      ),
-  );
+  let descriptionContent = typeof product.content === 'string' ? product.content : '';
+  let technicalContent = '';
 
-  // If no standalone description nodes, extract from the productTabs block's embedded content
-  if (descriptionChildren.length === 0) {
-    const tabsBlock = rootChildren.find(
-      (node: any) => node.type === 'block' && node.fields?.blockType === 'productTabs',
-    );
-    if (tabsBlock?.fields?.content?.root?.children) {
-      descriptionChildren = tabsBlock.fields.content.root.children.filter((node: any) => {
-        // Filter out MDX parsing artifacts like `}>`
-        if (node.type === 'paragraph' && node.children?.length === 1) {
-          const text = node.children[0]?.text?.trim();
-          return text !== '}>' && text !== '{' && text !== '}';
-        }
-        return true;
-      });
+  if (typeof product.content === 'string') {
+    const tabBlockMatch = product.content.match(/<Block type="productTabs".*?\/>/s);
+    if (tabBlockMatch) {
+      descriptionContent = product.content.replace(tabBlockMatch[0], '');
+      technicalContent = tabBlockMatch[0];
     }
   }
 
-  console.log(`[DEBUG PAGE] Slug: ${productSlug}, children count: ${descriptionChildren.length}`);
-
-  const descriptionContent = {
-    root: {
-      ...product.content.root,
-      children: descriptionChildren,
-    },
-  };
-
-  const technicalContent = {
-    root: {
-      ...product.content.root,
-      children: technicalBlocks,
-    },
-  };
-
   const sidebar = (
     <ProductSidebar
       productName={product.frontmatter.title}
@@ -461,17 +424,19 @@ export default async function ProductPage({ params }: ProductPageProps) {
             {/* Description Area Next to Sidebar */}
             <div className="lg:col-span-8">
               <div className="max-w-none prose prose-primary prose-base md:prose-lg xl:prose-xl mb-8 md:mb-16 pb-8 md:pb-16 border-b border-neutral-dark/5">
-                {descriptionChildren.length > 0 ? (
-                  <PayloadRichText data={descriptionContent} />
+                {descriptionContent ? (
+                  <MDXContent data={descriptionContent} />
                 ) : product.frontmatter.description ? (
                   <p className="text-lg md:text-xl text-text-secondary leading-relaxed">
                     {product.frontmatter.description}
                   </p>
                 ) : null}
 
-                {product.application?.root?.children?.length > 0 && (
+                {product.application && (
                   <div className="mt-12">
-                    <PayloadRichText data={product.application} />
+                    <MDXContent
+                      data={typeof product.application === 'string' ? product.application : ''}
+                    />
                   </div>
                 )}
               </div>
@@ -484,7 +449,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
           {/* Full-width Technical Data Below */}
           <div className="mt-8 md:mt-16 pt-8 md:pt-16 border-t-0">
             <div className="max-w-none prose prose-primary prose-lg md:prose-xl">
-              <PayloadRichText data={technicalContent} />
+              <MDXContent data={technicalContent} />
             </div>
 
             {/* Datasheet Download Section */}