Fix Vercel build: force dynamic rendering, lazy db init, type fixes

src/app/admin/page.tsx

@@ -255,9 +255,12 @@ export default function AdminPage() {
                                         {report.targetType === 'post' && report.target && 'content' in report.target && (
                                             <button
                                                 className="btn btn-ghost btn-sm"
-                                                onClick={() => handlePostAction(report.target.id, report.target.isRemoved ? 'restore' : 'remove')}
+                                                onClick={() => {
+                                                    const target = report.target as AdminPost;
+                                                    handlePostAction(target.id, target.isRemoved ? 'restore' : 'remove');
+                                                }}
                                             >
-                                                {report.target.isRemoved ? 'Restore post' : 'Remove post'}
+                                                {(report.target as AdminPost).isRemoved ? 'Restore post' : 'Remove post'}
                                             </button>
                                         )}
                                         {report.status === 'open' ? (

src/app/install/page.tsx

@@ -4,6 +4,8 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
+export const dynamic = 'force-dynamic';
+
 type EnvStatus = {
     required: Record<string, boolean>;
     optional: Record<string, boolean>;

src/app/layout.tsx

@@ -24,6 +24,10 @@ export const metadata: Metadata = {
   viewport: "width=device-width, initial-scale=1, maximum-scale=1",
 };
 
+// Force all routes to be dynamic (no static generation at build time)
+// This is appropriate for a social network where all content is user-generated
+export const dynamic = 'force-dynamic';
+
 export default function RootLayout({
   children,
 }: {

src/db/index.ts

@@ -1,17 +1,35 @@
-import { drizzle } from 'drizzle-orm/neon-http';
+import { drizzle, NeonHttpDatabase } from 'drizzle-orm/neon-http';
 import { neon } from '@neondatabase/serverless';
 import * as schema from './schema';
 
-// Create the Neon client (with fallback for UI testing)
+// Lazy initialization to prevent build-time crashes
-const sql = process.env.DATABASE_URL
+let _db: NeonHttpDatabase<typeof schema> | null = null;
-    ? neon(process.env.DATABASE_URL)
-    : null;
 
-// Create the Drizzle client
+export const db = new Proxy({} as NeonHttpDatabase<typeof schema>, {
-export const db = sql ? drizzle(sql, { schema }) : null;
+    get: (target, prop) => {
+        if (!_db) {
+            if (!process.env.DATABASE_URL) {
+                // Allow build to pass by returning a dummy if accessed during build
+                if (process.env.NODE_ENV === 'production') {
+                    console.warn('Database accessed during build without DATABASE_URL. Returning dummy.');
+                    // We return a proxy that logs on any access to avoid hard crashes if possible,
+                    // but typically this path is creating the client.
+                    // Returning a dummy DB object that matches the shape is hard.
+                    // But if we throw, we crash.
+                    // The issue is verify the build doesn't crash on import.
+                    // If we are here, something ACCESSED db.
+                }
+                throw new Error('DATABASE_URL is not defined');
+            }
+            const sql = neon(process.env.DATABASE_URL);
+            _db = drizzle(sql, { schema });
+        }
+        return Reflect.get(_db, prop);
+    },
+});
 
 // Helper to check if DB is available
-export const isDbAvailable = () => db !== null;
+export const isDbAvailable = () => !!process.env.DATABASE_URL;
 
 // Export schema for use elsewhere
 export * from './schema';