Next.js Supabase V3 (#463)

Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner

apps/web/app/[locale]/(marketing)/changelog/[slug]/page.tsx

@@ -0,0 +1,107 @@
+import { cache } from 'react';
+
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { createCmsClient } from '@kit/cms';
+
+import { ChangelogDetail } from '../_components/changelog-detail';
+
+interface ChangelogEntryPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+const getChangelogData = cache(changelogEntryLoader);
+
+async function changelogEntryLoader(slug: string) {
+  const client = await createCmsClient();
+
+  const [entry, allEntries] = await Promise.all([
+    client.getContentItemBySlug({ slug, collection: 'changelog' }),
+    client.getContentItems({
+      collection: 'changelog',
+      sortBy: 'publishedAt',
+      sortDirection: 'desc',
+      content: false,
+    }),
+  ]);
+
+  if (!entry) {
+    return null;
+  }
+
+  // Find previous and next entries in the timeline
+  const currentIndex = allEntries.items.findIndex((item) => item.slug === slug);
+  const newerEntry =
+    currentIndex > 0 ? allEntries.items[currentIndex - 1] : null;
+  const olderEntry =
+    currentIndex < allEntries.items.length - 1
+      ? allEntries.items[currentIndex + 1]
+      : null;
+
+  return {
+    entry,
+    previousEntry: olderEntry,
+    nextEntry: newerEntry,
+  };
+}
+
+export async function generateMetadata({
+  params,
+}: ChangelogEntryPageProps): Promise<Metadata> {
+  const slug = (await params).slug;
+  const data = await getChangelogData(slug);
+
+  if (!data) {
+    notFound();
+  }
+
+  const { title, publishedAt, description, image } = data.entry;
+
+  return Promise.resolve({
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: 'article',
+      publishedTime: publishedAt,
+      url: data.entry.url,
+      images: image
+        ? [
+            {
+              url: image,
+            },
+          ]
+        : [],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: image ? [image] : [],
+    },
+  });
+}
+
+async function ChangelogEntryPage({ params }: ChangelogEntryPageProps) {
+  const slug = (await params).slug;
+  const data = await getChangelogData(slug);
+
+  if (!data) {
+    notFound();
+  }
+
+  return (
+    <div className="container sm:max-w-none sm:p-0">
+      <ChangelogDetail
+        entry={data.entry}
+        content={data.entry.content}
+        previousEntry={data.previousEntry ?? null}
+        nextEntry={data.nextEntry ?? null}
+      />
+    </div>
+  );
+}
+
+export default ChangelogEntryPage;