React & Next.js
Vi bruger React 18 og Next.js 15 (App Router) til hele 4dental-platformen: cabinettets præsentationssider, aftalekalenderen, patientjournalerne og cabinettets dashboard. Koden er skrevet i streng TypeScript og testes automatisk.
Hvorfor Next.js til vores projekter
Next.js 15 med App Router giver en hybridmodel: statiske sider (SSG) leveres direkte fra CDN, dynamiske sider kører som Server Components, der ikke sender unødvendigt JavaScript til browseren, og sider med data i realtid bruger isolerede Client Components.
Billedfiler optimeres automatisk med komponenten `<Image>` (WebP/AVIF, responsiv srcSet, lazy loading), skrifttyper indlæses inline i den kritiske CSS med `next/font`, og tredjepartsscripts indlæses med prioriteringsstrategier.
- Server Components til cabinettets offentlige sider — nul klient-JavaScript, hurtig crawling
- Streaming SSR med Suspense til aftalekalenderen
- Incremental Static Regeneration (ISR) til store kataloger med tandbehandlinger og blogartikler — uden fuld genopbygning
- Route Groups og Parallel Routes til komplekse layouts uden unødvendig re-render
Streng TypeScript — ingen skjulte fejl
Alle vores projekter bruger TypeScript med `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` og `noUncheckedIndexedAccess`. Disse indstillinger blokerer ved kompilering hele kategorier af runtime-fejl: adgang til undefined, ufuldstændige typer på API-svar og forkerte sammenligninger.
Til state management bruger vi Zustand (let, uden boilerplate) eller React Context til lokal state. Data hentes med TanStack Query (automatisk cache, smart invalidering, stale-while-revalidate). Formularer bygges med React Hook Form og 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 afvises for formatering
- Zod til runtime-validering af data fra eksterne API’er
- Path aliases (`@/components/...`) — rene importer uden `../../..`
Automatiseret test og CI/CD
Unit tests med Vitest (hurtig, kompatibel med Jest-API), komponenttests med React Testing Library og E2E-tests med Playwright i tre browsere (Chromium, Firefox, WebKit). GitHub Actions-pipelinen kører alle tests ved hver PR; merge blokeres, hvis en af dem fejler.
- Lighthouse CI — staging-udrulning blokeres ved lav score
- Automatisk bundle-analyse — advarsel, hvis bundlen vokser markant i forhold til main
- Storybook til UI-komponenter — levende visuel dokumentation
Avantaje și limitări
Avantaje
- Enkel opsætning af sider med SSR og SSG i samme framework.
- SSR og SSG indbygget — komplet HTML til Google og AI-motorer.
- Streng TypeScript fanger fejl ved kompilering, ikke i produktion.
- Modent økosystem: Vercel, tusindvis af pakker og et stort community.
Limitări
- Indlæringskurven for App Router og Server Components er stejl.
- Hyppige breaking changes mellem major-versioner — kræver vedligeholdelse.
- For et simpelt statisk site kan Next.js være overkill i forhold til ren HTML.
- Store builds øger kompileringstiden og omkostningerne i CI.
Verdict scurt
Vælg React & Next.js til websites og webapplikationer, der skal være hurtige, indekserbare og kunne skaleres. Til en enkelt statisk landingsside uden interaktivitet er et enklere værktøj nok.
Tabel de specificații
| Egenskab | Grænse / tærskel | Typisk brug | |
|---|---|---|---|
| Rendering | SSR, SSG, ISR, CSR | Server Components begrænser browser-API’er | Statisk markedsføring + dynamisk dashboard |
| Ydeevne | Optimeret til Core Web Vitals | Hydrerings-JavaScript vokser med interaktiviteten | Sites med stor trafik og høje SEO-krav |
| Skalering | Mange brugere, edge-CDN | Kræver Node- eller serverless-hosting | SaaS, portaler, tandplejeplatforme |
| Typisk omkostning | Open source; hostingomkostningen afhænger af valget | Serverless-funktioner faktureres pr. brug | 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 | Komplet | Vue (Nuxt) eller multi-framework (Astro) |
| Bedst til rent statiske sites | Godt | Astro er lettere |
Întrebări frecvente
Hvorfor Next.js og ikke almindelig React (Vite)?
React med Vite renderer kun i browseren, så den første HTML er tom — svagt for SEO og GEO. Next.js tilføjer SSR og SSG og leverer komplet HTML, som Google og AI-motorer læser med det samme.
Er Next.js godt til SEO?
Ja. SSR og SSG leverer indekserbar HTML, metadata og JSON-LD genereres på serveren, og Core Web Vitals er et fokus fra start — alle stærke rangeringssignaler.
Kan jeg migrere et eksisterende site til Next.js?
Ja, trin for trin: siderne flyttes én ad gangen, mens URL’erne og 301-redirects bevares, så Google-placeringerne ikke går tabt.
Hvilken hosting kræver Next.js?
Statiske sider kan køre på ethvert CDN. Dynamiske funktioner (SSR, API-routes) kræver Node.js eller et serverless-runtime som Vercel, Netlify eller en Docker-container.