"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", h4: "h4", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Callout, CodeBlock, CodeTabs, InteractiveChart, PerformanceMetrics, QuickTip, TabsContent, TabsList, TabsTrigger} = _components; if (!Callout) _missingMdxReference("Callout", true); if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!CodeTabs) _missingMdxReference("CodeTabs", true); if (!InteractiveChart) _missingMdxReference("InteractiveChart", true); if (!PerformanceMetrics) _missingMdxReference("PerformanceMetrics", true); if (!QuickTip) _missingMdxReference("QuickTip", true); if (!TabsContent) _missingMdxReference("TabsContent", true); if (!TabsList) _missingMdxReference("TabsList", true); if (!TabsTrigger) _missingMdxReference("TabsTrigger", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["Building a ", _jsx(_components.strong, { children: "full-stack Next.js application" }), " with custom UI components and a headless CMS involves orchestrating several technologies. This comprehensive guide walks through setting up a Next.js 15 project with ", _jsx(_components.strong, { children: "Shadcn/UI" }), " (Tailwind CSS + Radix UI) for a polished interface, using ", _jsx(_components.strong, { children: "Supabase" }), " as a headless CMS (database, storage, and auth), and implementing an ", _jsx(_components.strong, { children: "admin content editor" }), " with rich media support that outputs content in Portable Text format."] }), "\n", _jsxs(Callout, { type: "info", title: "What You'll Build", children: [_jsx(_components.p, { children: "By the end of this guide, you'll have a production-ready Next.js 15 application featuring:" }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Modern Shadcn/UI components with Tailwind CSS" }), "\n", _jsx(_components.li, { children: "Supabase backend with authentication and role-based access" }), "\n", _jsx(_components.li, { children: "Rich admin interface for content management" }), "\n", _jsx(_components.li, { children: "Portable Text rendering system" }), "\n", _jsx(_components.li, { children: "Optimized performance with SSG and SSR" }), "\n"] })] }), "\n", _jsx(_components.h2, { id: "critical-nextjs-15-considerations", children: _jsx(_components.a, { className: "anchor-link", href: "#critical-nextjs-15-considerations", children: "Critical Next.js 15 Considerations" }) }), "\n", _jsx(Callout, { type: "warning", title: "Important Version Notes", children: _jsx(_components.p, { children: "Before starting, be aware of these Next.js 15 considerations that may impact your project:" }) }), "\n", _jsx(QuickTip, { type: "warning", title: "Metadata Streaming Issue", children: _jsx(_components.p, { children: "Next.js 15.1+ has a known issue with metadata streaming that can significantly impact SEO for deployments outside of Vercel. If SEO is critical for your project and you're not deploying to Vercel, consider using Next.js 15.0.x or waiting for a fix." }) }), "\n", _jsx(QuickTip, { type: "error", title: "Security Update Required", children: _jsx(_components.p, { children: "Ensure you're using Next.js 15.2.3 or later to avoid security vulnerability CVE-2025-29927." }) }), "\n", _jsx(QuickTip, { type: "tip", title: "App Router Improvements", children: _jsx(_components.p, { children: "Next.js 15 includes significant improvements to the App Router, but be aware of potential breaking changes when upgrading from earlier versions." }) }), "\n", _jsx(_components.h2, { id: "project-setup-nextjs-15-with-tailwind-and-shadcn-ui", children: _jsx(_components.a, { className: "anchor-link", href: "#project-setup-nextjs-15-with-tailwind-and-shadcn-ui", children: "Project Setup: Next.js 15 with Tailwind and Shadcn UI" }) }), "\n", _jsx(_components.p, { children: "Let's set up our modern development stack step by step:" }), "\n", _jsx(_components.h3, { id: "step-1-initialize-nextjs-15-app", children: _jsx(_components.a, { className: "anchor-link", href: "#step-1-initialize-nextjs-15-app", children: "Step 1: Initialize Next.js 15 App" }) }), "\n", _jsx(CodeBlock, { title: "Create Next.js 15 Project", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: ["npx create-next-app@latest my-app --tailwind --typescript --app\n", _jsx(_components.span, { className: "hljs-built_in", children: "cd" }), " my-app\n"] }) }) }), "\n", _jsx(QuickTip, { type: "tip", title: "Why These Flags?", children: _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "--tailwind --typescript --app" }), " flags ensure you get Tailwind CSS, TypeScript support, and the App Router configured out of the box."] }) }), "\n", _jsx(_components.h3, { id: "step-2-add-shadcnui", children: _jsx(_components.a, { className: "anchor-link", href: "#step-2-add-shadcnui", children: "Step 2: Add Shadcn/UI" }) }), "\n", _jsx(_components.p, { children: "Shadcn UI is a collection of copy-pastable, themeable components built on Tailwind CSS and Radix UI primitives." }), "\n", _jsx(CodeBlock, { title: "Initialize Shadcn UI", copy: true, children: _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npx shadcn@latest init\n" }) }) }), "\n", _jsx(_components.p, { children: "When prompted, choose your preferred configuration:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Style" }), ": Default or New York"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Base color" }), ": Your brand color"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "CSS variables" }), ": Yes (recommended)"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "step-3-install-essential-ui-components", children: _jsx(_components.a, { className: "anchor-link", href: "#step-3-install-essential-ui-components", children: "Step 3: Install Essential UI Components" }) }), "\n", _jsxs(CodeTabs, { defaultValue: "essential", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "essential", children: "Essential Components" }), _jsx(TabsTrigger, { value: "admin", children: "Admin Interface" }), _jsx(TabsTrigger, { value: "forms", children: "Form Components" })] }), _jsx(TabsContent, { value: "essential", children: _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npx shadcn@latest add button input card dialog sheet\nnpx shadcn@latest add dropdown-menu avatar badge\n" }) }) }), _jsx(TabsContent, { value: "admin", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: ["npx shadcn@latest add form table sidebar navigation-menu\nnpx shadcn@latest add tabs ", _jsx(_components.span, { className: "hljs-keyword", children: "select" }), " textarea switch\n"] }) }) }), _jsx(TabsContent, { value: "forms", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: ["npx shadcn@latest add label checkbox radio-group\nnpx shadcn@latest add calendar popover ", _jsx(_components.span, { className: "hljs-built_in", children: "command" }), "\n"] }) }) })] }), "\n", _jsx(_components.h3, { id: "step-4-verify-tailwind-configuration", children: _jsx(_components.a, { className: "anchor-link", href: "#step-4-verify-tailwind-configuration", children: "Step 4: Verify Tailwind Configuration" }) }), "\n", _jsxs(_components.p, { children: ["Your ", _jsx(_components.code, { children: "tailwind.config.ts" }), " should include the Shadcn UI configuration:"] }), "\n", _jsx(CodeBlock, { title: "tailwind.config.ts", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Config" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"tailwindcss\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "config" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Config" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), ": [\n ", _jsx(_components.span, { className: "hljs-string", children: "\"./pages/**/*.{ts,tsx}\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/**/*.{ts,tsx}\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"./app/**/*.{ts,tsx}\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"./src/**/*.{ts,tsx}\"" }), ",\n ],\n ", _jsx(_components.span, { className: "hljs-attr", children: "theme" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "extend" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "colors" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "border" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"hsl(var(--border))\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "input" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"hsl(var(--input))\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "ring" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"hsl(var(--ring))\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "background" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"hsl(var(--background))\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "foreground" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"hsl(var(--foreground))\"" }), ",\n ", _jsx(_components.span, { className: "hljs-comment", children: "// ... additional CSS variables" }), "\n },\n },\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "plugins" }), ": [", _jsx(_components.span, { className: "hljs-built_in", children: "require" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"tailwindcss-animate\"" }), ")],\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " config\n"] }) }) }), "\n", _jsx(Callout, { type: "success", title: "Foundation Complete", children: _jsx(_components.p, { children: "With Next.js 15, Tailwind CSS 3.4+, and Shadcn UI in place, you now have a modern, accessible UI foundation that provides a consistent design system and accelerates building common UI patterns." }) }), "\n", _jsx(_components.h2, { id: "setting-up-supabase-as-a-headless-cms-and-auth-backend", children: _jsx(_components.a, { className: "anchor-link", href: "#setting-up-supabase-as-a-headless-cms-and-auth-backend", children: "Setting Up Supabase as a Headless CMS and Auth Backend" }) }), "\n", _jsxs(Callout, { type: "info", title: "Why Choose Supabase?", children: [_jsxs(_components.p, { children: ["Supabase is an open-source Firebase alternative built on PostgreSQL, offering a complete backend solution with database, authentication, storage, and real-time subscriptions. As a ", _jsx(_components.strong, { children: "headless CMS" }), ", it provides:"] }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Full Schema Control" }), ": Create and modify tables freely"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "PostgreSQL Power" }), ": Advanced queries, triggers, and functions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Built-in Auth" }), ": Row Level Security and user management"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Real-time Updates" }), ": Live content synchronization"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Edge Functions" }), ": Serverless compute at the edge"] }), "\n"] })] }), "\n", _jsx(_components.h3, { id: "1-create-a-supabase-project-and-connect-nextjs-15", children: _jsx(_components.a, { className: "anchor-link", href: "#1-create-a-supabase-project-and-connect-nextjs-15", children: "1. Create a Supabase Project and Connect Next.js 15" }) }), "\n", _jsx(_components.h4, { id: "create-your-supabase-project", children: _jsx(_components.a, { className: "anchor-link", href: "#create-your-supabase-project", children: "Create Your Supabase Project" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Sign up at ", _jsx(_components.a, { href: "https://supabase.com", children: "supabase.com" }), " and create a new project"] }), "\n", _jsxs(_components.li, { children: ["Navigate to ", _jsx(_components.strong, { children: "Settings" }), " → ", _jsx(_components.strong, { children: "API" }), " to find your credentials"] }), "\n", _jsxs(_components.li, { children: ["Copy your ", _jsx(_components.strong, { children: "Project URL" }), " and ", _jsx(_components.strong, { children: "Anon Public Key" })] }), "\n"] }), "\n", _jsx(_components.h4, { id: "configure-environment-variables", children: _jsx(_components.a, { className: "anchor-link", href: "#configure-environment-variables", children: "Configure Environment Variables" }) }), "\n", _jsx(CodeBlock, { title: ".env.local", copy: true, children: _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "NEXT_PUBLIC_SUPABASE_URL=your_project_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key\nSUPABASE_SERVICE_ROLE_KEY=your_service_role_key\n" }) }) }), "\n", _jsx(QuickTip, { type: "warning", title: "Security Note", children: _jsxs(_components.p, { children: ["Never commit your ", _jsx(_components.code, { children: ".env.local" }), " file to version control. Add it to your ", _jsx(_components.code, { children: ".gitignore" }), " file."] }) }), "\n", _jsx(_components.h4, { id: "install-supabase-dependencies", children: _jsx(_components.a, { className: "anchor-link", href: "#install-supabase-dependencies", children: "Install Supabase Dependencies" }) }), "\n", _jsx(CodeBlock, { title: "Install Supabase Packages", copy: true, children: _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm install @supabase/supabase-js @supabase/ssr\n" }) }) }), "\n", _jsx(_components.h4, { id: "configure-supabase-clients-for-nextjs-15", children: _jsx(_components.a, { className: "anchor-link", href: "#configure-supabase-clients-for-nextjs-15", children: "Configure Supabase Clients for Next.js 15" }) }), "\n", _jsxs(CodeTabs, { defaultValue: "client", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "client", children: "Client-side" }), _jsx(TabsTrigger, { value: "server", children: "Server-side" }), _jsx(TabsTrigger, { value: "middleware", children: "Middleware" })] }), _jsx(TabsContent, { value: "client", children: _jsx(CodeBlock, { title: "lib/supabase/client.ts", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createBrowserClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@supabase/ssr'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createClient" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createBrowserClient" }), "(\n process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_URL" }), "!,\n process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_ANON_KEY" }), "!,\n )\n}\n"] }) }) }) }), _jsx(TabsContent, { value: "server", children: _jsx(CodeBlock, { title: "lib/supabase/server.ts", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createServerClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@supabase/ssr'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { cookies } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/headers'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " cookieStore = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "cookies" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "(\n process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_URL" }), "!,\n process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_ANON_KEY" }), "!,\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "cookies" }), ": {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "getAll" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " cookieStore.", _jsx(_components.span, { className: "hljs-title function_", children: "getAll" }), "()\n },\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setAll" }), "(", _jsx(_components.span, { className: "hljs-params", children: "cookiesToSet" }), ") {\n cookiesToSet.", _jsx(_components.span, { className: "hljs-title function_", children: "forEach" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ name, value, options }" }), ") =>"] }), " {\n cookieStore.", _jsx(_components.span, { className: "hljs-title function_", children: "set" }), "(name, value, options)\n })\n },\n },\n },\n )\n}\n"] }) }) }) }), _jsx(TabsContent, { value: "middleware", children: _jsx(CodeBlock, { title: "middleware.ts", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createServerClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@supabase/ssr'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ", ", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/server'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "middleware" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "request" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "let" }), " supabaseResponse = ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "next" }), "({\n request,\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "(\n process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_URL" }), "!,\n process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_ANON_KEY" }), "!,\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "cookies" }), ": {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "getAll" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " request.", _jsx(_components.span, { className: "hljs-property", children: "cookies" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getAll" }), "()\n },\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setAll" }), "(", _jsx(_components.span, { className: "hljs-params", children: "cookiesToSet" }), ") {\n cookiesToSet.", _jsx(_components.span, { className: "hljs-title function_", children: "forEach" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ name, value, options }" }), ") =>"] }), "\n request.", _jsx(_components.span, { className: "hljs-property", children: "cookies" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "set" }), "(name, value),\n )\n supabaseResponse = ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "next" }), "({\n request,\n })\n cookiesToSet.", _jsx(_components.span, { className: "hljs-title function_", children: "forEach" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ name, value, options }" }), ") =>"] }), "\n supabaseResponse.", _jsx(_components.span, { className: "hljs-property", children: "cookies" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "set" }), "(name, value, options),\n )\n },\n },\n },\n )\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Refresh session if expired" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase.", _jsx(_components.span, { className: "hljs-property", children: "auth" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getUser" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " supabaseResponse\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " config = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "matcher" }), ": [\n ", _jsx(_components.span, { className: "hljs-string", children: "'/((?!_next/static|_next/image|favicon.ico|.*\\\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'" }), ",\n ],\n}\n"] }) }) }) })] }), "\n", _jsx(Callout, { type: "success", title: "Authentication State Management", children: _jsx(_components.p, { children: "This pattern ensures proper authentication state management across server and client boundaries in Next.js 15, with automatic session refresh and secure cookie handling." }) }), "\n", _jsx(_components.h3, { id: "2-designing-the-database-schema-posts-portfolio-pages-tags-authors", children: _jsx(_components.a, { className: "anchor-link", href: "#2-designing-the-database-schema-posts-portfolio-pages-tags-authors", children: "2. Designing the Database Schema (Posts, Portfolio, Pages, Tags, Authors)" }) }), "\n", _jsx(_components.p, { children: "Let's design a comprehensive content management schema that leverages PostgreSQL's advanced features:" }), "\n", _jsx(_components.h4, { id: "core-tables-overview", children: _jsx(_components.a, { className: "anchor-link", href: "#core-tables-overview", children: "Core Tables Overview" }) }), "\n", _jsx(CodeBlock, { title: "Database Schema SQL", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-sql", children: [_jsx(_components.span, { className: "hljs-comment", children: "-- User profiles extending Supabase Auth" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE TABLE" }), " profiles (\n id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "REFERENCES" }), " auth.users ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "DELETE" }), " CASCADE ", _jsx(_components.span, { className: "hljs-keyword", children: "PRIMARY KEY" }), ",\n display_name TEXT,\n avatar_url TEXT,\n bio TEXT,\n role TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "CHECK" }), " (role ", _jsx(_components.span, { className: "hljs-keyword", children: "IN" }), " (", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'editor'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'reader'" }), ")) ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'reader'" }), ",\n created_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW(),\n updated_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW()\n);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Blog posts with Portable Text content" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE TABLE" }), " posts (\n id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " gen_random_uuid() ", _jsx(_components.span, { className: "hljs-keyword", children: "PRIMARY KEY" }), ",\n title TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ",\n slug TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "UNIQUE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ",\n excerpt TEXT,\n content JSONB, ", _jsx(_components.span, { className: "hljs-comment", children: "-- Portable Text structure" }), "\n cover_image_url TEXT,\n meta_description TEXT,\n published_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE,\n author_id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "REFERENCES" }), " profiles(id) ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "DELETE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "SET" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NULL" }), ",\n status TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "CHECK" }), " (status ", _jsx(_components.span, { className: "hljs-keyword", children: "IN" }), " (", _jsx(_components.span, { className: "hljs-string", children: "'draft'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'archived'" }), ")) ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'draft'" }), ",\n created_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW(),\n updated_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW()\n);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Portfolio projects" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE TABLE" }), " projects (\n id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " gen_random_uuid() ", _jsx(_components.span, { className: "hljs-keyword", children: "PRIMARY KEY" }), ",\n title TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ",\n slug TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "UNIQUE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ",\n description TEXT,\n content JSONB, ", _jsx(_components.span, { className: "hljs-comment", children: "-- Portable Text structure" }), "\n project_url TEXT,\n github_url TEXT,\n technologies TEXT[],\n featured_image_url TEXT,\n gallery_urls TEXT[],\n status TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "CHECK" }), " (status ", _jsx(_components.span, { className: "hljs-keyword", children: "IN" }), " (", _jsx(_components.span, { className: "hljs-string", children: "'draft'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'archived'" }), ")) ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'draft'" }), ",\n created_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW(),\n updated_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW()\n);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Standalone pages" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE TABLE" }), " pages (\n id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " gen_random_uuid() ", _jsx(_components.span, { className: "hljs-keyword", children: "PRIMARY KEY" }), ",\n slug TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "UNIQUE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ",\n title TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ",\n content JSONB, ", _jsx(_components.span, { className: "hljs-comment", children: "-- Portable Text structure" }), "\n meta_description TEXT,\n template TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'default'" }), ",\n published_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE,\n created_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW(),\n updated_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW()\n);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Categories and tags" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE TABLE" }), " categories (\n id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " gen_random_uuid() ", _jsx(_components.span, { className: "hljs-keyword", children: "PRIMARY KEY" }), ",\n name TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "UNIQUE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ",\n slug TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "UNIQUE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ",\n description TEXT,\n color TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'#6366f1'" }), ",\n created_at ", _jsx(_components.span, { className: "hljs-type", children: "TIMESTAMP" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "TIME" }), " ZONE ", _jsx(_components.span, { className: "hljs-keyword", children: "DEFAULT" }), " NOW()\n);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Junction tables for many-to-many relationships" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE TABLE" }), " post_categories (\n post_id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "REFERENCES" }), " posts(id) ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "DELETE" }), " CASCADE,\n category_id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "REFERENCES" }), " categories(id) ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "DELETE" }), " CASCADE,\n ", _jsx(_components.span, { className: "hljs-keyword", children: "PRIMARY KEY" }), " (post_id, category_id)\n);\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE TABLE" }), " project_categories (\n project_id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "REFERENCES" }), " projects(id) ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "DELETE" }), " CASCADE,\n category_id UUID ", _jsx(_components.span, { className: "hljs-keyword", children: "REFERENCES" }), " categories(id) ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "DELETE" }), " CASCADE,\n ", _jsx(_components.span, { className: "hljs-keyword", children: "PRIMARY KEY" }), " (project_id, category_id)\n);\n"] }) }) }), "\n", _jsx(_components.h4, { id: "database-features--benefits", children: _jsx(_components.a, { className: "anchor-link", href: "#database-features--benefits", children: "Database Features & Benefits" }) }), "\n", _jsx(QuickTip, { type: "tip", title: "UUID Primary Keys", children: _jsx(_components.p, { children: "UUIDs provide better distributed systems compatibility and prevent enumeration attacks compared to sequential integers." }) }), "\n", _jsx(QuickTip, { type: "tip", title: "JSONB for Content", children: _jsx(_components.p, { children: "JSONB columns allow flexible, searchable content structure perfect for Portable Text while maintaining query performance." }) }), "\n", _jsx(QuickTip, { type: "tip", title: "PostgreSQL Enums", children: _jsx(_components.p, { children: "CHECK constraints for status fields ensure data integrity at the database level." }) }), "\n", _jsx(_components.h4, { id: "performance-optimizations", children: _jsx(_components.a, { className: "anchor-link", href: "#performance-optimizations", children: "Performance Optimizations" }) }), "\n", _jsx(CodeBlock, { title: "Database Indexes", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-sql", children: [_jsx(_components.span, { className: "hljs-comment", children: "-- Indexes for common queries" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_status_published_at ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts(status, published_at) \n ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " status ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_slug ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts(slug) ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " status ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_projects_status ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " projects(status) ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " status ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_profiles_role ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles(role);\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_author ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts(author_id);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- GIN index for JSONB content search" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_content_gin ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " GIN(content);\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_projects_content_gin ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " projects ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " GIN(content);\n"] }) }) }), "\n", _jsx(_components.h4, { id: "automatic-profile-creation", children: _jsx(_components.a, { className: "anchor-link", href: "#automatic-profile-creation", children: "Automatic Profile Creation" }) }), "\n", _jsx(CodeBlock, { title: "Database Triggers", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-sql", children: [_jsx(_components.span, { className: "hljs-comment", children: "-- Function to handle new user creation" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "OR" }), " REPLACE ", _jsx(_components.span, { className: "hljs-keyword", children: "FUNCTION" }), " handle_new_user()\n", _jsx(_components.span, { className: "hljs-keyword", children: "RETURNS" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "TRIGGER" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "AS" }), " $$\n", _jsx(_components.span, { className: "hljs-keyword", children: "BEGIN" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "INSERT INTO" }), " profiles (id, display_name, role)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "VALUES" }), " (NEW.id, NEW.raw_user_meta_data", _jsx(_components.span, { className: "hljs-operator", children: "-" }), _jsx(_components.span, { className: "hljs-operator", children: ">>" }), _jsx(_components.span, { className: "hljs-string", children: "'full_name'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'reader'" }), ");\n ", _jsx(_components.span, { className: "hljs-keyword", children: "RETURN" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NEW" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "END" }), ";\n$$ ", _jsx(_components.span, { className: "hljs-keyword", children: "LANGUAGE" }), " plpgsql SECURITY DEFINER;\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Trigger for automatic profile creation" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "TRIGGER" }), " on_auth_user_created\n AFTER ", _jsx(_components.span, { className: "hljs-keyword", children: "INSERT" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " auth.users\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "EACH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "ROW" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "EXECUTE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FUNCTION" }), " handle_new_user();\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Function to update timestamps" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "OR" }), " REPLACE ", _jsx(_components.span, { className: "hljs-keyword", children: "FUNCTION" }), " update_updated_at_column()\n", _jsx(_components.span, { className: "hljs-keyword", children: "RETURNS" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "TRIGGER" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "AS" }), " $$\n", _jsx(_components.span, { className: "hljs-keyword", children: "BEGIN" }), "\n NEW.updated_at ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " NOW();\n ", _jsx(_components.span, { className: "hljs-keyword", children: "RETURN" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NEW" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "END" }), ";\n$$ ", _jsx(_components.span, { className: "hljs-keyword", children: "LANGUAGE" }), " plpgsql;\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Apply to all tables with updated_at" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "TRIGGER" }), " update_profiles_updated_at \n BEFORE ", _jsx(_components.span, { className: "hljs-keyword", children: "UPDATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "EACH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "ROW" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "EXECUTE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FUNCTION" }), " update_updated_at_column();\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "TRIGGER" }), " update_posts_updated_at \n BEFORE ", _jsx(_components.span, { className: "hljs-keyword", children: "UPDATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "EACH" }), " ", _jsx(_components.span, { className: "hljs-type", children: "ROW" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "EXECUTE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FUNCTION" }), " update_updated_at_column();\n"] }) }) }), "\n", _jsx(Callout, { type: "success", title: "Modern Database Design", children: _jsx(_components.p, { children: "This schema leverages PostgreSQL's advanced features including JSONB for flexible content, UUID primary keys for distributed compatibility, and triggers for automatic data management." }) }), "\n", _jsx(_components.h3, { id: "3-supabase-authentication-and-rbac-for-admineditor-roles", children: _jsx(_components.a, { className: "anchor-link", href: "#3-supabase-authentication-and-rbac-for-admineditor-roles", children: "3. Supabase Authentication and RBAC for Admin/Editor Roles" }) }), "\n", _jsx(_components.p, { children: "Supabase Auth provides built-in user management with powerful Row Level Security (RLS) for fine-grained access control." }), "\n", _jsx(_components.h4, { id: "implementing-row-level-security-policies", children: _jsx(_components.a, { className: "anchor-link", href: "#implementing-row-level-security-policies", children: "Implementing Row Level Security Policies" }) }), "\n", _jsx(CodeBlock, { title: "RLS Policies for Content Security", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-sql", children: [_jsx(_components.span, { className: "hljs-comment", children: "-- Enable RLS on all content tables" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "ALTER TABLE" }), " posts ENABLE ", _jsx(_components.span, { className: "hljs-type", children: "ROW" }), " LEVEL SECURITY;\n", _jsx(_components.span, { className: "hljs-keyword", children: "ALTER TABLE" }), " projects ENABLE ", _jsx(_components.span, { className: "hljs-type", children: "ROW" }), " LEVEL SECURITY;\n", _jsx(_components.span, { className: "hljs-keyword", children: "ALTER TABLE" }), " pages ENABLE ", _jsx(_components.span, { className: "hljs-type", children: "ROW" }), " LEVEL SECURITY;\n", _jsx(_components.span, { className: "hljs-keyword", children: "ALTER TABLE" }), " categories ENABLE ", _jsx(_components.span, { className: "hljs-type", children: "ROW" }), " LEVEL SECURITY;\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Public read access to published content" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Public posts are viewable by everyone\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (status ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ");\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Public projects are viewable by everyone\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " projects\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (status ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ");\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Public pages are viewable by everyone\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " pages\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (published_at ", _jsx(_components.span, { className: "hljs-keyword", children: "IS" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "NOT NULL" }), ");\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Admin and editor access to manage content" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Admins and editors can manage posts\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts\n ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (\n auth.jwt() ", _jsx(_components.span, { className: "hljs-operator", children: "-" }), _jsx(_components.span, { className: "hljs-operator", children: ">>" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'role'" }), " ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'authenticated'" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "EXISTS" }), " (\n ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FROM" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " profiles.id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " auth.uid()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), " profiles.role ", _jsx(_components.span, { className: "hljs-keyword", children: "IN" }), " (", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'editor'" }), ")\n )\n );\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Admins and editors can manage projects\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " projects\n ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (\n auth.jwt() ", _jsx(_components.span, { className: "hljs-operator", children: "-" }), _jsx(_components.span, { className: "hljs-operator", children: ">>" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'role'" }), " ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'authenticated'" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "EXISTS" }), " (\n ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FROM" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " profiles.id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " auth.uid()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), " profiles.role ", _jsx(_components.span, { className: "hljs-keyword", children: "IN" }), " (", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'editor'" }), ")\n )\n );\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Authors can only edit their own posts (optional)" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Authors can edit own posts\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "UPDATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (\n auth.uid() ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " author_id ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "EXISTS" }), " (\n ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FROM" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " profiles.id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " auth.uid()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), " profiles.role ", _jsx(_components.span, { className: "hljs-keyword", children: "IN" }), " (", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'editor'" }), ")\n )\n );\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Profile access policies" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Users can view own profile\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (auth.uid() ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " id);\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Users can update own profile\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "UPDATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (auth.uid() ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " id);\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Admins can manage all profiles\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (\n ", _jsx(_components.span, { className: "hljs-keyword", children: "EXISTS" }), " (\n ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FROM" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " profiles.id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " auth.uid()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), " profiles.role ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), "\n )\n );\n"] }) }) }), "\n", _jsx(_components.h4, { id: "role-based-access-control-helper-functions", children: _jsx(_components.a, { className: "anchor-link", href: "#role-based-access-control-helper-functions", children: "Role-based Access Control Helper Functions" }) }), "\n", _jsx(CodeBlock, { title: "Database Helper Functions", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-sql", children: [_jsx(_components.span, { className: "hljs-comment", children: "-- Helper function to check if user has specific role" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "OR" }), " REPLACE ", _jsx(_components.span, { className: "hljs-keyword", children: "FUNCTION" }), " user_has_role(required_role TEXT)\n", _jsx(_components.span, { className: "hljs-keyword", children: "RETURNS" }), " ", _jsx(_components.span, { className: "hljs-type", children: "BOOLEAN" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "AS" }), " $$\n", _jsx(_components.span, { className: "hljs-keyword", children: "BEGIN" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "RETURN" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "EXISTS" }), " (\n ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FROM" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " auth.uid()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), " role ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " required_role\n );\n", _jsx(_components.span, { className: "hljs-keyword", children: "END" }), ";\n$$ ", _jsx(_components.span, { className: "hljs-keyword", children: "LANGUAGE" }), " plpgsql SECURITY DEFINER;\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Helper function to check if user is admin or editor" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "OR" }), " REPLACE ", _jsx(_components.span, { className: "hljs-keyword", children: "FUNCTION" }), " user_can_edit()\n", _jsx(_components.span, { className: "hljs-keyword", children: "RETURNS" }), " ", _jsx(_components.span, { className: "hljs-type", children: "BOOLEAN" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "AS" }), " $$\n", _jsx(_components.span, { className: "hljs-keyword", children: "BEGIN" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "RETURN" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "EXISTS" }), " (\n ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "FROM" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " auth.uid()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), " role ", _jsx(_components.span, { className: "hljs-keyword", children: "IN" }), " (", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'editor'" }), ")\n );\n", _jsx(_components.span, { className: "hljs-keyword", children: "END" }), ";\n$$ ", _jsx(_components.span, { className: "hljs-keyword", children: "LANGUAGE" }), " plpgsql SECURITY DEFINER;\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Helper function to get user role" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "OR" }), " REPLACE ", _jsx(_components.span, { className: "hljs-keyword", children: "FUNCTION" }), " get_user_role()\n", _jsx(_components.span, { className: "hljs-keyword", children: "RETURNS" }), " TEXT ", _jsx(_components.span, { className: "hljs-keyword", children: "AS" }), " $$\n ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " role ", _jsx(_components.span, { className: "hljs-keyword", children: "FROM" }), " profiles ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " auth.uid();\n$$ ", _jsx(_components.span, { className: "hljs-keyword", children: "LANGUAGE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "sql" }), " SECURITY DEFINER;\n"] }) }) }), "\n", _jsx(QuickTip, { type: "tip", title: "RLS Best Practices", children: _jsx(_components.p, { children: "RLS policies are evaluated for every query, so keep them simple and use indexes on columns referenced in policies for optimal performance." }) }), "\n", _jsx(_components.h4, { id: "nextjs-15-middleware-for-route-protection", children: _jsx(_components.a, { className: "anchor-link", href: "#nextjs-15-middleware-for-route-protection", children: "Next.js 15 Middleware for Route Protection" }) }), "\n", _jsx(CodeBlock, { title: "middleware.ts - Enhanced Route Protection", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createServerClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@supabase/ssr'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ", ", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/server'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "middleware" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "request" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "let" }), " supabaseResponse = ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "next" }), "({\n request,\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "(\n process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_URL" }), "!,\n process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_ANON_KEY" }), "!,\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "cookies" }), ": {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "getAll" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " request.", _jsx(_components.span, { className: "hljs-property", children: "cookies" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getAll" }), "()\n },\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setAll" }), "(", _jsx(_components.span, { className: "hljs-params", children: "cookiesToSet" }), ") {\n cookiesToSet.", _jsx(_components.span, { className: "hljs-title function_", children: "forEach" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ name, value, options }" }), ") =>"] }), "\n request.", _jsx(_components.span, { className: "hljs-property", children: "cookies" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "set" }), "(name, value),\n )\n supabaseResponse = ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "next" }), "({\n request,\n })\n cookiesToSet.", _jsx(_components.span, { className: "hljs-title function_", children: "forEach" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ name, value, options }" }), ") =>"] }), "\n supabaseResponse.", _jsx(_components.span, { className: "hljs-property", children: "cookies" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "set" }), "(name, value, options),\n )\n },\n },\n },\n )\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Refresh session if expired" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": { user },\n } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase.", _jsx(_components.span, { className: "hljs-property", children: "auth" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getUser" }), "()\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Protect admin routes" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (request.", _jsx(_components.span, { className: "hljs-property", children: "nextUrl" }), ".", _jsx(_components.span, { className: "hljs-property", children: "pathname" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "startsWith" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/admin'" }), ")) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!user) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " loginUrl = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "URL" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/auth/login'" }), ", request.", _jsx(_components.span, { className: "hljs-property", children: "url" }), ")\n loginUrl.", _jsx(_components.span, { className: "hljs-property", children: "searchParams" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "set" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'redirectTo'" }), ", request.", _jsx(_components.span, { className: "hljs-property", children: "nextUrl" }), ".", _jsx(_components.span, { className: "hljs-property", children: "pathname" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "redirect" }), "(loginUrl)\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Check user role with caching" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": profile } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'profiles'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'role'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), ", user.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "single" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!profile || ![", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'editor'" }), "].", _jsx(_components.span, { className: "hljs-title function_", children: "includes" }), "(profile.", _jsx(_components.span, { className: "hljs-property", children: "role" }), ")) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "redirect" }), "(", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "URL" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/unauthorized'" }), ", request.", _jsx(_components.span, { className: "hljs-property", children: "url" }), "))\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Add user context to headers for server components" }), "\n supabaseResponse.", _jsx(_components.span, { className: "hljs-property", children: "headers" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "set" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'x-user-role'" }), ", profile.", _jsx(_components.span, { className: "hljs-property", children: "role" }), ")\n supabaseResponse.", _jsx(_components.span, { className: "hljs-property", children: "headers" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "set" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'x-user-id'" }), ", user.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Protect API routes" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (request.", _jsx(_components.span, { className: "hljs-property", children: "nextUrl" }), ".", _jsx(_components.span, { className: "hljs-property", children: "pathname" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "startsWith" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/api/admin'" }), ")) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!user) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'Unauthorized'" }), " }, { ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "401" }), " })\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": profile } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'profiles'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'role'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), ", user.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "single" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!profile || ![", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'editor'" }), "].", _jsx(_components.span, { className: "hljs-title function_", children: "includes" }), "(profile.", _jsx(_components.span, { className: "hljs-property", children: "role" }), ")) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'Forbidden'" }), " }, { ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "403" }), " })\n }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " supabaseResponse\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " config = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "matcher" }), ": [\n ", _jsx(_components.span, { className: "hljs-comment", children: "/*\n * Match all request paths except for the ones starting with:\n * - _next/static (static files)\n * - _next/image (image optimization files)\n * - favicon.ico (favicon file)\n * - public assets\n */" }), "\n ", _jsx(_components.span, { className: "hljs-string", children: "'/((?!_next/static|_next/image|favicon.ico|.*\\\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'" }), ",\n ],\n}\n"] }) }) }), "\n", _jsxs(Callout, { type: "info", title: "Enhanced Security Features", children: [_jsx(_components.p, { children: "This middleware implementation includes:" }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Redirect preservation" }), ": Stores the original URL for post-login redirection"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Role-based API protection" }), ": Secures admin API endpoints"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Header context" }), ": Passes user information to server components"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance optimization" }), ": Efficient pattern matching for static assets"] }), "\n"] })] }), "\n", _jsx(_components.h3, { id: "4-supabase-storage-for-media", children: _jsx(_components.a, { className: "anchor-link", href: "#4-supabase-storage-for-media", children: "4. Supabase Storage for Media" }) }), "\n", _jsx(_components.p, { children: "Supabase Storage provides S3-compatible object storage. Create buckets for different media types:" }), "\n", _jsx(CodeBlock, { title: "Storage Buckets", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-sql", children: [_jsx(_components.span, { className: "hljs-comment", children: "-- Create storage buckets" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "INSERT INTO" }), " storage.buckets (id, name, public) ", _jsx(_components.span, { className: "hljs-keyword", children: "VALUES" }), "\n (", _jsx(_components.span, { className: "hljs-string", children: "'uploads'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'uploads'" }), ", ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), "),\n (", _jsx(_components.span, { className: "hljs-string", children: "'avatars'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'avatars'" }), ", ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ");\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Set up storage policies" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Public Access\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " storage.objects ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (bucket_id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'uploads'" }), ");\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Authenticated users can upload\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " storage.objects ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "INSERT" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "CHECK" }), " (bucket_id ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'uploads'" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "AND" }), " auth.role() ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'authenticated'" }), ");\n"] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Modern file upload pattern with React:" }) }), "\n", _jsx(CodeBlock, { title: "File Uploader", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/admin/file-uploader.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/lib/supabase/client'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "FileUploader" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{\n onUpload,\n}: {\n onUpload: (url: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ") => ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), "\n}"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [uploading, setUploading] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-title function_", children: "createClient" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "uploadFile" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "event" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ".", _jsx(_components.span, { className: "hljs-title class_", children: "ChangeEvent" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "HTMLInputElement" }), ">"] }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setUploading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " file = event.", _jsx(_components.span, { className: "hljs-property", children: "target" }), ".", _jsx(_components.span, { className: "hljs-property", children: "files" }), "?.[", _jsx(_components.span, { className: "hljs-number", children: "0" }), "]\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!file) ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " fileExt = file.", _jsx(_components.span, { className: "hljs-property", children: "name" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "split" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'.'" }), ").", _jsx(_components.span, { className: "hljs-title function_", children: "pop" }), "()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " fileName = ", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsxs(_components.span, { className: "hljs-subst", children: ["${", _jsx(_components.span, { className: "hljs-built_in", children: "Math" }), ".random()}"] }), ".", _jsx(_components.span, { className: "hljs-subst", children: "${fileExt}" }), "`"] }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " filePath = ", _jsxs(_components.span, { className: "hljs-string", children: ["`uploads/", _jsx(_components.span, { className: "hljs-subst", children: "${fileName}" }), "`"] }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": uploadError } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase.", _jsx(_components.span, { className: "hljs-property", children: "storage" }), "\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'uploads'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "upload" }), "(filePath, file)\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (uploadError) ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " uploadError\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": { publicUrl },\n } = supabase.", _jsx(_components.span, { className: "hljs-property", children: "storage" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'uploads'" }), ").", _jsx(_components.span, { className: "hljs-title function_", children: "getPublicUrl" }), "(filePath)\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "onUpload" }), "(publicUrl)\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Error uploading file:'" }), ", error)\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "finally" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setUploading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"file\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{uploadFile}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "disabled" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{uploading}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "accept" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"image/*,video/*,.json\"" }), "\n />"] }) }), "\n )\n}\n"] }) }) }), "\n", _jsx(_components.h2, { id: "building-the-admin-interface-and-content-authoring-tools", children: _jsx(_components.a, { className: "anchor-link", href: "#building-the-admin-interface-and-content-authoring-tools", children: "Building the Admin Interface and Content Authoring Tools" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.strong, { children: "admin panel" }), " is a protected section where authorized users can manage content. We'll build this using Next.js 15 server components, Shadcn UI components, and modern React patterns."] }), "\n", _jsx(_components.h3, { id: "admin-route-protection-with-nextjs-15", children: _jsx(_components.a, { className: "anchor-link", href: "#admin-route-protection-with-nextjs-15", children: "Admin Route Protection with Next.js 15" }) }), "\n", _jsxs(_components.p, { children: ["Create an admin layout at ", _jsx(_components.code, { children: "/app/admin/layout.tsx" }), " that handles authentication and role checking:"] }), "\n", _jsx(CodeBlock, { title: "Admin Layout", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// app/admin/layout.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createServerClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/lib/supabase/server'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { redirect } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/navigation'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Sidebar" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/admin/sidebar'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "AdminLayout" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{\n children,\n}: {\n children: React.ReactNode\n}" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": { user },\n error,\n } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase.", _jsx(_components.span, { className: "hljs-property", children: "auth" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getUser" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error || !user) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "redirect" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/auth/login'" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": profile } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'profiles'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'role, display_name'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'id'" }), ", user.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "single" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!profile || ![", _jsx(_components.span, { className: "hljs-string", children: "'admin'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'editor'" }), "].", _jsx(_components.span, { className: "hljs-title function_", children: "includes" }), "(profile.", _jsx(_components.span, { className: "hljs-property", children: "role" }), ")) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "redirect" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/unauthorized'" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex h-screen bg-gray-50 dark:bg-gray-900\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Sidebar" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "user" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{user}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "profile" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{profile}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "main" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-1 overflow-auto\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"container mx-auto p-6\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }) }), "\n", _jsx(_components.h3, { id: "content-creation-interface-with-modern-shadcn-ui", children: _jsx(_components.a, { className: "anchor-link", href: "#content-creation-interface-with-modern-shadcn-ui", children: "Content Creation Interface with Modern Shadcn UI" }) }), "\n", _jsx(_components.p, { children: "Build forms using the latest Shadcn UI patterns with React Hook Form and Zod validation:" }), "\n", _jsx(CodeBlock, { title: "Post Form", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/admin/post-form.tsx" }), "\n", _jsx(_components.span, { className: "hljs-string", children: "'use client'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { zodResolver } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@hookform/resolvers/zod'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useForm } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react-hook-form'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " * ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " z ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'zod'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Button" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/button'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Form" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "FormControl" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "FormField" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "FormItem" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "FormLabel" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "FormMessage" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/form'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Input" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/input'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Textarea" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/textarea'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Select" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SelectContent" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SelectItem" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SelectTrigger" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SelectValue" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/select'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "PortableTextEditor" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./portable-text-editor'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " postSchema = z.", _jsx(_components.span, { className: "hljs-title function_", children: "object" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": z.", _jsx(_components.span, { className: "hljs-title function_", children: "string" }), "().", _jsx(_components.span, { className: "hljs-title function_", children: "min" }), "(", _jsx(_components.span, { className: "hljs-number", children: "1" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'Title is required'" }), "),\n ", _jsx(_components.span, { className: "hljs-attr", children: "slug" }), ": z.", _jsx(_components.span, { className: "hljs-title function_", children: "string" }), "().", _jsx(_components.span, { className: "hljs-title function_", children: "min" }), "(", _jsx(_components.span, { className: "hljs-number", children: "1" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'Slug is required'" }), "),\n ", _jsx(_components.span, { className: "hljs-attr", children: "excerpt" }), ": z.", _jsx(_components.span, { className: "hljs-title function_", children: "string" }), "().", _jsx(_components.span, { className: "hljs-title function_", children: "min" }), "(", _jsx(_components.span, { className: "hljs-number", children: "1" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'Excerpt is required'" }), "),\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), ": z.", _jsx(_components.span, { className: "hljs-title function_", children: "any" }), "(), ", _jsx(_components.span, { className: "hljs-comment", children: "// Portable Text structure" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": z.", _jsx(_components.span, { className: "hljs-title function_", children: "enum" }), "([", _jsx(_components.span, { className: "hljs-string", children: "'draft'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'archived'" }), "]),\n ", _jsx(_components.span, { className: "hljs-attr", children: "meta_description" }), ": z\n .", _jsx(_components.span, { className: "hljs-title function_", children: "string" }), "()\n .", _jsx(_components.span, { className: "hljs-title function_", children: "max" }), "(", _jsx(_components.span, { className: "hljs-number", children: "160" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'Meta description should be under 160 characters'" }), "),\n})\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "PostFormValues" }), " = z.", _jsx(_components.span, { className: "hljs-property", children: "infer" }), "<", _jsx(_components.span, { className: "hljs-keyword", children: "typeof" }), " postSchema>\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "PostForm" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{\n initialData,\n}: {\n initialData?: Partial\n}" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " form = useForm<", _jsx(_components.span, { className: "hljs-title class_", children: "PostFormValues" }), ">({\n ", _jsx(_components.span, { className: "hljs-attr", children: "resolver" }), ": ", _jsx(_components.span, { className: "hljs-title function_", children: "zodResolver" }), "(postSchema),\n ", _jsx(_components.span, { className: "hljs-attr", children: "defaultValues" }), ": initialData || {\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "slug" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "excerpt" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), ": [],\n ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'draft'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "meta_description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), ",\n },\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "onSubmit" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "values" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "PostFormValues" })] }), ") => {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Handle form submission" }), "\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(values)\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Form" }), " {", _jsx(_components.span, { className: "hljs-attr", children: "...form" }), "}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "form" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "onSubmit" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{form.handleSubmit(onSubmit)}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormField" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "control" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{form.control}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"title\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "render" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{({" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "field" }), " }) =>"] }), " (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormLabel" }), ">"] }), "Title", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormControl" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Input" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Enter post title...\"" }), " {", _jsx(_components.span, { className: "hljs-attr", children: "...field" }), "} />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormMessage" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n />\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormField" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "control" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{form.control}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"slug\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "render" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{({" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "field" }), " }) =>"] }), " (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormLabel" }), ">"] }), "Slug", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormControl" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Input" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"post-slug\"" }), " {", _jsx(_components.span, { className: "hljs-attr", children: "...field" }), "} />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormMessage" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n />\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormField" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "control" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{form.control}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"content\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "render" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{({" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "field" }), " }) =>"] }), " (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormLabel" }), ">"] }), "Content", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormControl" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PortableTextEditor" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{field.value}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{field.onChange}" }), "\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormMessage" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n />\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormField" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "control" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{form.control}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"status\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "render" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{({" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "field" }), " }) =>"] }), " (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormItem" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormLabel" }), ">"] }), "Status", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Select" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "onValueChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{field.onChange}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "defaultValue" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{field.value}" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormControl" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectTrigger" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectValue" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Select status\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectContent" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"draft\"" }), ">"] }), "Draft", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"published\"" }), ">"] }), "Published", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"archived\"" }), ">"] }), "Archived", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "FormMessage" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n />\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"submit\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-full\"" }), ">"] }), "\n Save Post\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }) }), "\n", _jsx(_components.h3, { id: "modern-block-editor-implementation", children: _jsx(_components.a, { className: "anchor-link", href: "#modern-block-editor-implementation", children: "Modern Block Editor Implementation" }) }), "\n", _jsx(_components.p, { children: "Create a flexible block editor for Portable Text using modern React patterns:" }), "\n", _jsx(CodeBlock, { title: "Portable Text Editor", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/admin/portable-text-editor.tsx" }), "\n", _jsx(_components.span, { className: "hljs-string", children: "'use client'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Button" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/button'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Card" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "CardContent" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "CardHeader" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/card'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Textarea" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/textarea'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Input" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/input'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Select" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SelectContent" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SelectItem" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SelectTrigger" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "SelectValue" }), ",\n} ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/select'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Trash2" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "Plus" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "MoveUp" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "MoveDown" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'lucide-react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "BlockType" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'paragraph'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'heading'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'image'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'video'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'code'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'quote'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Block" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "BlockType" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "PortableTextEditor" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{\n value,\n onChange,\n}: {\n value: Block[]\n onChange: (blocks: Block[]) => ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), "\n}"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "addBlock" }), " = (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "BlockType" })] }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "newBlock" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Block" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": crypto.", _jsx(_components.span, { className: "hljs-title function_", children: "randomUUID" }), "(),\n ", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), ": ", _jsx(_components.span, { className: "hljs-title function_", children: "getDefaultContent" }), "(", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), "),\n }\n ", _jsx(_components.span, { className: "hljs-title function_", children: "onChange" }), "([...value, newBlock])\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "updateBlock" }), " = (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" })] }), ") => {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "onChange" }), "(\n value.", _jsx(_components.span, { className: "hljs-title function_", children: "map" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "block" }), " =>"] }), " (block.", _jsx(_components.span, { className: "hljs-property", children: "id" }), " === id ? { ...block, content } : block)),\n )\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "deleteBlock" }), " = (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") => {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "onChange" }), "(value.", _jsx(_components.span, { className: "hljs-title function_", children: "filter" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "block" }), " =>"] }), " block.", _jsx(_components.span, { className: "hljs-property", children: "id" }), " !== id))\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "moveBlock" }), " = (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "direction" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'up'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'down'" })] }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " index = value.", _jsx(_components.span, { className: "hljs-title function_", children: "findIndex" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "block" }), " =>"] }), " block.", _jsx(_components.span, { className: "hljs-property", children: "id" }), " === id)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (index === -", _jsx(_components.span, { className: "hljs-number", children: "1" }), ") ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " newIndex = direction === ", _jsx(_components.span, { className: "hljs-string", children: "'up'" }), " ? index - ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " : index + ", _jsx(_components.span, { className: "hljs-number", children: "1" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (newIndex < ", _jsx(_components.span, { className: "hljs-number", children: "0" }), " || newIndex >= value.", _jsx(_components.span, { className: "hljs-property", children: "length" }), ") ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " newBlocks = [...value]\n ;[newBlocks[index], newBlocks[newIndex]] = [\n newBlocks[newIndex],\n newBlocks[index],\n ]\n ", _jsx(_components.span, { className: "hljs-title function_", children: "onChange" }), "(newBlocks)\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-4\"" }), ">"] }), "\n {value.map((block, index) => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Card" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{block.id}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"relative\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "CardHeader" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex flex-row items-center justify-between space-y-0 pb-2\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-sm font-medium capitalize\"" }), ">"] }), "{block.type}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex gap-1\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"button\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "variant" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"ghost\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " moveBlock(block.id, 'up')}\n disabled={index === 0}\n >\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "MoveUp" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-4 w-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"button\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "variant" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"ghost\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " moveBlock(block.id, 'down')}\n disabled={index === value.length - 1}\n >\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "MoveDown" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-4 w-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"button\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "variant" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"ghost\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "size" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"sm\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " deleteBlock(block.id)}\n >\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Trash2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-4 w-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "CardContent" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "BlockEditor" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "block" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{block}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{content" }), " =>"] }), " updateBlock(block.id, content)}\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ))}\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex gap-2\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Select" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "onValueChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{(type:" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "BlockType" }), ") =>"] }), " addBlock(type)}>\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectTrigger" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-48\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectValue" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Add block...\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectContent" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"paragraph\"" }), ">"] }), "Paragraph", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"heading\"" }), ">"] }), "Heading", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"image\"" }), ">"] }), "Image", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"video\"" }), ">"] }), "Video", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"code\"" }), ">"] }), "Code", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"quote\"" }), ">"] }), "Quote", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "BlockEditor" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{\n block,\n onChange,\n}: {\n block: Block\n onChange: (content: ", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), ") => ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), "\n}"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "switch" }), " (block.", _jsx(_components.span, { className: "hljs-property", children: "type" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'paragraph'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Textarea" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{block.content.text" }), " || ''}\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{e" }), " =>"] }), " onChange({ text: e.target.value })}\n placeholder=\"Enter paragraph text...\"\n rows={4}\n />"] }), "\n )\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'heading'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-2\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Select" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{block.content.level" }), " || '", _jsx(_components.span, { className: "hljs-attr", children: "h2" }), "'}\n ", _jsx(_components.span, { className: "hljs-attr", children: "onValueChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{level" }), " =>"] }), " onChange({ ...block.content, level })}\n >\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectTrigger" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectValue" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectContent" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h1\"" }), ">"] }), "Heading 1", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h2\"" }), ">"] }), "Heading 2", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SelectItem" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h3\"" }), ">"] }), "Heading 3", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{block.content.text" }), " || ''}\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{e" }), " =>"] }), " onChange({ ...block.content, text: e.target.value })}\n placeholder=\"Enter heading text...\"\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'image'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-2\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{block.content.url" }), " || ''}\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{e" }), " =>"] }), " onChange({ ...block.content, url: e.target.value })}\n placeholder=\"Image URL...\"\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{block.content.alt" }), " || ''}\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{e" }), " =>"] }), " onChange({ ...block.content, alt: e.target.value })}\n placeholder=\"Alt text...\"\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n\n ", _jsx(_components.span, { className: "hljs-attr", children: "default" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n }\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "getDefaultContent" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "BlockType" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "switch" }), " (", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'paragraph'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "text" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'heading'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "level" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'h2'" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "text" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'image'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "url" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'video'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "url" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'code'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "code" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "language" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'javascript'" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'quote'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "text" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "author" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "''" }), " }\n ", _jsx(_components.span, { className: "hljs-attr", children: "default" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " {}\n }\n}\n"] }) }) }), "\n", _jsx(_components.h3, { id: "portable-text-rendering-with-react", children: _jsx(_components.a, { className: "anchor-link", href: "#portable-text-rendering-with-react", children: "Portable Text Rendering with React" }) }), "\n", _jsxs(_components.p, { children: ["Use the latest ", _jsx(_components.code, { children: "@portabletext/react" }), " patterns for rendering content:"] }), "\n", _jsx(CodeBlock, { title: "Portable Text Renderer", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/portable-text-renderer.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "PortableText" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "PortableTextReactComponents" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@portabletext/react'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Image" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/image'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Prism" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "SyntaxHighlighter" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react-syntax-highlighter'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { oneDark } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react-syntax-highlighter/dist/esm/styles/prism'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "components" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Partial" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "PortableTextReactComponents" }), "> = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "types" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ value }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"my-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Image" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{value.url}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "alt" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{value.alt" }), " || ''}\n ", _jsx(_components.span, { className: "hljs-attr", children: "width" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{800}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "height" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{400}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"rounded-lg\"" }), "\n />"] }), "\n {value.caption && (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-sm text-gray-600 mt-2 text-center\"" }), ">"] }), "\n {value.caption}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n\n ", _jsx(_components.span, { className: "hljs-attr", children: "code" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ value }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"my-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "SyntaxHighlighter" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "language" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{value.language" }), " || '", _jsx(_components.span, { className: "hljs-attr", children: "javascript" }), "'}\n ", _jsx(_components.span, { className: "hljs-attr", children: "style" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{oneDark}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "customStyle" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "borderRadius:" }), " '", _jsx(_components.span, { className: "hljs-attr", children: "0.5rem" }), "',\n ", _jsx(_components.span, { className: "hljs-attr", children: "padding:" }), " '", _jsx(_components.span, { className: "hljs-attr", children: "1rem" }), "',\n }}\n >"] }), "\n {value.code}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n\n ", _jsx(_components.span, { className: "hljs-attr", children: "video" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ value }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"my-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "iframe" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "src" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{value.url}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "width" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"100%\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "height" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"400\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "frameBorder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "allowFullScreen" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"rounded-lg\"" }), "\n />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n },\n\n ", _jsx(_components.span, { className: "hljs-attr", children: "block" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "h1" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-4xl font-bold mb-4\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n ", _jsx(_components.span, { className: "hljs-attr", children: "h2" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-3xl font-semibold mb-3\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n ", _jsx(_components.span, { className: "hljs-attr", children: "h3" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-medium mb-2\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n ", _jsx(_components.span, { className: "hljs-attr", children: "normal" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mb-4 leading-relaxed\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n ", _jsx(_components.span, { className: "hljs-attr", children: "blockquote" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "blockquote" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"border-l-4 border-gray-300 pl-4 my-6 italic text-gray-700\"" }), ">"] }), "\n {children}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n },\n\n ", _jsx(_components.span, { className: "hljs-attr", children: "marks" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "strong" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "strong" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"font-semibold\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n ", _jsx(_components.span, { className: "hljs-attr", children: "em" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "em" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"italic\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "code" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") =>"] }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "code" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-gray-100 px-1 py-0.5 rounded text-sm\"" }), ">"] }), "\n {children}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ),\n },\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "PortableTextRenderer" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{ content }: { content: ", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), " }"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"prose prose-lg max-w-none dark:prose-invert\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PortableText" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{content}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "components" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{components}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }) }), "\n", _jsx(_components.h2, { id: "supporting-static-generation-and-server-side-rendering-in-nextjs-15", children: _jsx(_components.a, { className: "anchor-link", href: "#supporting-static-generation-and-server-side-rendering-in-nextjs-15", children: "Supporting Static Generation and Server-Side Rendering in Next.js 15" }) }), "\n", _jsx(_components.p, { children: "Next.js 15 brings enhanced caching and rendering capabilities. Here's how to leverage them effectively:" }), "\n", _jsx(_components.h3, { id: "static-site-generation-ssg-with-enhanced-caching", children: _jsx(_components.a, { className: "anchor-link", href: "#static-site-generation-ssg-with-enhanced-caching", children: "Static Site Generation (SSG) with Enhanced Caching" }) }), "\n", _jsx(CodeBlock, { title: "SSG Blog Post", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// app/blog/[slug]/page.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createServerClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/lib/supabase/server'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "PortableTextRenderer" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/portable-text-renderer'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { notFound } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/navigation'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "generateStaticParams" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": posts } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'slug'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'status'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " posts?.", _jsx(_components.span, { className: "hljs-title function_", children: "map" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "post" }), " =>"] }), " ({ ", _jsx(_components.span, { className: "hljs-attr", children: "slug" }), ": post.", _jsx(_components.span, { className: "hljs-property", children: "slug" }), " })) || []\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "generateMetadata" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{\n params,\n}: {\n params: { slug: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " }\n}"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": post } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'title, excerpt, meta_description'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'slug'" }), ", params.", _jsx(_components.span, { className: "hljs-property", children: "slug" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'status'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "single" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!post) ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " {}\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "title" }), ": post.", _jsx(_components.span, { className: "hljs-property", children: "title" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": post.", _jsx(_components.span, { className: "hljs-property", children: "meta_description" }), " || post.", _jsx(_components.span, { className: "hljs-property", children: "excerpt" }), ",\n }\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "BlogPost" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{\n params,\n}: {\n params: { slug: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " }\n}"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": post } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(\n ", _jsx(_components.span, { className: "hljs-string", children: "`\n title,\n content,\n published_at,\n author:profiles(display_name, avatar_url)\n `" }), ",\n )\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'slug'" }), ", params.", _jsx(_components.span, { className: "hljs-property", children: "slug" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'status'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "single" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!post) ", _jsx(_components.span, { className: "hljs-title function_", children: "notFound" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "article" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"max-w-4xl mx-auto py-8\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "header" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mb-8\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-4xl font-bold mb-4\"" }), ">"] }), "{post.title}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-center gap-4 text-gray-600\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), ">"] }), "By {post.author?.display_name}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "time" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "dateTime" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{post.published_at}" }), ">"] }), "\n {new Date(post.published_at).toLocaleDateString()}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PortableTextRenderer" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{post.content}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n\n", _jsx(_components.span, { className: "hljs-comment", children: "// Enable ISR with 1 hour revalidation" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " revalidate = ", _jsx(_components.span, { className: "hljs-number", children: "3600" }), "\n"] }) }) }), "\n", _jsx(_components.h3, { id: "server-side-rendering-for-dynamic-content", children: _jsx(_components.a, { className: "anchor-link", href: "#server-side-rendering-for-dynamic-content", children: "Server-Side Rendering for Dynamic Content" }) }), "\n", _jsx(CodeBlock, { title: "Admin Posts Page", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// app/admin/posts/page.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createServerClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/lib/supabase/server'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "PostsTable" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/admin/posts-table'" }), "\n\n", _jsx(_components.span, { className: "hljs-comment", children: "// Force dynamic rendering for admin pages" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " dynamic = ", _jsx(_components.span, { className: "hljs-string", children: "'force-dynamic'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "AdminPosts" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createServerClient" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": posts } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(\n ", _jsx(_components.span, { className: "hljs-string", children: "`\n id,\n title,\n status,\n published_at,\n author:profiles(display_name)\n `" }), ",\n )\n .", _jsx(_components.span, { className: "hljs-title function_", children: "order" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'created_at'" }), ", { ", _jsx(_components.span, { className: "hljs-attr", children: "ascending" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), " })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-bold mb-6\"" }), ">"] }), "Manage Posts", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "PostsTable" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "posts" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{posts" }), " || []} />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }) }), "\n", _jsx(_components.h3, { id: "on-demand-revalidation", children: _jsx(_components.a, { className: "anchor-link", href: "#on-demand-revalidation", children: "On-Demand Revalidation" }) }), "\n", _jsx(_components.p, { children: "Implement webhook-based revalidation for content updates:" }), "\n", _jsx(CodeBlock, { title: "Revalidation Route", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// app/api/revalidate/route.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/server'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { revalidateTag, revalidatePath } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/cache'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "POST" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "request" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { path, tag } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " request.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (path) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidatePath" }), "(path)\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (tag) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidateTag" }), "(tag)\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "revalidated" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), " })\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'Failed to revalidate'" }), " }, { ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "500" }), " })\n }\n}\n"] }) }) }), "\n", _jsx(_components.h2, { id: "performance-optimization-and-best-practices", children: _jsx(_components.a, { className: "anchor-link", href: "#performance-optimization-and-best-practices", children: "Performance Optimization and Best Practices" }) }), "\n", _jsx(_components.h3, { id: "database-performance-optimization", children: _jsx(_components.a, { className: "anchor-link", href: "#database-performance-optimization", children: "Database Performance Optimization" }) }), "\n", _jsx(QuickTip, { type: "tip", title: "Database Performance Impact", children: _jsx(_components.p, { children: "Proper database optimization can improve query performance by 10x or more. Always profile your queries in production." }) }), "\n", _jsx(_components.h4, { id: "essential-database-indexes", children: _jsx(_components.a, { className: "anchor-link", href: "#essential-database-indexes", children: "Essential Database Indexes" }) }), "\n", _jsx(CodeBlock, { title: "Performance Indexes", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-sql", children: [_jsx(_components.span, { className: "hljs-comment", children: "-- Core content indexes for fast queries" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_status_published_at ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts(status, published_at) \n ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " status ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_slug ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts(slug) ", _jsx(_components.span, { className: "hljs-keyword", children: "WHERE" }), " status ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ";\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_author ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts(author_id);\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_profiles_role ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles(role);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Full-text search indexes" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_title_search ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " GIN(to_tsvector(", _jsx(_components.span, { className: "hljs-string", children: "'english'" }), ", title));\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_posts_content_search ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " posts ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " GIN(to_tsvector(", _jsx(_components.span, { className: "hljs-string", children: "'english'" }), ", content::text));\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Category and tag relationships" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_post_categories_post ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " post_categories(post_id);\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " INDEX idx_post_categories_category ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " post_categories(category_id);\n"] }) }) }), "\n", _jsx(_components.h4, { id: "query-optimization-strategies", children: _jsx(_components.a, { className: "anchor-link", href: "#query-optimization-strategies", children: "Query Optimization Strategies" }) }), "\n", _jsxs(CodeTabs, { defaultValue: "optimized", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "unoptimized", children: "Unoptimized" }), _jsx(TabsTrigger, { value: "optimized", children: "Optimized" })] }), _jsx(TabsContent, { value: "unoptimized", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// ❌ Fetches all columns and data" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { data } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'*'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'status'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ")\n"] }) }) }), _jsx(TabsContent, { value: "optimized", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// ✅ Optimized query with specific columns and limits" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { data } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "`\n id,\n title,\n slug,\n excerpt,\n published_at,\n author:profiles(display_name, avatar_url)\n `" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'status'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "order" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'published_at'" }), ", { ", _jsx(_components.span, { className: "hljs-attr", children: "ascending" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), " })\n .", _jsx(_components.span, { className: "hljs-title function_", children: "limit" }), "(", _jsx(_components.span, { className: "hljs-number", children: "10" }), ")\n"] }) }) })] }), "\n", _jsx(PerformanceMetrics, { title: "Database Query Performance", metrics: [{ label: 'Query Time', value: '15ms', change: -75, unit: 'ms' }, { label: 'Data Transfer', value: '2.1KB', change: -80, unit: 'KB' }, { label: 'Memory Usage', value: '12MB', change: -60, unit: 'MB' }] }), "\n", _jsx(_components.h3, { id: "advanced-caching-strategy", children: _jsx(_components.a, { className: "anchor-link", href: "#advanced-caching-strategy", children: "Advanced Caching Strategy" }) }), "\n", _jsx(_components.h4, { id: "multi-level-caching-architecture", children: _jsx(_components.a, { className: "anchor-link", href: "#multi-level-caching-architecture", children: "Multi-Level Caching Architecture" }) }), "\n", _jsx(CodeBlock, { title: "Caching Implementation", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// lib/cache-manager.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { unstable_cache } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/cache'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " getCachedPosts = ", _jsx(_components.span, { className: "hljs-title function_", children: "unstable_cache" }), "(\n ", _jsx(_components.span, { className: "hljs-title function_", children: "async" }), " (", _jsx(_components.span, { className: "hljs-attr", children: "limit" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), " = ", _jsx(_components.span, { className: "hljs-number", children: "10" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { data } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "`\n id,\n title,\n slug,\n excerpt,\n published_at,\n author:profiles(display_name)\n `" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'status'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "order" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'published_at'" }), ", { ", _jsx(_components.span, { className: "hljs-attr", children: "ascending" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), " })\n .", _jsx(_components.span, { className: "hljs-title function_", children: "limit" }), "(limit)\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " data\n },\n [", _jsx(_components.span, { className: "hljs-string", children: "'posts-list'" }), "],\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "revalidate" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "3600" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// 1 hour" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "tags" }), ": [", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), "],\n }\n)\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " getCachedPost = ", _jsx(_components.span, { className: "hljs-title function_", children: "unstable_cache" }), "(\n ", _jsx(_components.span, { className: "hljs-title function_", children: "async" }), " (", _jsx(_components.span, { className: "hljs-attr", children: "slug" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { data } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'*'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'slug'" }), ", slug)\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'status'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "single" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " data\n },\n [", _jsx(_components.span, { className: "hljs-string", children: "'post'" }), "],\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "revalidate" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "3600" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "tags" }), ": [", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), "],\n }\n)\n"] }) }) }), "\n", _jsx(_components.h4, { id: "cache-invalidation-strategy", children: _jsx(_components.a, { className: "anchor-link", href: "#cache-invalidation-strategy", children: "Cache Invalidation Strategy" }) }), "\n", _jsx(CodeBlock, { title: "API Route for Cache Invalidation", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// app/api/revalidate/route.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/server'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { revalidateTag, revalidatePath } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'next/cache'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "POST" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "request" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), ", slug, action } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " request.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "switch" }), " (action) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'post-updated'" }), ":\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidateTag" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidatePath" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/blog'" }), ")\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidatePath" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`/blog/", _jsx(_components.span, { className: "hljs-subst", children: "${slug}" }), "`"] }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "break" }), "\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'post-deleted'" }), ":\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidateTag" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidatePath" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/blog'" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "break" }), "\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'project-updated'" }), ":\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidateTag" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'projects'" }), ")\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidatePath" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'/projects'" }), ")\n ", _jsx(_components.span, { className: "hljs-title function_", children: "revalidatePath" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`/projects/", _jsx(_components.span, { className: "hljs-subst", children: "${slug}" }), "`"] }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "break" }), "\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "({ \n ", _jsx(_components.span, { className: "hljs-attr", children: "revalidated" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", \n ", _jsx(_components.span, { className: "hljs-attr", children: "timestamp" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Date" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "now" }), "() \n })\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "(\n { ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'Failed to revalidate'" }), " }, \n { ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "500" }), " }\n )\n }\n}\n"] }) }) }), "\n", _jsx(InteractiveChart, { type: "line", title: "Cache Performance Over Time", description: "Cache hit rate and response times throughout the day", data: [{ name: '6AM', value: 85, responseTime: 120 }, { name: '9AM', value: 92, responseTime: 95 }, { name: '12PM', value: 95, responseTime: 80 }, { name: '3PM', value: 89, responseTime: 110 }, { name: '6PM', value: 94, responseTime: 85 }, { name: '9PM', value: 91, responseTime: 100 }], height: 300, showGrid: true, animate: true }), "\n", _jsx(_components.h3, { id: "content-delivery-optimization", children: _jsx(_components.a, { className: "anchor-link", href: "#content-delivery-optimization", children: "Content Delivery Optimization" }) }), "\n", _jsxs(CodeTabs, { defaultValue: "development", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "development", children: "Development" }), _jsx(TabsTrigger, { value: "production", children: "Production" })] }), _jsx(TabsContent, { value: "development", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// Development: Real-time updates, no caching" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " revalidate = ", _jsx(_components.span, { className: "hljs-number", children: "0" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " dynamic = ", _jsx(_components.span, { className: "hljs-string", children: "'force-dynamic'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "BlogPage" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Always fetch fresh data for development" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " posts = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase\n .", _jsx(_components.span, { className: "hljs-title function_", children: "from" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'posts'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "select" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'*'" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "eq" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'status'" }), ", ", _jsx(_components.span, { className: "hljs-string", children: "'published'" }), ")\n}\n"] }) }) }), _jsx(TabsContent, { value: "production", children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// Production: Optimized caching and ISR" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " revalidate = ", _jsx(_components.span, { className: "hljs-number", children: "3600" }), " ", _jsx(_components.span, { className: "hljs-comment", children: "// 1 hour ISR" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "BlogPage" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Use cached data with ISR" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " posts = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "getCachedPosts" }), "(", _jsx(_components.span, { className: "hljs-number", children: "10" }), ")\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n {posts?.map(post => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "BlogCard" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{post.id}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "post" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{post}" }), " />"] }), "\n ))}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }) })] }), "\n", _jsxs(Callout, { type: "success", title: "Performance Results", children: [_jsx(_components.p, { children: "With proper optimization, you can achieve:" }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Database queries" }), ": Sub-50ms response times"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Page load times" }), ": Under 1.5s for cached content"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Cache hit rate" }), ": 90%+ during normal traffic"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SEO scores" }), ": 95+ Lighthouse performance"] }), "\n"] })] }), "\n", _jsx(_components.h2, { id: "conclusion", children: _jsx(_components.a, { className: "anchor-link", href: "#conclusion", children: "Conclusion" }) }), "\n", _jsx(_components.p, { children: "This comprehensive guide demonstrates how to build a production-ready Next.js 15 application with Supabase as a powerful headless CMS. You now have the knowledge to create a scalable, secure, and performant content management system." }), "\n", _jsx(_components.h3, { id: "what-youve-accomplished", children: _jsx(_components.a, { className: "anchor-link", href: "#what-youve-accomplished", children: "What You've Accomplished" }) }), "\n", _jsx(InteractiveChart, { type: "donut", title: "Technology Stack Mastery", description: "Skills and technologies covered in this guide", data: [{ name: 'Next.js 15 & React', value: 30 }, { name: 'Supabase Backend', value: 25 }, { name: 'Shadcn UI & Design', value: 20 }, { name: 'Security & Auth', value: 15 }, { name: 'Performance & SEO', value: 10 }], colors: ['var(--neon-blue)', 'var(--neon-purple)', 'var(--neon-pink)', 'hsl(var(--primary))', 'hsl(var(--accent))'], height: 350, showLegend: true }), "\n", _jsx(_components.h3, { id: "key-technical-achievements", children: _jsx(_components.a, { className: "anchor-link", href: "#key-technical-achievements", children: "Key Technical Achievements" }) }), "\n", _jsx(Callout, { type: "success", title: "Next.js 15 Modernization", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "App Router mastery" }), " with server/client component patterns"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Enhanced metadata handling" }), " with SEO optimization"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Advanced middleware" }), " for route protection and auth"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance optimization" }), " with ISR and caching strategies"] }), "\n"] }) }), "\n", _jsx(Callout, { type: "success", title: "Supabase Integration Excellence", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "PostgreSQL expertise" }), " with advanced schema design"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Row Level Security" }), " implementation for fine-grained access control"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Real-time capabilities" }), " with database subscriptions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Storage management" }), " for rich media content"] }), "\n"] }) }), "\n", _jsx(Callout, { type: "success", title: "Production-Ready Features", children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Role-based access control" }), " with secure admin interfaces"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Portable Text implementation" }), " for flexible content management"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance monitoring" }), " with optimized queries and caching"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Type-safe development" }), " with full TypeScript integration"] }), "\n"] }) }), "\n", _jsx(_components.h3, { id: "architecture-benefits-summary", children: _jsx(_components.a, { className: "anchor-link", href: "#architecture-benefits-summary", children: "Architecture Benefits Summary" }) }), "\n", _jsx(PerformanceMetrics, { title: "Expected Performance Gains", metrics: [{ label: 'Page Load Time', value: '1.2s', change: -60, unit: 's' }, { label: 'Database Queries', value: '25ms', change: -75, unit: 'ms' }, { label: 'Lighthouse Score', value: '96', change: 25, unit: '/100' }, { label: 'Cache Hit Rate', value: '94%', change: 30, unit: '%' }] }), "\n", _jsx(_components.h3, { id: "development-best-practices-covered", children: _jsx(_components.a, { className: "anchor-link", href: "#development-best-practices-covered", children: "Development Best Practices Covered" }) }), "\n", _jsxs(CodeTabs, { defaultValue: "security", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "security", children: "Security" }), _jsx(TabsTrigger, { value: "performance", children: "Performance" }), _jsx(TabsTrigger, { value: "maintenance", children: "Maintenance" })] }), _jsx(TabsContent, { value: "security", children: _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Row Level Security (RLS) policies" }), "\n", _jsx(_components.li, { children: "✅ JWT-based authentication" }), "\n", _jsx(_components.li, { children: "✅ Role-based access control" }), "\n", _jsx(_components.li, { children: "✅ Input validation and sanitization" }), "\n", _jsx(_components.li, { children: "✅ Secure API endpoint protection" }), "\n"] }) }), _jsx(TabsContent, { value: "performance", children: _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Database query optimization" }), "\n", _jsx(_components.li, { children: "✅ Multi-level caching strategy" }), "\n", _jsx(_components.li, { children: "✅ Image optimization and CDN" }), "\n", _jsx(_components.li, { children: "✅ Bundle size optimization" }), "\n", _jsx(_components.li, { children: "✅ Core Web Vitals optimization" }), "\n"] }) }), _jsx(TabsContent, { value: "maintenance", children: _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ TypeScript for type safety" }), "\n", _jsx(_components.li, { children: "✅ Modular component architecture" }), "\n", _jsx(_components.li, { children: "✅ Automated testing strategies" }), "\n", _jsx(_components.li, { children: "✅ Database migration patterns" }), "\n", _jsx(_components.li, { children: "✅ Error handling and logging" }), "\n"] }) })] }), "\n", _jsx(_components.h3, { id: "critical-reminders-for-production", children: _jsx(_components.a, { className: "anchor-link", href: "#critical-reminders-for-production", children: "Critical Reminders for Production" }) }), "\n", _jsx(QuickTip, { type: "warning", title: "Next.js 15 Metadata Streaming", children: _jsx(_components.p, { children: "Monitor the metadata streaming issue in Next.js 15.1+ if SEO is critical for your deployment. Consider using 15.0.x or alternative metadata strategies for non-Vercel deployments." }) }), "\n", _jsx(QuickTip, { type: "tip", title: "Security Maintenance", children: _jsx(_components.p, { children: "Regularly update Supabase client libraries, review RLS policies as your application grows, and implement comprehensive error boundaries for production resilience." }) }), "\n", _jsx(QuickTip, { type: "tip", title: "Performance Monitoring", children: _jsx(_components.p, { children: "Set up monitoring for database query performance, cache hit rates, and Core Web Vitals to maintain optimal user experience as your content grows." }) }), "\n", _jsx(_components.h3, { id: "next-steps-and-advanced-features", children: _jsx(_components.a, { className: "anchor-link", href: "#next-steps-and-advanced-features", children: "Next Steps and Advanced Features" }) }), "\n", _jsxs(Callout, { type: "info", title: "Recommended Enhancements", children: [_jsx(_components.p, { children: "Consider implementing these advanced features as your application grows:" }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Real-time collaboration" }), " for multi-author content editing"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Advanced analytics" }), " with user behavior tracking"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Content versioning" }), " and revision history"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Automated backup strategies" }), " for data protection"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Edge computing" }), " with Supabase Edge Functions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Advanced SEO features" }), " including structured data and sitemap generation"] }), "\n"] })] }), "\n", _jsx(_components.h3, { id: "final-thoughts", children: _jsx(_components.a, { className: "anchor-link", href: "#final-thoughts", children: "Final Thoughts" }) }), "\n", _jsx(_components.p, { children: "Building with Next.js 15 and Supabase provides unmatched flexibility and control over your content management system. This stack offers:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Developer productivity" }), " through modern tooling and patterns"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scalability" }), " to handle growing content and user bases"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance" }), " that meets modern web standards"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Security" }), " that protects your content and users"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Flexibility" }), " to evolve with changing requirements"] }), "\n"] }), "\n", _jsx(_components.p, { children: "The knowledge gained from this guide positions you to build sophisticated, production-ready applications that can compete with any modern CMS while maintaining complete control over your data and user experience." }), "\n", _jsx(Callout, { type: "success", title: "Ready for Production", children: _jsx(_components.p, { children: "You now have a solid foundation to build, deploy, and scale a modern content management system. Start building, iterate based on user feedback, and enjoy the flexibility this powerful stack provides!" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Building a Next.js 15 App with a Supabase Headless CMS