feat: enable custom pages

Author: mvriu5

src/app/(landing)/[locale]/[...rest]/page.tsx

@@ -1,5 +1,34 @@
+import { PageBlocks } from "@/components/PageBlockRenderer"
+import { LandingContainer } from "@/components/ui/LandingContainer"
+import { getCustomLandingPage } from "@/lib/cms"
+import { isSupportedLocale } from "@/lib/i18n"
+import { getCustomLandingPageMetadata } from "@/lib/pageMetadata"
+import type { Metadata } from "next"
 import { notFound } from "next/navigation"
 
-export default function UnknownLocalizedPage() {
-    notFound()
+type CatchAllPageParams = Promise<{ locale: string; rest: string[] }>
+
+async function getCatchAllParams(params: CatchAllPageParams) {
+    const { locale, rest } = await params
+    if (!isSupportedLocale(locale) || rest.length !== 1 || !rest[0]?.trim()) notFound()
+
+    return { locale, slug: rest[0] }
+}
+
+export default async function CustomLandingPage({ params }: { params: CatchAllPageParams }) {
+    const { locale, slug } = await getCatchAllParams(params)
+    const page = await getCustomLandingPage(slug, locale)
+    if (!page) notFound()
+
+    return (
+        <LandingContainer>
+            <div className="h-12 lg:h-16" aria-hidden="true" />
+            <PageBlocks blocks={page.layout} locale={locale} />
+        </LandingContainer>
+    )
+}
+
+export async function generateMetadata({ params }: { params: CatchAllPageParams }): Promise<Metadata> {
+    const { locale, slug } = await getCatchAllParams(params)
+    return getCustomLandingPageMetadata(slug, locale)
 }

src/app/(landing)/server-sitemap.xml/route.ts

@@ -1,4 +1,4 @@
-import { getActionSlugs, getBlogSlugs, getJobSlugs } from "@/lib/cms"
+import { getActionSlugs, getBlogSlugs, getCustomLandingPageSlugs, getJobSlugs } from "@/lib/cms"
 import { SUPPORTED_LOCALES } from "@/lib/i18n"
 import { resolveSiteUrl } from "@/lib/siteConfig"
 
@@ -44,12 +44,20 @@ export async function GET() {
 
     const localizedUrls = await Promise.all(
         SUPPORTED_LOCALES.map(async (locale) => {
-            const [blogSlugs, jobSlugs, actionSlugs] = await Promise.all([
+            const [blogSlugs, jobSlugs, actionSlugs, customPageSlugs] = await Promise.all([
                 getBlogSlugs(locale),
                 getJobSlugs(locale),
-                getActionSlugs(locale)
+                getActionSlugs(locale),
+                getCustomLandingPageSlugs(locale),
             ])
 
+            const customPageUrls = customPageSlugs.map((slug): SitemapUrl => ({
+                loc: new URL(`/${locale}/${slug}`, siteUrl).toString(),
+                lastmod,
+                changefreq: "weekly",
+                priority: 0.7,
+            }))
+
             const blogUrls = blogSlugs.map((slug): SitemapUrl => ({
                 loc: new URL(`/${locale}/blog/${slug}`, siteUrl).toString(),
                 lastmod,
@@ -71,7 +79,7 @@ export async function GET() {
                 priority: 0.6
             }))
 
-            return [...blogUrls, ...jobUrls, ...actionUrls]
+            return [...customPageUrls, ...blogUrls, ...jobUrls, ...actionUrls]
         })
     )
 

src/collections/pages.ts

@@ -29,47 +29,124 @@ import { WideHeroBlock } from "@/blocks/WideHeroBlock"
 import { StatsBlock } from "@/blocks/StatsBlock"
 import { FlowExampleBlock } from "@/blocks/FlowExampleBlock"
 
+const RESERVED_PAGE_SLUGS = [
+    "main",
+    "jobs",
+    "blog",
+    "features",
+    "about-us",
+    "legal-notice",
+    "privacy",
+    "terms",
+    "contact",
+    "actions",
+    "action-details",
+    "community-edition",
+    "enterprise-edition",
+    "subscription",
+] as const
+
+function formatSlug(value: string) {
+    return value
+        .normalize("NFKD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+}
+
+function isCustomPage(siblingData: unknown) {
+    return Boolean(siblingData && typeof siblingData === "object" && "customPage" in siblingData && siblingData.customPage)
+}
+
 export const Pages: CollectionConfig = {
     slug: "pages",
     admin: {
         useAsTitle: "title",
-        defaultColumns: ["title", "slug", "updatedAt"],
+        defaultColumns: ["title", "slug", "customSlug", "updatedAt"],
     },
     access: {
         read: () => true,
         create: ({ req }) => Boolean(req.user),
         update: ({ req }) => Boolean(req.user),
         delete: ({ req }) => Boolean(req.user),
     },
+    hooks: {
+        beforeValidate: [
+            ({ data, originalDoc }) => {
+                if (!data) return data
+
+                const customPage = Boolean(data.customPage ?? originalDoc?.customPage)
+                if (!customPage) {
+                    data.customSlug = null
+                    return data
+                }
+
+                const submittedSlug = typeof data.customSlug === "string" ? data.customSlug : typeof originalDoc?.customSlug === "string" ? originalDoc.customSlug : ""
+                const title = typeof data.title === "string" ? data.title : typeof originalDoc?.title === "string" ? originalDoc.title : ""
+
+                data.slug = null
+                data.customSlug = formatSlug(submittedSlug.trim() || title)
+
+                return data
+            },
+        ],
+    },
     fields: [
         {
             name: "title",
             type: "text",
             required: true,
             localized: true,
         },
+        {
+            name: "customPage",
+            label: "Custom Page",
+            type: "checkbox",
+            defaultValue: false,
+            admin: {
+                description: "Enable this to use a custom URL slug instead of one of the predefined pages.",
+            },
+        },
         {
             name: "slug",
+            label: "Slug",
             type: "select",
-            required: true,
+            required: false,
             unique: true,
             index: true,
-            options: [
-                { label: "main", value: "main" },
-                { label: "jobs", value: "jobs" },
-                { label: "blog", value: "blog" },
-                { label: "features", value: "features" },
-                { label: "about-us", value: "about-us" },
-                { label: "legal-notice", value: "legal-notice" },
-                { label: "privacy", value: "privacy" },
-                { label: "terms", value: "terms" },
-                { label: "contact", value: "contact" },
-                { label: "actions", value: "actions" },
-                { label: "action-details", value: "action-details" },
-                { label: "community-edition", value: "community-edition" },
-                { label: "enterprise-edition", value: "enterprise-edition" },
-                { label: "subscription", value: "subscription" },
-            ],
+            options: RESERVED_PAGE_SLUGS.map((slug) => ({ label: slug, value: slug })),
+            admin: {
+                condition: (_, siblingData) => !isCustomPage(siblingData),
+            },
+            validate: (value: string | null | undefined, { siblingData }: { siblingData: unknown }) => {
+                if (isCustomPage(siblingData)) return true
+                return value ? true : "Select a predefined slug or enable Custom Page."
+            },
+        },
+        {
+            name: "customSlug",
+            label: "Slug",
+            type: "text",
+            required: false,
+            unique: true,
+            index: true,
+            admin: {
+                condition: (_, siblingData) => isCustomPage(siblingData),
+                description: "Generated from the title when left empty. Predefined page slugs cannot be used.",
+            },
+            validate: (value: string | null | undefined, { siblingData }: { siblingData: unknown }) => {
+                if (!isCustomPage(siblingData)) return true
+
+                const slug = formatSlug(typeof value === "string" ? value : "")
+                if (!slug) return true
+                if ((RESERVED_PAGE_SLUGS as readonly string[]).includes(slug)) {
+                    return `"${slug}" is reserved for a predefined page.`
+                }
+
+                return true
+            },
         },
         {
             name: "layout",

src/lib/cms.ts

@@ -327,6 +327,35 @@ const getLandingPageCached = cache(async (cachedSlug: string, cachedLocale: AppL
     })
 })
 
+const getCustomLandingPageCached = cache(async (customSlug: string, locale: AppLocale): Promise<Page | null> => {
+    return cmsFindOne(`getCustomLandingPage(${customSlug}, ${locale})`, null, {
+        collection: "pages",
+        locale,
+        fallbackLocale: DEFAULT_LOCALE,
+        where: {
+            and: [{ customPage: { equals: true } }, { customSlug: { equals: customSlug } }],
+        },
+        limit: 1,
+        depth: 2,
+        pagination: false,
+    })
+})
+
+const getCustomLandingPageSlugsCached = cache(async (locale: AppLocale): Promise<string[]> => {
+    const pages = await cmsFindMany<Pick<Page, "customSlug">>(`getCustomLandingPageSlugs(${locale})`, [], {
+        collection: "pages",
+        locale,
+        fallbackLocale: DEFAULT_LOCALE,
+        where: { customPage: { equals: true } },
+        pagination: false,
+        limit: 1000,
+        depth: 0,
+        select: { customSlug: true },
+    })
+
+    return pages.flatMap((page) => (page.customSlug ? [page.customSlug] : []))
+})
+
 const getNavigationCached = cache(async (locale: AppLocale): Promise<NavigationData | null> => {
     return cmsFindGlobal<Navigation>(`getNavigation(${locale})`, null, {
         slug: "navigation",
@@ -580,6 +609,14 @@ export async function getLandingPage(slug = "main", locale: AppLocale = DEFAULT_
     return getLandingPageCached(slug, locale)
 }
 
+export async function getCustomLandingPage(customSlug: string, locale: AppLocale = DEFAULT_LOCALE): Promise<Page | null> {
+    return getCustomLandingPageCached(customSlug, locale)
+}
+
+export async function getCustomLandingPageSlugs(locale: AppLocale = DEFAULT_LOCALE): Promise<string[]> {
+    return getCustomLandingPageSlugsCached(locale)
+}
+
 export async function getNavigation(locale: AppLocale = DEFAULT_LOCALE) {
     return getNavigationCached(locale)
 }

src/lib/pageMetadata.ts

@@ -1,5 +1,5 @@
 import { type Media, type Page } from "@/payload-types"
-import { getLandingPage } from "@/lib/cms"
+import { getCustomLandingPage, getLandingPage } from "@/lib/cms"
 import { isSupportedLocale, type AppLocale } from "@/lib/i18n"
 import { createMetadata, resolveSiteUrl } from "@/lib/siteConfig"
 import type { Metadata } from "next"
@@ -29,10 +29,24 @@ export async function getLandingPageMetadata(slug: string, locale: string): Prom
     return mapLandingPageToMetadata(page, locale)
 }
 
+export async function getCustomLandingPageMetadata(slug: string, locale: string): Promise<Metadata> {
+    if (!isSupportedLocale(locale)) {
+        return createMetadata()
+    }
+
+    const page = await getCustomLandingPage(slug, locale)
+    if (!page) {
+        return createMetadata()
+    }
+
+    return mapLandingPageToMetadata(page, locale)
+}
+
 function mapLandingPageToMetadata(page: Page, locale: AppLocale): Metadata {
     const title = page.meta?.title ?? page.title
     const description = page.meta?.description ?? undefined
-    const canonicalPath = getPagePath(locale, page.slug)
+    const slug = page.customPage ? page.customSlug : page.slug
+    const canonicalPath = getPagePath(locale, slug ?? "")
     const canonicalUrl = new URL(canonicalPath, resolveSiteUrl()).toString()
     const image = getMediaUrl(page.meta?.image)
 

src/migrations/20260727_145500_custom_pages.json

@@ -0,0 +1,57 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.pages": {
+      "name": "pages",
+      "schema": "public",
+      "columns": {
+        "custom_page": {
+          "name": "custom_page",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "enum_pages_slug",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "custom_slug": {
+          "name": "custom_slug",
+          "type": "varchar",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "pages_slug_idx": {
+          "name": "pages_slug_idx",
+          "columns": [{ "expression": "slug", "isExpression": false, "asc": true, "nulls": "last" }],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "pages_custom_slug_idx": {
+          "name": "pages_custom_slug_idx",
+          "columns": [{ "expression": "custom_slug", "isExpression": false, "asc": true, "nulls": "last" }],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {}
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "_meta": {},
+  "id": "20260727_145500_custom_pages",
+  "prevId": "20260726_220500_cookie_banner_optional_fields"
+}

src/migrations/20260727_145500_custom_pages.ts

@@ -0,0 +1,27 @@
+import { MigrateDownArgs, MigrateUpArgs, sql } from "@payloadcms/db-postgres"
+
+export async function up({ db }: MigrateUpArgs): Promise<void> {
+    await db.execute(sql`
+        ALTER TABLE "pages" ALTER COLUMN "slug" DROP NOT NULL;
+        ALTER TABLE "pages" ADD COLUMN "custom_page" boolean DEFAULT false;
+        ALTER TABLE "pages" ADD COLUMN "custom_slug" varchar;
+        CREATE UNIQUE INDEX "pages_custom_slug_idx" ON "pages" USING btree ("custom_slug");
+    `)
+}
+
+export async function down({ db }: MigrateDownArgs): Promise<void> {
+    await db.execute(sql`
+        DO $$
+        BEGIN
+            IF EXISTS (SELECT 1 FROM "pages" WHERE "custom_page" = true) THEN
+                RAISE EXCEPTION 'Cannot roll back custom pages while custom page records exist.';
+            END IF;
+        END
+        $$;
+
+        DROP INDEX "public"."pages_custom_slug_idx";
+        ALTER TABLE "pages" DROP COLUMN "custom_slug";
+        ALTER TABLE "pages" DROP COLUMN "custom_page";
+        ALTER TABLE "pages" ALTER COLUMN "slug" SET NOT NULL;
+    `)
+}