Ce este Next.js? Un ghid simplu pentru constructorii de aplicații

Next.js este un framework pentru construirea site-urilor web și a aplicațiilor web cu React. React îți oferă piesele de bază ale unei interfețe — butoane, formulare, liste. Next.js adaugă restul site-ului în jurul lor: pagini și adrese URL, randarea paginilor pe server ca să ajungă gata de citit, încărcarea datelor și rularea codului de backend în același proiect. Este open source, realizat de compania Vercel și una dintre cele mai folosite modalități de a construi site-uri React.

De ce contează Next.js când construiești cu AI

Când descrii o aplicație unui constructor AI, acesta trebuie să aleagă o bază tehnică. Alegerea respectivă modelează lucruri de care îți pasă mai târziu:

• Vizibilitatea în căutare. Un site public care trebuie să apară în Google beneficiază de trimiterea de HTML real, lucru pe care Next.js îl face bine.
• Unde trăiește backend-ul. Next.js lasă paginile frontend și codul de server (precum „salvează acest formular” sau „apelează API-ul de plăți”) să trăiască într-un singur proiect.
• Găzduirea. O aplicație Next.js cu funcții de server are nevoie de un server pe care să ruleze, în timp ce o aplicație Vite simplă poate fi servită ca fișiere statice.

Mythex pornește proiectele noi pe Vite + React + TypeScript + Tailwind în mod implicit și folosește Next.js când îl ceri — este suficient să scrii „Use Next.js” în primul prompt (cum se alege tehnologia). Deci este util să știi când merită să ceri asta.

O analogie din viața de zi cu zi

Dacă React este o cutie cu cărămizi Lego de înaltă calitate, Next.js este un set Lego cu instrucțiunile, placa de bază și piesele pentru uși și instalații deja incluse.

Ai putea construi aceeași casă din cărămizi separate — doar că ar trebui să decizi singur cum se leagă camerele, unde e ușa de intrare și cum intră apa. Next.js ia aceste decizii pentru tine într-un mod standard, astfel încât fiecare proiect Next.js arată asemănător, iar un dezvoltator nou (sau un AI) își poate găsi drumul repede.

Ce adaugă Next.js la React

Next.js are două moduri de a organiza paginile. App Router (folderul app/) este mai nou și suportă componentele de server. Pages Router (folderul pages/) este cel original și este încă suportat. Proiectele noi folosesc în general App Router. Dacă codul constructorului tău sau un tutorial ți se pare neobișnuit, acesta este adesea motivul.

Un exemplu practic: un director public de cafenele locale

Imaginează-ți un site care listează cafenelele dintr-un oraș, cu o pagină pentru fiecare, pe care vrei să apară în rezultatele căutării.

O pagină Next.js pentru o cafenea ar putea arăta cam așa:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Ce se întâmplă când cineva (sau Google) accesează /cafes/blue-door:

1. Next.js potrivește adresa URL cu fișierul respectiv. Folderul [slug] înseamnă „orice cafenea”.
2. Componenta rulează pe server, citește cafeneaua din baza de date și construiește HTML-ul.
3. Browserul primește o pagină completă, cu numele și adresa cafenelei deja în ea — fără să aștepte ca JavaScript să aducă datele.

Cu o aplicație React pur client, browserul ar primi mai întâi o pagină aproape goală, apoi ar descărca JavaScript, apoi ar aduce cafeneaua și abia apoi ar afișa-o. Motoarele de căutare pot adesea să se descurce cu asta, dar o pagină complet formată este mai sigură. Vezi SEO pentru site-urile construite cu AI.

Comparează cu un tablou de bord pentru personal, în spatele unei autentificări: motoarele de căutare nu îl pot vedea oricum, deci randarea pe server aduce mai puțin beneficiu, iar o aplicație Vite mai simplă este adesea varianta potrivită.

Termeni cheie

Concepții greșite frecvente

• „Next.js înlocuiește React.” Nu. Folosește React. Componentele tale sunt în continuare componente React.
• „Next.js este mereu alegerea mai bună.” Este mai capabil și are mai multe de înțeles. Randarea pe server, cache-ul și diferența dintre codul de server și cel de client sunt surse comune de erori confuze. Pentru o aplicație în spatele unei autentificări, o aplicație React simplă este adesea mai ușoară.
• „Next.js rulează doar pe Vercel.” Este open source și poate rula pe orice server Node.js sau într-un container Docker. Este posibil un export complet static dacă nu folosești funcții de server.
• „Folosirea Next.js garantează un SEO bun.” Face paginile lizibile mai ușor de citit. Clasarea depinde în continuare de titluri, conținut, viteză și linkuri.
• „Codul de server din Next.js este automat privat.” Codul marcat pentru client ajunge în browser. Secretele trebuie să rămână în codul doar pentru server și în variabilele de mediu.

Ce să ceri constructorului tău cu AI

• „Folosește Next.js cu App Router” — în primul tău prompt, dacă vrei asta.
• „Care pagini sunt randate pe server, care sunt statice și care rulează în browser — și de ce?”
• „Fă paginile publice de marketing și de listare randate pe server sau statice, cu titluri și descrieri corecte.”
• „Păstrează cheile API în cod doar pentru server și în variabile de mediu. Arată-mi unde este citită fiecare.”
• „Are nevoie această aplicație de Next.js, sau o aplicație Vite + React ar fi mai simplă pentru ce construim?”

Next.js în Mythex

Mythex folosește Vite + React + TypeScript + Tailwind în mod implicit și trece la Next.js când îl ceri în prompt; a-l numi de la început economisește credite față de schimbarea ulterioară. Vezi aplicația în Preview-ul live, iar Publish o publică la un URL live fără să configurezi singur găzduirea. Documentația Mythex notează că aplicațiile single-page randate pe client au un SEO mai slab decât HTML-ul randat pe server sau static, deci pentru un site de marketing unde căutarea contează, merită să spui asta de la început (SEO pentru aplicația ta).

Întrebări