Adapt for self-hosted deployment on Coolify

- Replace @vercel/postgres with standard pg library
- Add Dockerfile for Next.js standalone build
- Add tsconfig.json, postcss.config.js
- Fix globals.css undefined tailwind utilities
- Force dynamic rendering for DB-dependent pages
- Add .dockerignore

frontend/app/article/[slug]/page.tsx

@@ -1,5 +1,7 @@
-import { sql } from '@vercel/postgres'
+import { sql } from '@/lib/db'
 import { notFound } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
 import Link from 'next/link'
 import Image from 'next/image'
 

frontend/app/globals.css

@@ -3,11 +3,8 @@
 @tailwind utilities;
 
 @layer base {
-  * {
-    @apply border-border;
-  }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-gray-50 text-gray-900;
   }
 }
 

frontend/app/page.tsx

@@ -1,5 +1,7 @@
-import { sql } from '@vercel/postgres'
+import { sql } from '@/lib/db'
 import ArticleCard from '@/components/ArticleCard'
+
+export const dynamic = 'force-dynamic'
 import TrendingSection from '@/components/TrendingSection'
 import CategoryNav from '@/components/CategoryNav'
 

frontend/lib/db.ts

@@ -0,0 +1,16 @@
+import { Pool } from 'pg'
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+})
+
+// Tagged template literal that mimics @vercel/postgres sql`` syntax
+export async function sql(strings: TemplateStringsArray, ...values: any[]) {
+  // Build parameterized query: replace template expressions with $1, $2, etc.
+  let text = strings[0]
+  for (let i = 0; i < values.length; i++) {
+    text += `$${i + 1}` + strings[i + 1]
+  }
+  const result = await pool.query(text, values)
+  return result
+}

frontend/next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: 'standalone',
   images: {
     remotePatterns: [
       {
@@ -8,9 +9,6 @@ const nextConfig = {
       },
     ],
   },
-  experimental: {
-    serverActions: true,
-  },
 }
 
 module.exports = nextConfig

frontend/package.json

@@ -14,7 +14,7 @@
     "react": "^18",
     "react-dom": "^18",
     "pg": "^8.11.3",
-    "@vercel/postgres": "^0.5.1"
+    "@types/pg": "^8.10.9"
   },
   "devDependencies": {
     "@types/node": "^20",

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}