Arhitectură & Tehnologie
De Ce Construim Aplicații Web Custom în Next.js, Nu Doar Site-uri de Prezentare
De ce alegem Next.js pentru aplicații web custom B2B în locul React simplu sau WordPress: routing, Server Components, API routes și scalare fără rescrieri.
Un site de prezentare are nevoie de câteva pagini rapide, un formular de contact și SEO bun. O aplicație web custom, un portal B2B, un dashboard intern, o platformă cu conturi și roluri, are nevoie de mult mai mult: rute care se schimbă în funcție de cine e logat, date care vin din baza de date în timp real, un strat de API propriu și o structură pe care o echipă o poate întreține peste ani, nu doar la lansare.
React rezolvă bine partea de interfață. Nu decide însă cum se face routingul, unde se preiau datele, cum arată stratul de API sau ce se randează pe server versus în browser. Cine construiește doar cu React simplu ajunge, la un moment dat, să asambleze manual toate piesele astea, de obicei sub presiunea unui deadline. Next.js ia deciziile astea din start, ca parte din framework, nu ca improvizație de proiect.
Asta e diferența pe care vrem s-o explicăm aici: nu de ce Next.js e „mai nou” sau „mai la modă”, ci ce anume rezolvă structural pentru o aplicație web custom care trebuie să crească fără să fie rescrisă de la zero peste un an.
Puncte-cheie
- React e o bibliotecă de interfață, nu un framework de aplicație: nu decide routing, data fetching sau stratul de API, decizii pe care Next.js le ia din start.
- React Server Components permit randare pe server și acces direct la date, fără un strat suplimentar de API pentru fiecare listă sau tabel, ceea ce reduce codul JavaScript trimis către browser.
- Route Handlers oferă un strat de API în același proiect, fără să fie obligatoriu un backend Node separat, cu infrastructura dublă pe care o presupune asta.
- Structura standardizată de rute și layout-uri ajută o echipă mai mare să rămână organizată pe măsură ce aplicația crește.
- La Profesori Meditații, separarea clară a straturilor de date, logică și interfață a permis adăugarea de funcționalități noi fără rescriere de arhitectură.
Diferența dintre un site de prezentare și o aplicație web
Un site de prezentare comunică. O aplicație web procesează: primește date de la utilizator, le validează, le salvează, le afișează diferit în funcție de rol și le actualizează în timp real pentru alți utilizatori din același sistem. Un portal B2B cu comenzi, un dashboard cu roluri diferite pentru admin și client, o platformă cu conturi și abonamente, toate au nevoie de o arhitectură de aplicație, nu de pagini statice.
Diferența nu e cosmetică. Un site poate trăi bine pe orice tehnologie care randează HTML rapid. O aplicație are nevoie de o convenție clară pentru rute, autentificare, preluarea și actualizarea datelor și pentru cum arată codul care rulează pe server versus codul care ajunge în browserul utilizatorului. Aici intervine alegerea de framework, nu doar de librărie de interfață.
React rezolvă interfața. Nu rezolvă restul aplicației.
React este, conform propriei documentații, „o bibliotecă pentru construirea interfețelor cu utilizatorul” (React Documentation, react.dev, consultat 2026), nu un framework complet de aplicație: nu vine cu routing, cu o convenție de data fetching sau cu un strat de API. Echipele care pornesc doar cu React ajung să adauge separat un router, o soluție proprie de gestionare a datelor, un backend Node/Express distinct și o configurare manuală de code splitting.
Fiecare decizie e rezonabilă izolat. Problema apare când sunt luate ad-hoc, de oameni diferiți, în momente diferite ale proiectului, fără o convenție comună. Rezultatul e o aplicație care funcționează, dar pe care greu o preiei sau o extinzi fără să înțelegi întâi toate compromisurile locale făcute pe parcurs.
| Decizie de arhitectură | React simplu | Next.js |
|---|---|---|
| Routing | Bibliotecă externă, configurată manual | Inclus, bazat pe structura de foldere |
| Data fetching | Convenție proprie, de obicei client-side | Direct în componente, pe server |
| Strat de API | Backend separat, construit de la zero | Route Handlers, în același proiect |
| Randare | Aproape exclusiv în browser (CSR) | Server-side sau Server Components |
| Code splitting | Configurare manuală | Automat, per rută |
| Optimizare imagini/fonturi | Manuală, librării separate | Inclusă în framework |
Server Components: unde rulează codul contează
De la introducerea App Router, componentele dintr-o aplicație Next.js sunt, implicit, React Server Components: se execută pe server, nu în browser, și pot accesa direct o bază de date sau un serviciu intern, fără un apel suplimentar de API doar ca să afișeze un tabel sau o listă (Next.js Documentation, „Server and Client Components”, nextjs.org, consultat 2026). Componentele care au nevoie de interacțiune reală, un formular, un buton cu stare locală, rămân client components, marcate cu directiva „use client”.
Diferența contează concret pentru o aplicație B2B cu multe tabele, filtre și liste, tipul de interfață pe care îl vedem cel mai des la dashboard-uri interne și portaluri de business. Mai puțin cod JavaScript trimis către browser înseamnă o interfață interactivă mai repede pe conexiuni și dispozitive slabe, exact situația unui angajat care deschide sistemul intern de pe un laptop de birou mai vechi.
Routing și API routes: o structură pe care o echipă o poate ține organizată
Next.js organizează rutele după structura de foldere: fiecare folder din „app/” devine o rută, cu layout-uri imbricate care se pot partaja între secțiuni (Next.js Documentation, „Layouts and Pages”, nextjs.org, consultat 2026). Pentru o aplicație cu zeci de ecrane, un dashboard admin, secțiuni pentru clienți, pagini de setări, asta înseamnă că oricine se alătură proiectului mai târziu găsește structura logică doar uitându-se în foldere.
Stratul de API funcționează la fel de direct, prin Route Handlers definite tot în proiect, sub „app/api/”. Nu e nevoie de un backend Node separat, cu propriul deploy, propriul CORS și propria monitorizare de uptime, pentru o aplicație de complexitate medie. Pentru sisteme foarte mari, Next.js poate rămâne stratul de frontend și API public, în timp ce servicii dedicate rulează în spate; alegerea între monolit și servicii separate ține deja de altă decizie de arhitectură (monolit modular vs microservicii).
Cazul Profesori Meditații: arhitectură gândită pentru extindere
Profesori Meditații nu a pornit ca un site static cu un formular de contact. A fost construită de la început ca platformă: un sistem de căutare pe materie și locație, plus planuri de promovare pentru profesori, funcționalități care presupun date structurate, filtre, logică de business și o interfață care se actualizează pe măsură ce profesorii își modifică profilul sau planul ales.
Ce a făcut posibilă adăugarea acestor funcționalități fără o rescriere de arhitectură a fost separarea clară, din start, a straturilor de date, logică de business și interfață. Căutarea pe materie și locație nu a fost lipită peste structura existentă; a folosit aceleași convenții de rutare și de acces la date ca restul platformei. O funcționalitate care respectă convenția deja existentă e o extensie, nu o operație riscantă de refactorizare.
Next.js versus arhitectura tradițională React + backend separat
Arhitectura clasică, un frontend React construit separat (de exemplu cu Vite) și un backend Node/Express independent, funcționează, dar mută pe umerii echipei decizii pe care Next.js le rezolvă din framework. Frontendul randat exclusiv în browser înseamnă o pagină goală la prima încărcare, până se descarcă bundle-ul de JavaScript, ceva ce afectează atât viteza percepută, cât și indexarea de către motoarele de căutare pentru orice pagină vizibilă public (listări, pagini de căutare, landing pages din interiorul aplicației).
| Criteriu | React + backend separat | Next.js |
|---|---|---|
| Randare inițială | Pagină goală până se încarcă JS | Conținut disponibil imediat |
| SEO pentru pagini publice | Necesită soluții suplimentare | Inclus nativ |
| Infrastructură de deploy | Două servicii, CORS, două pipeline-uri | Un singur proiect, un singur deploy |
| Cod partajat frontend/backend | Duplicare de tipuri și validări | Partajate în același proiect |
| Complexitate la scalare | Crește cu fiecare piesă adăugată manual | Optimizări incluse din framework |
Pentru sisteme cu concurență mare, dashboard-uri folosite simultan de zeci de utilizatori, platforme de programări sau unelte de colaborare în echipă, diferența contează dublu: mai puțină infrastructură de întreținut și optimizări (code splitting automat, randare pe server) incluse din framework, nu reconstruite manual la fiecare proiect.
Ce înseamnă asta pentru scalarea pe termen lung
O aplicație bună se vede în ce se întâmplă după lansare, nu la go-live: câte fluxuri manuale dispar și cât de ușor se adaugă o funcționalitate nouă peste șase luni. Arhitectura Next.js, cu separarea clară a straturilor de date, logică și interfață, nu garantează singură asta, dar oferă convențiile pe care o echipă le poate respecta consecvent, astfel încât funcționalitatea adăugată în luna a șasea să urmeze aceeași structură ca cea din prima săptămână.
Costul acestei alegeri de arhitectură nu e independent de bugetul proiectului: o structură gândită corect de la început schimbă și cât costă o aplicație web custom, pentru că mare parte din cost, pe termen lung, vine din mentenanță și din cât de scump e să adaugi o funcționalitate nouă, nu doar din efortul inițial de dezvoltare.
Concluzie
Alegerea de a construi pe Next.js nu e despre a fi „la modă”. E despre cine ia deciziile de arhitectură: framework-ul, prin convenții clare pentru routing, date și API, sau fiecare proiect din nou, ad-hoc, sub presiunea unui deadline. Pentru o aplicație gândită să crească ani de zile, nu doar să treacă de lansare, diferența asta se vede exact atunci când vine vorba de a adăuga o funcționalitate nouă fără să rescrii jumătate din sistem.