React i Next.js — Aplicacions web d'alt rendiment
Fem servir React 18 i Next.js 15 (App Router) en tots els projectes de frontend: des de llocs web de presentació fins a SaaS complexos amb desenes de milers d'usuaris. El codi és TypeScript estricte, les proves són automatitzades.
Per què Next.js per als nostres projectes
Next.js 15 amb App Router ofereix un model híbrid únic: les pàgines estàtiques (SSG) es serveixen directament des de la CDN, les pàgines dinàmiques s'executen com a Server Components que no envien JavaScript innecessari al navegador, i les pàgines en temps real utilitzen Client Components aïllats.
Les imatges s'optimitzen automàticament amb el component `<Image>` (WebP/AVIF, srcSet adaptatiu, càrrega diferida), les tipografies s'incrusten al CSS crític amb `next/font` i els scripts de tercers es carreguen amb estratègies de prioritat.
- Server Components per a pàgines de màrqueting — zero JS al client, HTML complet des del servidor
- SSR en streaming amb Suspense per a tauler de control amb dades en directe
- Incremental Static Regeneration (ISR) per a contingut semidinàmic
- Route Groups i Parallel Routes per a disposicions complexes sense tornar a renderitzar
TypeScript estricte — sense errors silenciosos
Tots els nostres projectes fan servir TypeScript amb `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` i `noUncheckedIndexedAccess`. Aquests paràmetres bloquegen categories senceres d'errors d'execució en temps de compilació: accés a valors indefinits, tipus incomplets en les respostes d'API, comparacions incorrectes. Un projecte típic té 0 errors de TypeScript a la CI abans de qualsevol prova.
Per a la gestió de l'estat fem servir Zustand (lleuger, sense codi repetitiu) o React Context per a l'estat local. L'obtenció de dades es fa amb TanStack Query (memòria cau automàtica, invalidació intel·ligent, stale-while-revalidate). Formularis amb React Hook Form + validació d'esquemes amb Zod — validació síncrona i asíncrona sense codi duplicat.
- ESLint amb regles personalitzades per a patrons prohibits (any, console.log, cadenes màgiques)
- Prettier amb configuració uniforme — cap PR rebutjat per qüestions de format
- Zod per a la validació en temps d'execució de dades d'API externes
- Àlies de ruta (`@/components/...`) — importacions netes sense `../../..`
Proves automatitzades i CI/CD
Proves unitàries amb Vitest (ràpid, compatible amb l'API de Jest), proves de components amb React Testing Library, E2E amb Playwright en 3 navegadors (Chromium, Firefox, WebKit). La canalització de GitHub Actions executa totes les proves a cada PR; la fusió queda bloquejada si alguna falla. Cobertura mínima del 80 % en la lògica de negoci.
- Lighthouse CI — una puntuació <90 bloqueja el desplegament a staging
- Analitzador de bundle automàtic — alerta si el bundle creix >5 % respecte a main
- Storybook per als components d'UI — documentació visual viva
Avantatges i limitacions
Avantatges
- Optimització integrada d'imatges i de tipografies, sense ajustos manuals.
- SSR i SSG natius — HTML complet per als cercadors i els rastrejadors.
- TypeScript estricte detecta errors en temps de compilació, no en producció.
- Ecosistema madur: Vercel, milers de paquets, una comunitat enorme.
Limitacions
- La corba d'aprenentatge d'App Router i dels Server Components és pronunciada.
- Canvis incompatibles freqüents entre versions majors — cal manteniment.
- Per a un lloc estàtic senzill, Next.js pot ser excessiu comparat amb HTML pla.
- Les compilacions grans augmenten el temps de compilació i el cost de la CI.
Veredicte ràpid
Tria React i Next.js per a llocs web i aplicacions web que han de ser ràpids, indexables i escalables. Per a una sola pàgina d'aterratge estàtica sense interactivitat, n'hi ha prou amb una eina més senzilla.
Taula d'especificacions
| Capacitat | Límit / llindar | Ús típic | |
|---|---|---|---|
| Renderitzat | SSR, SSG, ISR, CSR | Els Server Components limiten les API del navegador | Màrqueting estàtic + tauler dinàmic |
| Rendiment | Imatges i tipografies optimitzades, menys JS al client | El JS d'hidratació creix amb la interactivitat | Llocs de molt trànsit i crítics per al SEO |
| Escalabilitat | Desenes de milers d'usuaris, CDN edge | Requereix allotjament Node o serverless | SaaS, portals, comerç electrònic |
| Cost típic | Codi obert, allotjament des de ~€0 | Funcions serverless facturades per ús | Des de projectes petits fins a empresa |
Next.js davant les alternatives
| Criteri | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG en un sol framework | Sí, natiu | Parcial (Nuxt sí, Vite no) |
| Ecosistema de React | Complet | Vue (Nuxt) o multiframework (Astro) |
| El millor per a un lloc purament estàtic | Bo | Astro és més lleuger |
Preguntes freqüents
Per què Next.js i no React pla (Vite)?
React amb Vite només renderitza al client, de manera que l'HTML inicial és buit — dolent per al SEO i el GEO. Next.js afegeix SSR i SSG, i envia HTML complet als navegadors i als rastrejadors.
Next.js és bo per al SEO?
Sí. SSR/SSG envia HTML indexable, i les metadades i el JSON-LD es generen al servidor.
Puc migrar un lloc web existent a Next.js?
Sí, de manera incremental: les pàgines es migren una a una, conservant les URL i les redireccions 301 perquè no es perdin posicions a Google.
Quin allotjament necessita Next.js?
Les pàgines estàtiques funcionen en qualsevol CDN. Les funcionalitats dinàmiques (SSR, rutes d'API) necessiten Node.js o un entorn serverless com Vercel, Netlify o un contenidor Docker.