Ce este Next.js și ce problemă rezolvă

Next.js este un framework React care adaugă structură și performanță aplicațiilor web moderne, transformând React dintr-o simplă bibliotecă UI într-o soluție completă pentru producție. În practică, el rezolvă problemele critice de SEO, viteză de încărcare și experiența utilizatorului prin facilitarea renderizării pe server (SSR) și generarea statică (SSG). Pentru un dezvoltator care vrea să lucreze în domeniu, stăpânirea Next.js este esențială, deoarece majoritatea companiilor preferă acest stack pentru a asigura scalabilitate și menținere ușoară a codului.

Concepte cheie

• File-based Routing: Structura de fișiere definește automat rutele aplicației; crearea unui fișier page.js în directorul app creează automat o rută accesibilă la acea cale.
• Server Components: Componentele sunt rulate implicit pe server, reducând dimensiunea bundle-ului JavaScript trimis browserului și îmbunătățind viteza inițială de încărcare.
• Hydration: Procesul prin care JavaScript-ul clientului preia controlul asupra markup-ului HTML generat de server, făcând interfața interactivă fără a pierde conținutul inițial.
• Data Fetching: Next.js oferă metode integrate (fetch, getServerSideProps) pentru a obține date înainte de randare, eliminând necesitatea librăriilor externe complexe pentru gestionarea stării inițiale.
• Middleware: Permite interceptarea cererilor HTTP înainte ca acestea să ajungă la pagina sau API-ul destinație, fiind ideal pentru autentificare, redirecționări sau A/B testing.
• Image Optimization: Componenta <Image> optimizează automat imaginile (redimensionare, compresie, lazy loading) pentru a îmbunătăți scorurile Core Web Vitals.
• API Routes: Poți crea endpoint-uri backend direct în proiectul tău Next.js, simplificând arhitectura prin evitarea separării complete între frontend și backend pentru aplicații mici sau medii.

Exemplu practic

Să presupunem că construiești o pagină de blog care trebuie să fie indexată rapid de Google. În loc să folosești useEffect pentru a căra datele după ce componenta se montează (ceea ce duce la conținut gol inițial și SEO slab), folosești Server Components:

// app/blog/[slug]/page.js
async function getPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  return res.json();
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Aici, HTML-ul este generat pe server la cerere. Browserul primește deja textul articolului, ceea ce înseamnă că utilizatorul îl vede instantaneu și motoarele de căutare îl pot indexa corect.

Greșeli frecvente

• Abuzul de Client Components: Marcare excesivă a componentelor cu 'use client' când nu este necesar interactivitate, ceea ce anulează beneficiile de performanță ale Server Components.
• Ignorarea Cache-ului: Neutilizarea opțiunilor de cache ale fetch-ului nativ poate duce la reîncărcări inutile ale datelor și costuri mai mari la backend.
• Securitate insuficientă: Expunerea variabilelor de mediu sensibile sau validarea slabă a input-ului în API Routes poate crea vulnerabilități critice.
• Structură neoptimă a fișierelor: Organizarea incorectă a folderelor app sau pages poate cauza conflicte de rute sau dificultăți în scalarea proiectului.

Întrebări de interviu

Care este diferența dintre SSG și SSR? SSG generează HTML la build-time, fiind foarte rapid dar cu date statice. SSR generează HTML la fiecare cerere, permițând date dinamice dar cu o latență ușor mai mare.

De ce sunt importante Server Components? Ele permit trimiterea mai puțin JavaScript către client, reducând timpul de parsare și execuție, și permit accesul direct la resursele backend (baze de date) fără API intermediar.

Cum gestionezi starea globală în Next.js? Pentru date server-side, folosești Server Actions sau context. Pentru starea client-side complexă, se recomandă librării precum Zustand sau Redux Toolkit, evitând contextul React pentru state-uri frecvent actualizate.

Exercițiu

Creează o aplicație Next.js simplă cu două pagini: una principală (/) care afișează o listă de utilizatori și una de detalii (/user/[id]). Folosește Server Components pentru a căra lista de utilizatori de la un API public (ex: JSONPlaceholder) și afișează-i. La click pe un utilizator, navighează către pagina de detalii folosind Link din next/link. Asigură-te că nu folosești 'use client' decât dacă este strict necesar pentru interactivitate minimă. Timp estimat: 45 minute.