Proof of concept for static pages only.

app/[page]/layout.tsx

@@ -1,15 +0,0 @@
-import Footer from 'components/layout/footer';
-import { Suspense } from 'react';
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <Suspense>
-      <div className="w-full bg-white dark:bg-black">
-        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
-          <Suspense>{children}</Suspense>
-        </div>
-      </div>
-      <Footer />
-    </Suspense>
-  );
-}

app/[page]/opengraph-image.tsx

@@ -1,11 +0,0 @@
-import OpengraphImage from 'components/opengraph-image';
-import { getPage } from 'lib/shopify';
-
-export const runtime = 'edge';
-
-export default async function Image({ params }: { params: { page: string } }) {
-  const page = await getPage(params.page);
-  const title = page.seo?.title || page.title;
-
-  return await OpengraphImage({ title });
-}

app/[page]/page.tsx

@@ -1,56 +0,0 @@
-import type { Metadata } from 'next';
-
-import Prose from 'components/prose';
-import { getPage } from 'lib/shopify';
-import { notFound } from 'next/navigation';
-
-export const runtime = 'edge';
-
-export const revalidate = 43200; // 12 hours in seconds
-
-export async function generateMetadata({
-  params
-}: {
-  params: { page: string };
-}): Promise<Metadata> {
-  const page = await getPage(params.page);
-
-  if (!page) return notFound();
-
-  return {
-    title: page.seo?.title || page.title,
-    description: page.seo?.description || page.bodySummary,
-    openGraph: {
-      images: [
-        {
-          url: `/api/og?title=${encodeURIComponent(page.title)}`,
-          width: 1200,
-          height: 630
-        }
-      ],
-      publishedTime: page.createdAt,
-      modifiedTime: page.updatedAt,
-      type: 'article'
-    }
-  };
-}
-
-export default async function Page({ params }: { params: { page: string } }) {
-  const page = await getPage(params.page);
-
-  if (!page) return notFound();
-
-  return (
-    <>
-      <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
-      <Prose className="mb-8" html={page.body as string} />
-      <p className="text-sm italic">
-        {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric'
-        }).format(new Date(page.updatedAt))}.`}
-      </p>
-    </>
-  );
-}

app/my-page/page.tsx

@@ -0,0 +1,10 @@
+export const runtime = 'edge';
+
+export default async function Page() {
+  return (
+    <>
+      <h1 className="mb-8 text-5xl font-bold">My Page</h1>
+      <p>Content</p>
+    </>
+  );
+}