chore: add nextjs template

frontend-nextjs/app/api/images/products/[id]/route.ts

@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Pool } from "pg";
+
+const pool = new Pool({
+  host: process.env.DB_HOST || "127.0.0.1",
+  port: parseInt(process.env.DB_PORT || "5432"),
+  user: process.env.DB_USER || "myuser",
+  password: process.env.DB_PASSWORD || "mypassword",
+  database: process.env.DB_DATABASE || "mydb",
+});
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+
+    // Try to get image from database (stored as bytea or base64)
+    const result = await pool.query(
+      `SELECT image_blob, image_mime_type
+       FROM products
+       WHERE id = $1`,
+      [id]
+    );
+
+    if (result.rows.length === 0 || !result.rows[0].image_blob) {
+      // Return a placeholder image or 404
+      return NextResponse.json(
+        { error: "Image not found" },
+        { status: 404 }
+      );
+    }
+
+    const { image_blob, image_mime_type } = result.rows[0];
+    const mimeType = image_mime_type || "image/jpeg";
+
+    // If stored as base64 string, decode it
+    let imageBuffer: Buffer;
+    if (typeof image_blob === "string") {
+      // Remove data URL prefix if present
+      const base64Data = image_blob.replace(/^data:image\/\w+;base64,/, "");
+      imageBuffer = Buffer.from(base64Data, "base64");
+    } else {
+      // Already a Buffer (bytea from Postgres)
+      imageBuffer = Buffer.from(image_blob);
+    }
+
+    return new NextResponse(imageBuffer, {
+      headers: {
+        "Content-Type": mimeType,
+        "Cache-Control": "public, max-age=31536000, immutable",
+      },
+    });
+  } catch (error) {
+    console.error("Error fetching image:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch image" },
+      { status: 500 }
+    );
+  }
+}

frontend-nextjs/app/api/products/[id]/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Pool } from "pg";
+
+const pool = new Pool({
+  host: process.env.DB_HOST || "127.0.0.1",
+  port: parseInt(process.env.DB_PORT || "5432"),
+  user: process.env.DB_USER || "myuser",
+  password: process.env.DB_PASSWORD || "mypassword",
+  database: process.env.DB_DATABASE || "mydb",
+});
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+
+    const result = await pool.query(
+      `SELECT id, title, price_cents, slug, description
+       FROM products
+       WHERE id = $1`,
+      [id]
+    );
+
+    if (result.rows.length === 0) {
+      return NextResponse.json(
+        { error: "Product not found" },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(result.rows[0]);
+  } catch (error) {
+    console.error("Error fetching product:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch product" },
+      { status: 500 }
+    );
+  }
+}

frontend-nextjs/app/api/products/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from "next/server";
+import { Pool } from "pg";
+
+// Database connection - uses environment variables
+const pool = new Pool({
+  host: process.env.DB_HOST || "127.0.0.1",
+  port: parseInt(process.env.DB_PORT || "5432"),
+  user: process.env.DB_USER || "myuser",
+  password: process.env.DB_PASSWORD || "mypassword",
+  database: process.env.DB_DATABASE || "mydb",
+});
+
+export async function GET() {
+  try {
+    const result = await pool.query(`
+      SELECT id, title, price_cents, slug
+      FROM products
+      ORDER BY id
+      LIMIT 100
+    `);
+
+    return NextResponse.json(result.rows);
+  } catch (error) {
+    console.error("Error fetching products:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch products" },
+      { status: 500 }
+    );
+  }
+}

frontend-nextjs/app/globals.css

@@ -0,0 +1,15 @@
+:root {
+  color-scheme: light;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+  background: #f7f7f5;
+  color: #1d1d1f;
+}
+
+main {
+  min-height: 100vh;
+}

frontend-nextjs/app/layout.tsx

@@ -0,0 +1,9 @@
+import "./globals.css";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

frontend-nextjs/app/listing/[product_id]/[slug]/page.tsx

@@ -0,0 +1,27 @@
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { fetchProduct } from "@/lib/api";
+
+export default async function Page({ params }: { params: { product_id: string; slug: string } }) {
+  const product = await fetchProduct(params.product_id);
+
+  return (
+    <main>
+      <Header />
+      <section style={{ maxWidth: 1100, margin: "32px auto", padding: "0 24px", display: "grid", gap: 24 }}>
+        <div
+          style={{
+            height: 360,
+            borderRadius: 16,
+            background: `url(${product.image_url}) center/cover no-repeat`
+          }}
+        />
+        <div>
+          <h1 style={{ margin: 0 }}>{product.title}</h1>
+          <p style={{ fontWeight: 600, fontSize: 18 }}>${(product.price_cents / 100).toFixed(2)}</p>
+        </div>
+      </section>
+      <Footer />
+    </main>
+  );
+}

frontend-nextjs/app/page.tsx

@@ -0,0 +1,23 @@
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import ProductCard from "@/components/ProductCard";
+import { fetchProducts } from "@/lib/api";
+
+export default async function Page() {
+  const products = await fetchProducts();
+
+  return (
+    <main>
+      <Header />
+      <section style={{ maxWidth: 1100, margin: "32px auto", padding: "0 24px" }}>
+        <h1 style={{ marginBottom: 16 }}>Featured products</h1>
+        <div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
+          {products.slice(0, 8).map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+      </section>
+      <Footer />
+    </main>
+  );
+}