Next.js 14 és Stripe integrálása: Full-Stack E-Commerce tapasztalatok

Miért Next.js és Stripe?

Amikor elkezdtem a Hoodini webshop fejlesztését, az volt a fő szempontom, hogy egy olyan stack-et válasszak, ami production-ready, jól skálázható és fejlesztőbarát egyszerre. A Next.js 14 App Router tökéletes választásnak bizonyult: a Server Components lehetővé teszik, hogy az adatokat szerver oldalon töltsük be (nincs kliens oldali flickering), míg a Client Components ott lépnek be, ahol interaktivitásra van szükség.

Adatbázis réteg: Prisma + PostgreSQL

A Prisma ORM-et választottam, mert a type-safe query API drámaian csökkenti a runtime hibák számát. A séma definiálása egyszerű, a migrációk automatizáltak. Egy termék-entitás például így néz ki:

model Product {
  id          String   @id @default(cuid())
  name        String
  price       Int      // fillérekben tárolva
  stock       Int      @default(0)
  createdAt   DateTime @default(now())
  orders      OrderItem[]
}

Az árat mindig egész számban (fillér/cent) tároltam, hogy elkerüljem a lebegőpontos kerekítési hibákat — ez egy kritikus szempont pénzügyeknél.

Stripe Checkout integráció

A Stripe Checkout API meglepően egyszerűen integrálható Next.js Route Handler-rel. A fizetési folyamat lépései:

1. A kliens POST kérést küld a /api/checkout végpontra a kosár tartalommal
2. A server-side handler létrehozza a Stripe Session-t
3. A kliens átirányul a Stripe hosted payment page-re
4. Sikeres fizetés után a /api/webhook endpoint fogadja a checkout.session.completed event-et
5. A webhook frissíti az adatbázist és elküldi a visszaigazoló emailt

Fontos: a webhook signature validációját soha ne hagyd ki! A stripe.webhooks.constructEvent() megvéd a replay attack-októl.

Tanulságok

A legnagyobb meglepetés a caching stratégia volt. A Next.js alapértelmezetten agresszívan cache-el, ami kiválóan hat a statikus oldalakra, viszont a termék-készlet adatoknál problémát okozhat. A megoldás: revalidate: 60 beállítása az adatkérő fetch hívásoknál, illetve dynamic = 'force-dynamic' a kosár és a checkout oldalakon.

Összességében a Next.js + Prisma + Stripe kombináció az egyik legjobb stack e-commerce fejlesztéshez — erősen ajánlom mindenkinek, aki komolyabb webshopot épít. Ha neked is egyedi webáruházra van szükséged, nézd meg a webshop készítés szolgáltatásomat.