React ja Next.js — suorituskykyiset verkkosovellukset
Käytämme React 18:aa ja Next.js 15:tä (App Router) kaikissa frontend-projekteissa: esittelysivustoista monimutkaisiin SaaS-ratkaisuihin, joissa on kymmeniätuhansia käyttäjiä. Koodi on tiukkaa TypeScriptiä, testit automatisoituja, julkaisu automatisoitu.
Miksi Next.js projekteissamme
Next.js 15 App Routerilla tarjoaa ainutlaatuisen hybridimallin: staattiset sivut (SSG) tarjoillaan CDN:stä, dynaamiset sivut ajavat Server Components -komponentteja, jotka eivät lähetä selaimeen turhaa JavaScriptiä, ja reaaliaikaista dataa sisältävillä sivuilla käytetään eristettyjä Client Components -komponentteja.
Kuvatiedostot optimoidaan automaattisesti `<Image>`-komponentilla (WebP/AVIF, responsiivinen srcSet, lazy-loading), fontit upotetaan kriittiseen CSS:ään `next/font`illa, ja kolmannen osapuolen skriptit ladataan prioriteettistrategioilla.
- Server Components markkinointisivuille — ei JS:ää asiakkaalle, sisältö HTML:nä palvelimelta
- Streaming SSR Suspensella live-dataa sisältäviin kojelautoihin
- Incremental Static Regeneration (ISR) puolidynaamiselle sisällölle
- Route Groups ja Parallel Routes monimutkaisiin asetteluihin ilman uudelleenrenderöintiä
Tiukka TypeScript — ei hiljaisia bugeja
Kaikissa projekteissamme käytetään TypeScriptiä asetuksilla `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` ja `noUncheckedIndexedAccess`. Nämä asetukset estävät käännösaikana kokonaisia ajonaikaisten bugien luokkia: undefined-pääsyt, puutteelliset tyypit API-vastauksissa, virheelliset vertailut. Tyypillisessä projektissa on 0 TypeScript-virhettä CI:ssä ennen mitään testiä.
Tilanhallintaan käytämme Zustandia (kevyt, ei boilerplatea) tai React Contextia paikalliselle tilalle. Datan haku hoidetaan TanStack Queryllä (automaattinen välimuisti, älykäs mitätöinti, stale-while-revalidate). Lomakkeet React Hook Formilla + Zod-skeemavalidoinnilla — synkroninen ja asynkroninen validointi ilman kaksoiskoodia.
- ESLint omin säännöin kielletyille tavoille (any, console.log, magic strings)
- Prettier yhtenäisellä konfiguraatiolla — yhtäkään PR:ää ei hylätä muotoilun takia
- Zod ulkoisten API:en datan ajonaikaiseen validointiin
- Polkualiakset (`@/components/...`) — selkeät importit ilman `../../..`
Automaattinen testaus ja CI/CD
Yksikkötestit Vitestillä (nopea, Jest-API-yhteensopiva), komponenttitestit React Testing Libraryllä, E2E Playwrightilla kolmella selaimella (Chromium, Firefox, WebKit). GitHub Actions -putki ajaa kaikki testit jokaisella PR:llä; mergeaminen estetään, jos mikä tahansa epäonnistuu. Vähimmäiskattavuus 80 % liiketoimintalogiikassa.
- Lighthouse CI — pistemäärä <90 estää julkaisun stagingiin
- Automaattinen bundle analyzer — hälytys, jos bundle kasvaa yli 5 % verrattuna mainiin
- Storybook käyttöliittymäkomponenteille — elävä visuaalinen dokumentaatio
Edut ja rajoitukset
Edut
- Kuvien ja fonttien optimointi on sisäänrakennettu (Image, next/font).
- Natiivi SSR ja SSG — täydellinen HTML palvelimelta, ei tyhjää selainrunkoa.
- Tiukka TypeScript nappaa bugit käännösaikana, ei tuotannossa.
- Kypsä ekosysteemi: Vercel, tuhansia paketteja, valtava yhteisö.
Rajoitukset
- App Routerin ja Server Components -komponenttien oppimiskäyrä on jyrkkä.
- Tiheät muutokset suurten versioiden välillä — vaatii ylläpitoa.
- Yksinkertaiselle staattiselle sivustolle Next.js voi olla liioittelua puhtaaseen HTML:ään verrattuna.
- Suuret buildit pidentävät käännösaikaa ja nostavat CI-kustannuksia.
Lyhyt yhteenveto
Valitse React ja Next.js sivustoille ja verkkosovelluksille, joiden on oltava nopeita, indeksoitavia ja skaalautuvia. Yksittäiselle staattiselle laskeutumissivulle ilman interaktiivisuutta yksinkertaisempi ratkaisu riittää.
Tekniset tiedot
| Ominaisuus | Raja / kynnys | Tyypillinen käyttö | |
|---|---|---|---|
| Renderöinti | SSR, SSG, ISR, CSR | Server Components rajoittavat selain-API:ja | Staattinen markkinointi + dynaaminen kojelauta |
| Suorituskyky | Kuvien ja fonttien automaattinen optimointi | Hydrataation JS kasvaa interaktiivisuuden myötä | Suuren liikenteen sivustot, SEO kriittinen |
| Skaalaus | Kymmeniätuhansia käyttäjiä, edge CDN | Vaatii Node- tai serverless-hostingin | SaaS, portaalit, verkkokauppa |
| Tyypillinen kustannus | Avoin lähdekoodi, hosting alkaen ~0 € | Serverless-funktiot veloitetaan käytön mukaan | Pienistä projekteista enterprise-tasolle |
Next.js vs vaihtoehdot
| Kriteeri | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG yhdessä kehyksessä | Kyllä, natiivisti | Osittain (Nuxt kyllä, Vite ei) |
| React-ekosysteemi | Täysi | Vue (Nuxt) tai monikehys (Astro) |
| Optimaalinen puhtaasti staattiselle sivustolle | Hyvä | Astro on kevyempi |
Usein kysytyt kysymykset
Miksi Next.js eikä pelkkä React (Vite)?
React Vitellä renderöi vain asiakaspuolella, joten alkuperäinen HTML on tyhjä — heikko SEO:lle ja GEO:lle. Next.js lisää SSR:n ja SSG:n ja toimittaa täydellisen HTML:n, jonka hakukoneet voivat lukea suoraan.
Onko Next.js hyvä SEO:lle?
On. SSR/SSG toimittaa indeksoitavaa HTML:ää, metadata ja JSON-LD generoidaan palvelimella ja Core Web Vitals -mittarit huomioidaan rakenteesta lähtien — kaikki vahvoja sijoitussignaaleja.
Voinko migroida olemassa olevan sivuston Next.js:ään?
Voit, vaiheittain: sivut siirretään yksi kerrallaan säilyttäen URL-osoitteet ja 301-uudelleenohjaukset, jotta sijoituksia Googlessa ei menetetä.
Millaista hostingia Next.js tarvitsee?
Staattiset sivut toimivat millä tahansa CDN:llä. Dynaamiset toiminnot (SSR, API routes) tarvitsevat Node.js:n tai serverless-ajoympäristön, kuten Vercelin, Netlifyn tai Docker-kontin.