React og Next.js — afkastamiklir vefhugbúnaðir
Við notum React 18 og Next.js 15 (App Router) í öllum framendaverkefnum: frá kynningarvefjum til flókinna SaaS-lausna með tugþúsundum notenda. Kóðinn er í ströngu TypeScript, prófanirnar sjálfvirkar og útgáfan fer fram við hlið eldri útgáfu.
Hvers vegna Next.js í verkefnunum okkar
Next.js 15 með App Router býður upp á einstakt blandað líkan: stöðugar síður (SSG) eru bornar fram úr CDN, kvikar síður keyra Server Components sem senda engan óþarfa JavaScript til vafrans og síður með rauntímagögnum nota einangraða Client Components.
Myndskrár eru fínstilltar sjálfkrafa með `<Image>` íhlutnum (WebP/AVIF, viðbragðsfljótandi srcSet, lat hleðsla), leturgerðir eru felldar inn í mikilvæga CSS með `next/font` og þriðju aðila skriftur hlaðast með forgangsröðun.
- Server Components fyrir markaðssíður — ekkert JS hjá notanda, fullt HTML fyrir skriðlana
- Streymandi SSR með Suspense fyrir stjórnborð með lifandi gögnum
- Incremental Static Regeneration (ISR) fyrir hálfkvikt efni
- Route Groups og Parallel Routes fyrir flókin útlit án endurteiknunar
Strangt TypeScript — engar þöglar villur
Öll verkefnin okkar nota TypeScript með `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` og `noUncheckedIndexedAccess`. Þessar stillingar stöðva heila flokka af keyrsluvillum við þýðingu: aðgang að óskilgreindum gildum, ófullkomnar tegundir í API-svörum og rangan samanburð. Dæmigert verkefni hefur 0 TypeScript-villur í CI áður en nokkurt próf er keyrt.
Fyrir stöðustjórnun notum við Zustand (létt, án uppsetningarkóða) eða React Context fyrir staðbundna stöðu. Gagnasókn er í höndum TanStack Query (sjálfvirkt skyndiminni, snjöll ógilding, stale-while-revalidate). Eyðublöð eru með React Hook Form + Zod-skemastaðfestingu — samstillt og ósamstillt staðfesting án tvítekins kóða.
- ESLint með sérreglum fyrir bönnuð mynstur (any, console.log, töfrastrengir)
- Prettier með samræmdri uppsetningu — engri breytingabeiðni hafnað vegna sniðs
- Zod fyrir keyrslustaðfestingu gagna úr ytri API-um
- Slóðaheiti (`@/components/...`) — skýr innflutningur án `../../..`
Sjálfvirkar prófanir og CI/CD
Einingarpróf með Vitest (hratt, samhæft við Jest API), íhlutapróf með React Testing Library, E2E með Playwright í 3 vöfrum (Chromium, Firefox, WebKit). GitHub Actions-ferlið keyrir öll próf við hverja breytingabeiðni; samruni er stöðvaður ef eitthvert þeirra fellur. Lágmarksþekja er 80% á viðskiptarökfræði.
- Lighthouse CI — einkunn <90 stöðvar útgáfu á prófunarumhverfi
- Sjálfvirk búntgreining — viðvörun ef búnt stækkar um >5% miðað við main
- Storybook fyrir viðmótsíhluti — lifandi myndræn skjölun
Kostir og takmarkanir
Kostir
- Lighthouse CI mælir afköst í hverri útgáfu.
- SSR og SSG innbyggt — fullt HTML fyrir Google og gervigreindarvélar.
- Strangt TypeScript grípur villur við þýðingu, ekki í framleiðslu.
- Þroskað vistkerfi: Vercel, þúsundir pakka og risastórt samfélag.
Takmarkanir
- Námsferill App Router og Server Components er brattur.
- Tíðar breytingar milli stórra útgáfa — krefst viðhalds.
- Fyrir einfaldan stöðugan vef getur Next.js verið of mikið miðað við hreint HTML.
- Stór búnt lengja þýðingartíma og auka CI-kostnað.
Stutt niðurstaða
Veldu React & Next.js fyrir vefi og vefforrit sem þurfa að vera hröð, finnanleg í leitarvélum og skalanleg. Fyrir eina stöðuga lendingarsíðu án gagnvirkni nægir einfaldari lausn.
Tækniforskriftir
| Geta | Takmörk / þröskuldur | Dæmigerð notkun | |
|---|---|---|---|
| Teiknun | SSR, SSG, ISR, CSR | Server Components takmarka vafra-API | Stöðug markaðssetning + kvikt stjórnborð |
| Afköst | Lighthouse CI í hverri útgáfu | Vökvun JS eykst með gagnvirkni | Vefir með mikla umferð, SEO mikilvægt |
| Skölun | Tugþúsundir notenda, jaðar-CDN | Krefst Node- eða serverless-hýsingar | SaaS, gáttir, netverslun |
| Dæmigerður kostnaður | Opinn hugbúnaður, hýsing frá ~0€ | Serverless-föll gjaldfærð eftir notkun | Frá litlum verkefnum til stórfyrirtækja |
Next.js samanborið við aðra kosti
| Viðmið | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG í einum ramma | Já, innbyggt | Að hluta (Nuxt já, Vite nei) |
| React-vistkerfi | Fullt | Vue (Nuxt) eða marga ramma (Astro) |
| Hentar hreinum stöðugum vef | Gott | Astro er léttara |
Algengar spurningar
Hvers vegna Next.js en ekki einfalt React (Vite)?
React með Vite teiknar aðeins hjá notanda, svo upphafs-HTML er tómt — slæmt fyrir SEO og GEO. Next.js bætir við SSR og SSG og skilar fullu HTML sem Google og gervigreindarvélar geta lesið.
Er Next.js gott fyrir SEO?
Já. SSR/SSG skila HTML sem hægt er að skrá, lýsigögn og JSON-LD verða til á þjóninum — þetta eru allt merki sem leitarvélar taka tillit til.
Get ég fært núverandi vef yfir í Next.js?
Já, í áföngum: síður eru fluttar ein af annarri með sömu vefslóðum og 301-tilvísunum svo þú missir ekki sæti í Google.
Hvers konar hýsingu þarf Next.js?
Stöðugar síður ganga á hvaða CDN sem er. Kvik föll (SSR, API-slóðir) þurfa Node.js eða serverless-keyrsluumhverfi eins og Vercel, Netlify eða Docker-gám.