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 }
+    );
+  }
+}