Introducere în Next.js

Next.js este un framework React bazat pe Node.js care simplifică crearea de aplicații web performante, scalabile și optimizate pentru SEO. În practică, el rezolvă problemele majore ale React-ului pur, cum ar fi gestionarea complexă a rutei, încărcarea lentă a paginilor și lipsa suportului nativ pentru server-side rendering (SSR). Pentru un dezvoltator care vrea să lucreze în domeniu, stăpânirea Next.js este esențială, deoarece majoritatea companiilor moderne îl preferă pentru a combina flexibilitatea React cu avantajele de performanță și indexare oferite de server.

Concepte cheie

• File System Routing: Rutele sunt generate automat pe baza structurii dosarelor din directorul app sau pages, eliminând nevoia de configurare manuală a router-ului.
• Server Components: Componentele se execută pe server prin default, reducând dimensiunea bundle-ului trimis browserului și îmbunătățind viteza de încărcare inițială.
• Client Components: Marcate cu "use client", acestea permit utilizarea stării locale (useState) și a evenimentelor DOM, fiind necesare doar când interacțiunea utilizatorului este critică.
• Data Fetching: Datele pot fi preluate direct în componentele Server folosind async/await sau funcții statice precum generateStaticParams, fără dependințe externe pentru API calls.
• Middleware: Cod care rulează la cerere înainte de a finaliza răspunsul, util pentru autentificare, redirecționări sau modificarea headerelor HTTP.
• Image Optimization: Componenta <Image> optimizează automat imaginile (formate, dimensiuni, lazy loading) pentru a îmbunătăți Core Web Vitals.
• API Routes: Permite crearea de endpoint-uri backend simple (REST sau GraphQL) în cadrul aceleiași aplicații, facilitând arhitecturile full-stack.

Exemplu practic

Să presupunem că vrem să afișăm o listă de articole de blog. În loc să fetch-uim datele în useEffect pe client (ceea ce cauzează un gol de conținut), folosim un Server Component:

// app/blog/page.tsx
import { notFound } from 'next/navigation';

async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  if (!res.ok) notFound();
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <main>
      <h1>Articole Recente</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

Aici, HTML-ul este generat pe server și trimis complet către browser, ceea ce asigură o indexare rapidă de către motoarele de căutare și o experiență vizuală instantanee.

Greșeli frecvente

• Abuzul de Client Components: Transformarea tuturor componentelor în "use client" anulează beneficiile de performanță ale SSR și crește timpul de hidratare.
• Fetch fără Cache Control: Neutilizarea opțiunilor de cache (revalidate, next: { no-store }) poate duce fie la date învechite, fie la cereri excesive către API.
• Ignorarea TypeScript-ului: Deși Next.js suportă TS nativ, mulți dezvoltatori încep cu JavaScript, pierzând oportunitatea de a prinde erori de tip la compilare.
• Structura incorectă a dosarelor: Plasarea componentelor publice în dosarul app fără a le marca corect sau amestecarea logicii de UI cu cea de date.

Întrebări de interviu

Care este diferența dintre SSR și SSG în Next.js? SSG (Static Site Generation) generează pagina la build-time, fiind ideal pentru conținut static. SSR (Server-Side Rendering) generează pagina la fiecare cerere, fiind potrivit pentru date dinamice care se schimbă des.

Ce face directivele "use client"? Aceasta indică compilerului Next.js să includă componenta în bundle-ul client și să o execute în browser, permițând accesul la API-uri browser precum localStorage sau evenimente mouse.

Cum gestionezi securitatea în API Routes? Verificând token-uri de autentificare în Middleware sau direct în handler-ul API-ului și validând input-ul utilizatorului înainte de a procesa cererea.

Exercițiu

Creează o aplicație simplă de „To-Do List” în Next.js (App Router). Implementează o componentă Server care afișează lista de sarcini (date hardcodate sau mockate) și o componentă Client care permite adăugarea și ștergerea sarcinilor. Asigură-te că folosești TypeScript și că componenta de afișare nu are "use client", iar cea de input da. Timp estimat: 45 minute.