React & Next.js — Högpresterande webbapplikationer
Vi använder React 18 och Next.js 15 (App Router) i alla frontend-projekt: från enkla presentationssajter till komplexa SaaS-tjänster med tiotusentals användare. Koden är strikt TypeScript, testerna är automatiserade.
Därför väljer vi Next.js för våra projekt
Next.js 15 med App Router erbjuder en unik hybridmodell: statiska sidor (SSG) levereras direkt från CDN, dynamiska sidor kör Server Components som inte skickar onödig JavaScript till webbläsaren, och sidor med realtidsdata använder isolerade Client Components.
Bildfiler optimeras automatiskt via komponenten `<Image>` (WebP/AVIF, responsiv srcSet, lazy loading), typsnitt bäddas in i den kritiska CSS:en med `next/font`, och tredjepartsskript laddas med prioriteringsstrategier. Tillsammans minskar dessa optimeringar sidans vikt och laddningsfördröjning.
- Server Components för marknadsföringssidor — minimalt JS hos klienten och HTML som är redo för indexering
- Streaming SSR med Suspense för dashboards med live-data
- Incremental Static Regeneration (ISR) för halvdynamiskt innehåll
- Route Groups och Parallel Routes för komplexa layouter utan omrendering
Strikt TypeScript — inga tysta buggar
Alla våra projekt använder TypeScript med `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` och `noUncheckedIndexedAccess`. De här inställningarna stoppar hela kategorier av runtime-buggar redan vid kompileringen: åtkomst till undefined, ofullständiga typer på API-svar och felaktiga jämförelser. Ett typiskt projekt har 0 TypeScript-fel i CI innan något test körs.
För tillståndshantering använder vi Zustand (lätt, utan boilerplate) eller React Context för lokalt tillstånd. Datahämtning sköts med TanStack Query (automatisk cache, smart invalidering, stale-while-revalidate). Formulär byggs med React Hook Form + Zod-schemavalidering — synkron och asynkron validering utan duplicerad kod.
- ESLint med egna regler för förbjudna mönster (any, console.log, magiska strängar)
- Prettier med enhetlig konfiguration — ingen PR avvisas på grund av formatering
- Zod för validering vid körning av data från externa API:er
- Path aliases (`@/components/...`) — tydliga importer utan `../../..`
Automatiserad testning och CI/CD
Enhetstester med Vitest (snabbt, kompatibelt med Jest API), komponenttester med React Testing Library och E2E med Playwright i 3 webbläsare (Chromium, Firefox, WebKit). GitHub Actions-pipelinen kör alla tester vid varje PR; sammanslagning blockeras om något misslyckas. Minst 80 % täckning på affärslogik.
- Lighthouse CI — betyg <90 blockerar driftsättning till staging
- Automatisk bundle analyzer — larm om bundlen växer med >5 % jämfört med main
- Storybook för UI-komponenter — levande visuell dokumentation
Fördelar och begränsningar
Fördelar
- Prestandaoptimering inbyggd i arkitekturen från dag ett.
- SSR och SSG inbyggt — komplett HTML för sökmotorer och crawlers.
- Strikt TypeScript fångar buggar vid kompilering, inte i produktion.
- Moget ekosystem: Vercel, tusentals paket, en enorm community.
Begränsningar
- Inlärningskurvan för App Router och Server Components är brant.
- Täta förändringar mellan större versioner — kräver underhåll.
- För en enkel statisk sajt kan Next.js vara överdrivet jämfört med ren HTML.
- Stora byggen ökar kompileringstiden och CI-kostnaden.
Kort slutsats
Välj React & Next.js för webbplatser och webbappar som måste vara snabba, indexerbara och skalbara. För en enda statisk landningssida utan interaktivitet räcker en enklare lösning.
Specifikationstabell
| Förmåga | Gräns / tröskel | Typisk användning | |
|---|---|---|---|
| Rendering | SSR, SSG, ISR, CSR | Server Components begränsar webbläsar-API:erna | Statisk marknadsföring + dynamisk dashboard |
| Prestanda | Statisk HTML och Server Components minskar JS i webbläsaren | JS-hydreringen ökar med interaktiviteten | Sajter med hög trafik där SEO är avgörande |
| Skalning | Tiotusentals användare, edge-CDN | Kräver Node-hosting eller serverless | SaaS, portaler, e-handel |
| Typisk kostnad | Öppen källkod, hosting från ~0 € | Serverless-funktioner debiteras per användning | Från små projekt till enterprise |
Next.js jämfört med alternativ
| Kriterium | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG i ett enda ramverk | Ja, inbyggt | Delvis (Nuxt ja, Vite nej) |
| React-ekosystem | Fullständigt | Vue (Nuxt) eller flera ramverk (Astro) |
| Optimalt för en rent statisk sajt | Bra | Astro är lättare |
Vanliga frågor
Varför Next.js och inte enbart React (Vite)?
React med Vite renderar bara på klienten, så den första HTML-koden är tom — svagt för SEO och GEO. Next.js lägger till SSR och SSG och levererar komplett HTML som sökmotorer och crawlers läser direkt.
Är Next.js bra för SEO?
Ja. SSR/SSG levererar indexerbar HTML, metadata och JSON-LD genereras på servern.
Kan jag migrera en befintlig webbplats till Next.js?
Ja, stegvis: sidorna flyttas en i taget, med bibehållna URL:er och 301-omdirigeringar för ändrade adresser.
Vilken hosting behöver Next.js?
Statiska sidor fungerar på vilken CDN som helst. Dynamiska funktioner (SSR, API routes) kräver Node.js eller en serverless-miljö som Vercel, Netlify eller en Docker-container.