Move product catalog to Payload CMS

Products now come from Payload's new "products" collection instead of a
hardcoded catalog, same pattern already used for blog posts:

- lib/payload.ts: getProducts()/getProductBySlug() (server-side fetch,
  60s ISR)
- New /api/products route so client components (CartContent,
  RelatedProducts) can reach the same data without a server-only import
- lib/products.ts: useProducts() hook replacing the old PRODUCTS record
- ProductGrid (/shop) fetches server-side directly; now shows all
  catalog products except notizbuch-klarheit (matches Figma's 4-card
  page-shop-overview — still cross-sold via RelatedProducts)
- ProductSpotlight and /todo-cards' Pricing now pull price/photo from
  the same CMS product instead of a separately hardcoded "12,90 €", so
  the two can't silently drift apart
- formatPrice moved to a new lib/format.ts (plain, no "use client") —
  Server Components can't call functions exported from a "use client"
  module directly, which lib/products.ts now is because of the hook

Also fixes two unrelated bugs surfaced along the way: the add-to-cart
button visibly resizing when its "Hinzugefügt ✓" success state showed
(fixed with a CSS-grid text stack sized to the wider of the two
strings), and removes the now-unused local product images from public/.
This commit is contained in:
Marco
2026-07-19 17:00:07 +00:00
parent c595e89305
commit 8c397c5dcb
19 changed files with 346 additions and 204 deletions
+14
View File
@@ -0,0 +1,14 @@
import { NextResponse } from "next/server";
import { getProducts } from "../../lib/payload";
// Same-origin proxy for client components (CartContent, RelatedProducts)
// that need the full catalog reactively — Payload's own API is public-read
// and CORS wouldn't be a blocker, but going through the app's own origin
// avoids depending on that, reuses Next.js's fetch cache from getProducts()
// (no extra round trip to Payload beyond the first request within the 60s
// revalidate window), and keeps the Payload URL itself as a server-only
// implementation detail the client never talks to directly.
export async function GET() {
const products = await getProducts();
return NextResponse.json(products);
}