React & Next.js — Højtydende webapplikationer
Vi bruger React 18 og Next.js 15 (App Router) til alle frontend-projekter: fra præsentationssites til komplekse SaaS-løsninger med titusindvis af brugere. Koden er skrevet i striks TypeScript, test er automatiserede.
Hvorfor Next.js til vores projekter
Next.js 15 med App Router tilbyder en unik hybridmodel: statiske sider (SSG) leveres direkte fra CDN'et, dynamiske sider kører som Server Components, der ikke sender unødvendig JavaScript til browseren, og realtidssider bruger isolerede Client Components.
Billeder optimeres automatisk via komponenten `<Image>` (WebP/AVIF, responsivt srcSet, lazy-loading), skrifttyper indlejres i den kritiske CSS med `next/font`, og tredjepartsscripts indlæses med prioriterede strategier.
- Server Components til marketingsider — nul klient-JS, fuld HTML direkte fra serveren
- Streaming SSR med Suspense til dashboards med live data
- Incremental Static Regeneration (ISR) til delvist dynamisk indhold
- Route Groups og Parallel Routes til komplekse layouts uden gen-rendering
Striks TypeScript — ingen stille fejl
Alle vores projekter bruger TypeScript med `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` og `noUncheckedIndexedAccess`. Disse indstillinger blokerer hele kategorier af kørselsfejl allerede ved kompilering: adgang til undefined, ufuldstændige typer på API-svar og forkerte sammenligninger. Et typisk projekt har 0 TypeScript-fejl i CI før nogen test.
Til tilstandshåndtering bruger vi Zustand (let, uden boilerplate) eller React Context til lokal tilstand. Datahentning håndteres via TanStack Query (automatisk cache, intelligent invalidering, stale-while-revalidate). Formularer bygges med React Hook Form + Zod-skemavalidering — synkron og asynkron validering uden duplikeret kode.
- ESLint med egne regler for forbudte mønstre (any, console.log, magiske strenge)
- Prettier med ensartet konfiguration — ingen PR afvist på grund af formatering
- Zod til validering ved kørsel af data fra eksterne API'er
- Stialiasser (`@/components/...`) — rene imports uden `../../..`
Automatiseret test og CI/CD
Enhedstest med Vitest (hurtig, kompatibel med Jest-API'et), komponenttest med React Testing Library og E2E med Playwright på 3 browsere (Chromium, Firefox, WebKit). GitHub Actions-pipelinen kører alle test ved hver PR; sammenfletning blokeres, hvis en enkelt fejler. Minimum 80 % dækning på forretningslogikken.
- Lighthouse CI — en score under 90 blokerer udrulning til staging
- Automatisk bundle-analysator — alarm, hvis bundlen vokser med mere end 5 % i forhold til main
- Storybook til UI-komponenter — levende visuel dokumentation
Fordele og begrænsninger
Fordele
- Indbygget billed- og skrifttypeoptimering (WebP/AVIF, next/font) uden manuel finjustering.
- Indbygget SSR og SSG — fuld HTML allerede i serverens første svar.
- Striks TypeScript fanger fejl ved kompilering, ikke i produktion.
- Modent økosystem: Vercel, tusindvis af pakker, et stort fællesskab.
Begrænsninger
- Indlæringskurven for App Router og Server Components er stejl.
- Hyppige brydende ændringer mellem hovedversioner — kræver vedligeholdelse.
- Til et enkelt statisk site kan Next.js være overkill sammenlignet med ren HTML.
- Store builds øger kompileringstiden og CI-omkostningerne.
Kort konklusion
Vælg React & Next.js til websites og webapps, der skal være hurtige, indekserbare og skalerbare. Til en enkelt statisk landingsside uden interaktivitet er et enklere værktøj nok.
Specifikationstabel
| Egenskab | Grænse / tærskel | Typisk anvendelse | |
|---|---|---|---|
| Rendering | SSR, SSG, ISR, CSR | Server Components begrænser browser-API'er | Statisk marketing + dynamisk dashboard |
| Ydeevne | Prioriteret hero, font swap, WebP/AVIF-billeder | Hydrerings-JS vokser med interaktiviteten | Sites med høj trafik og kritisk SEO |
| Skalering | Titusindvis af brugere, edge-CDN | Kræver Node- eller serverless-hosting | SaaS, portaler, e-handel |
| Typisk pris | Open source, hosting fra ca. 0 € | Serverless-funktioner afregnes efter forbrug | Fra små projekter til enterprise |
Next.js vs. alternativer
| Kriterium | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG i ét framework | Ja, indbygget | Delvist (Nuxt ja, Vite nej) |
| React-økosystem | Fuldt | Vue (Nuxt) eller multi-framework (Astro) |
| Bedst til rent statisk site | Godt | Astro er lettere |
Ofte stillede spørgsmål
Hvorfor Next.js og ikke ren React (Vite)?
React med Vite renderer kun på klienten, så den indledende HTML er tom — dårligt for SEO og GEO. Next.js tilføjer SSR og SSG og leverer fuld HTML allerede i serverens første svar.
Er Next.js godt til SEO?
Ja. SSR/SSG leverer indekserbar HTML, og metadata og JSON-LD genereres på serveren, så de står direkte i sidens HTML.
Kan jeg migrere et eksisterende site til Next.js?
Ja, trinvist: siderne flyttes én ad gangen, med bevarede URL'er og 301-omdirigeringer, så Google-placeringerne ikke går tabt.
Hvilken hosting kræver Next.js?
Statiske sider kører på ethvert CDN. Dynamiske funktioner (SSR, API-ruter) kræver Node.js eller en serverless-runtime som Vercel, Netlify eller en Docker-container.