Jeg byggede min éclair-webshop fra del 1 om til Next.js med App Router. Siderne hentes og renderes på serveren, ordren regnes ud i min egen API-route, og hvert push bliver tjekket og deployet automatisk.
I del 1 byggede jeg Eclaire shop i React og Vite: en forside med profit, en shop med éclairs fra MockAPI, en kurv og et checkout. Alle routes stod i App.jsx med React Router, og data blev hentet i browseren.
I del 2 skulle shoppen bygges om til Next.js. Jeg genbrugte mine Redux-slices og min CSS uændret, så forskellen lå i routing, data fetching og rendering. Jeg tilføjede også en produktside, /shop/[id].
02
Det gjorde jeg
Frontend og backend i samme projekt, og en beslutning for hver komponent: server eller browser.
Routing
App Router
Mapperne i app/ bestemmer URL'en, så app/shop/page.js bliver /shop. NavLink og useNavigate blev erstattet af usePathname og useRouter.
Rendering
Server Components
Shop-siden er en async Server Component, der henter éclairs på serveren, så browseren får en færdig side uden loading-tilstand. Kun det med hooks, Redux eller klik er Client Components.
Backend
POST /api/order
En Route Handler modtager kurven fra checkout, afviser en tom ordre med 400, regner totalen ud på serveren og svarer med et ordrenummer (201).
03
Resultatet
En hurtig shop, der deployer sig selv.
Shop-siden er revalideret: den gemmes som statisk HTML og henter højst nye data én gang i minuttet. Så er siden hurtig, og en ny éclair i MockAPI dukker alligevel op uden et nyt deploy. Produktsiden renderes ved hvert besøg, fordi id'erne ikke kendes ved build.
Hvert push til main kører gennem mit GitHub Actions-workflow, og Vercel deployer den nye version:
Push
npm ci
Lint
Build
Deploy
Det tager jeg med: Det blev nemmere at hente data og lave routes, og jeg kunne have min egen backend i samme projekt. Men det kræver en ny tankegang at beslutte for hver komponent, om den skal køre på serveren eller i browseren.
Prøv Eclaire shop
Læg éclairs i kurven og send en ordre. Del 1 i React ligger på GitHub.
Next.js · CI/CD