Învață Next.js: comenzi explicate cu exemple

66 de comenzi 22 de categorii Comunitate & Q&A

Next.js este cel mai popular și matur framework bazat pe React pentru crearea de aplicații web moderne de înaltă performanță. Dezvoltat și menținut de Vercel alături de comunitatea open-source, Next.js combină cele mai bune practici din ecosistemul frontend și backend într-o singură arhitectură coezivă.

Odată cu lansarea arhitecturii App Router bazate pe React Server Components (RSC) și Server Actions, Next.js a redefinit modul în care construim aplicații web: componentele sunt rulate implicit pe server cu zero bundle JavaScript pentru client, datele sunt extrase direct prin cereri asincrone, iar navigarea pe client oferă tranziții instantanee de tip Single Page Application prin streaming și prefetching inteligent.

Mai jos găsești cele 50 de comenzi CLI, fișiere speciale și concepte fundamentale grupate pe categorii: comenzi de terminal și inițializare, structura de directoare din App Router, granița dintre codul de server și componentele de client, rutare dinamică și navigare, optimizare de performanță (imagini, fonturi, SEO) și setări de producție, middleware și containerizare Docker.

macOS • Windows • Linux

Ghid de inițializare și pornire proiect Next.js (App Router)

Creează rapid o aplicație Next.js de la zero cu TypeScript, Tailwind CSS și App Router folosind create-next-app.

Cerințe de sistem: Node.js 18.17+ sau recomandat Node.js 20+ LTS; npm, pnpm, yarn sau bun.

Terminal macOS (Homebrew / zsh)

# Asigură-te că ai Node.js instalat:
brew install node

# Creare proiect nou interactiv:
npx create-next-app@latest aplicatia-mea

# Navigare și pornire server de dezvoltare:
cd aplicatia-mea
npm run dev
# Deschide în browser: http://localhost:3000

Windows 10 / 11 (PowerShell / Winget / WSL2)

# Instalare Node.js LTS prin Winget:
winget install OpenJS.NodeJS.LTS

# Deschide Command Prompt sau PowerShell:
npx create-next-app@latest aplicatia-mea

cd aplicatia-mea
npm run dev
# Deschide în browser: http://localhost:3000

Linux (Ubuntu / Debian / Bash)

# Instalare Node.js 20 LTS pe Ubuntu / Debian:
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# Inițializare proiect Next.js:
npx create-next-app@latest aplicatia-mea

cd aplicatia-mea
npm run dev

Construire și rulare aplicație Next.js pentru producție

# Compilare și optimizare cod pentru producție:
npm run build

# Pornire server de producție pe portul 3000:
npm run start

Date și Conținut 1 comandă

draftMode() din next/headers – Modul de Previzualizare Headless CMS import { draftMode } from 'next/headers'; const { isEnabled } = await draftMode(); Funcția draftMode() permite comutarea aplicației Next.js într-un mod de previzualizare securizat, permițând editorilor de conținut din platforme Headless CMS (WordPress REST API, Strapi, Sanity) să vizualizeze ciornele de articole nepublicate în timp real, ocolind cache-ul static. // app/api/draft/route.ts - Activarea modului Draft import { draftMode } from 'next/headers'; import { redirect } from 'next/navigation'; export […]

Performanță și Backend 1 comandă

Funcția after() din next/server – Sarcini Asincrone Post-Răspuns import { after } from 'next/server'; after(async () => { /* sarcini secundare */ }); Funcția after() (introdusă în Next.js 15) permite programarea execuției unor sarcini asincrone consumatoare de timp care trebuie să ruleze după ce răspunsul HTTP a fost complet trimis către browserul utilizatorului. Este perfectă pentru trimiterea de emailuri tranzacționale, emiterea de evenimente analitice sau sincronizări externe. // app/api/comanda/route.ts import { after } from 'next/server'; import { trimiteEmailConfirmare, […]

Randare și Arhitectură 1 comandă

Funcția connection() din next/server – Randare Dinamică Asincronă import { connection } from 'next/server'; await connection(); Funcția connection() (introdusă în Next.js 15) oferă o modalitate explicită de a semnala că o componentă sau un fragment depinde de o conexiune dinamică a unui client activ. Aceasta permite excluderea explicită a unei componente de la pre-randarea statică fără a fi nevoie de apelarea unor funcții artificiale precum cookies() sau headers(). // app/ceas-live/page.tsx import […]

Navigare și Erori 1 comandă

Funcția notFound() din next/navigation – Declanșarea Erorii 404 import { notFound } from 'next/navigation'; if (!data) notFound(); Funcția notFound() întrerupe imediat execuția componentei curente de server și afișează cel mai apropiat fișier not-found.tsx din arborele de rute. În plus, trimite codul de stare HTTP 404 Not Found către motoarele de căutare, protejând scorul SEO al site-ului. // app/utilizator/[id]/page.tsx import { notFound } from 'next/navigation'; export default async function ProfilUtilizator({ params }: { […]

Randare și Rute 1 comandă

generateStaticParams() – Pre-generarea Rutelor Dinamice la Build export async function generateStaticParams() { return [{ id: '1' }, { id: '2' }]; } Funcția generateStaticParams() este utilizată în combinație cu segmentele dinamice de rută (cum ar fi app/blog/[slug]/page.tsx) pentru a pre-genera paginile HTML în mod static la momentul compilării (Build Time), înlocuind vechiul mecanism getStaticPaths din Pages Router. // app/articole/[slug]/page.tsx export async function generateStaticParams() { const postari = await fetch('https://api.dexblog.ro/articole').then((res) => res.json()); return postari.map((post: { slug: string }) […]

Navigare și Client 1 comandă

Hook-ul useSelectedLayoutSegment() – Detectarea Tab-ului Activ import { useSelectedLayoutSegment } from 'next/navigation'; const segment = useSelectedLayoutSegment(); Hook-ul de client useSelectedLayoutSegment() returnează numele segmentului de rută activ situat imediat sub nivelul layout-ului curent. Este instrumentul ideal pentru evidențierea vizuală a elementelor de navigare active (active tabs, meniuri laterale) în interfețe de administrare complexe. 'use client'; import Link from 'next/link'; import { useSelectedLayoutSegment } from 'next/navigation'; export default function NavigatieDashboard() { const segmentActiv […]

Observabilitate și Sistem 1 comandă

instrumentation.ts – Monitorizare și Inițializare Servicii Globale export async function register() { // inițializare OpenTelemetry, SDK-uri sau baze de date } Fișierul instrumentation.ts (plasat în directorul rădăcină sau în src/) definește un hook global register() apelat o singură dată la pornirea instanței serverului Next.js. Este utilizat pentru configurarea sistemelor de monitorizare OpenTelemetry (APM, Sentry, Datadog) sau inițializarea conexiunilor permanente. // instrumentation.ts export async function register() { if (process.env.NEXT_RUNTIME === 'nodejs') { // Cod executat exclusiv în […]

Conținut și Documentație 1 comandă

Integrarea MDX în Next.js (@next/mdx) const withMDX = require('@next/mdx')(); module.exports = withMDX(nextConfig); Pachetul oficial @next/mdx permite utilizarea sintaxei Markdown îmbogățite cu componente React (MDX) direct în structura de fișiere a App Router. Puteți crea pagini page.mdx care combină lizibilitatea textului markdown cu grafice, butoane sau widget-uri interactive. # Ghid de Programare Next.js Acesta este un paragraf scris în Markdown curat. import { GraficInteractiv } from '@/components/Grafic'; <GraficInteractiv […]

Internaționalizare și Rute 1 comandă

Internaționalizare și Rute Multi-limbă ([lang]) în App Router app/[lang]/page.tsx În Next.js App Router, internaționalizarea (i18n) este gestionată nativ prin intermediul segmentelor dinamice de limbă (ex: app/[lang]/layout.tsx) și a unui Middleware care detectează limba preferată a utilizatorului din antetul Accept-Language. // middleware.ts - Redirecționare automată către limba detectată import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; const limbiSuportate = ['ro', […]

Rute și UX 1 comandă

Rute Interceptate – Ferestre Modale și Navigare Contextuală app/feed/(..)poza/[id]/page.tsx Rutele interceptate (Intercepting Routes) permit încărcarea unei rute din interiorul altei părți a aplicației mascând vizual conținutul ca o fereastră modală, fără a pierde contextul paginii curente. Când pagina este accesată direct prin link sau la reîncărcare (F5), se afișează pagina completă dedicată. Structură Directoare: app/ ├── feed/ │ ├── page.tsx │ └── (..)poza/ │ […]

Performanță și Cache 1 comandă

Tipuri de Revalidare în revalidatePath() (‘page’ vs ‘layout’) revalidatePath('/dashboard', 'page'); revalidatePath('/dashboard', 'layout'); Funcția revalidatePath() acceptă un al doilea parametru opțional de tip 'page' | 'layout', oferind control granular asupra adâncimii la care este invalidat cache-ul arborelui de componente. import { revalidatePath } from 'next/cache'; // Invalidează strict conținutul paginii specificate revalidatePath('/blog/articol-1', 'page'); // Invalidează layout-ul și TOATE paginile descendente din subarborele respectiv revalidatePath('/categorii/[slug]', 'layout'); Eficiență: Utilizarea parametrului […]

Unelte și Dezvoltare 1 comandă

Turbopack – Bundler-ul de Mare Viteză în Rust (next dev –turbopack) next dev --turbopack Turbopack este succesorul oficial al Webpack-ului, dezvoltat de echipa Vercel și scris de la zero în limbajul Rust. Conceput special pentru performanță extremă, Turbopack oferă pornire aproape instantanee a serverului de dezvoltare și reîmprospătare a codului (Fast Refresh / HMR) de până la 10 ori mai rapidă în proiectele mari. // package.json { "scripts": { […]

Performanță și Baze de Date 1 comandă

unstable_cache() din next/cache – Cache-uirea Interogărilor ORM și DB import { unstable_cache } from 'next/cache'; const getCachedData = unstable_cache(fn, keyParts, options); Funcția unstable_cache() permite aplicarea mecanismului de caching Data Cache din Next.js asupra oricărei operațiuni asincrone care nu folosește fetch(), cum ar fi interogările directe de baze de date prin Prisma ORM, Drizzle, MongoDB sau calcule CPU complexe. import { unstable_cache } from 'next/cache'; import prisma from '@/lib/db'; export const getArticolePopulare = unstable_cache( async (categorie: string) […]

Formulare și Server Actions 1 comandă

useActionState() și useFormStatus() – Gestiunea Formularelor de Server const [state, formAction, isPending] = useActionState(action, initialState); const { pending } = useFormStatus(); Hook-urile useActionState() (care înlocuiește vechiul useFormState) și useFormStatus() simplifică gestionarea formularelor conectate la Server Actions, oferind acces direct la erorile de validare, valorile returnate și starea de trimitere în curs. 'use client'; import { useActionState } from 'react'; import { useFormStatus } from 'react-dom'; import { inregistrareUtilizator } from '@/actions/auth'; function ButonTrimite() { const { […]

Interactivitate și Formulare 1 comandă

useOptimistic() – Actualizări Optimiste Instantanee ale Interfeței import { useOptimistic } from 'react'; const [optimisticList, addOptimisticItem] = useOptimistic(list, updateFn); Hook-ul useOptimistic() îmbunătățește masiv experiența utilizatorului prin reflectarea imediată a modificărilor în interfață (de exemplu adăugarea unui comentariu sau a unui Like) înainte ca acțiunea de server (Server Action) să fi confirmat salvarea în baza de date. 'use client'; import { useOptimistic } from 'react'; import { adaugaComentariuAction } from '@/actions/comentarii'; export function ListaComentarii({ comentariiInitiale […]

CLI și Inițializare proiect 8 comenzi

Structură App Router și Fișiere Speciale 9 comenzi

Rulare Server vs Client și Server Actions 9 comenzi

Navigare, Link-uri și Rutare Dinamică 8 comenzi

Optimizare Performanță și SEO 8 comenzi

Configurare, Middleware și Deployment 8 comenzi

Toate comenzile și conceptele Next.js

Lista completă a celor 66 de comenzi CLI, fișiere speciale de rută, hook-uri, API-uri de server și concepte fundamentale Next.js explicate în această secțiune. Fiecare element beneficiază de o pagină dedicată, cu exemple practice TypeScript/JSX, bune practici din producție și recomandări oficiale Vercel.

Comenzi CLI, Instrumente și Bundler (7)

Comandă / Concept	Descriere
`create-next-app`	Utilitarul CLI oficial pentru inițializarea proiectelor Next.js cu TypeScript și Tailwind
`next dev`	Pornirea serverului de dezvoltare local cu suport pentru Hot Module Replacement
`next dev --turbopack`	Bundler de generație nouă scris în Rust oferind compilare și HMR de 10x mai rapide
`next build`	Compilarea, optimizarea și generarea statică a aplicației pentru mediul de producție
`next start`	Pornirea serverului Node.js de producție optimizat pentru deservirea aplicației compilate
`next lint`	Verificarea calității codului și a regulilor specifice Next.js prin integrarea cu ESLint
`next info`	Afișarea detaliilor despre sistemul de operare, versiunea de Node.js și pachetele instalate

Fișiere Speciale de Rută în App Router (8)

Comandă / Concept	Descriere
`app/layout.tsx`	Șabloane de structură persistente care păstrează starea și nu se re-randează la navigare
`app/page.tsx`	Definirea componentei principale vizibile pentru o rută URL unică
`app/loading.tsx`	Interfețe de încărcare instantanee bazate pe React Suspense afișate automat în tranzit
`app/error.tsx`	Gestionarea declarativă a excepțiilor neașteptate prin Error Boundaries
`app/not-found.tsx`	Pagina personalizată afișată la coduri 404 sau la apelul funcției notFound()
`app/template.tsx`	Similar cu layout, dar reinițializează starea și rulează efectele la fiecare navigare
`app/api/route.ts`	Crearea de endpoint-uri API RESTful de backend (GET, POST, PUT, DELETE, PATCH)
`(group) Route Groups`	Organizarea logică a directoarelor de rute fără afectarea structurii URL-ului public

Rute Dinamice, Navigare Avansată și i18n (7)

Comandă / Concept	Descriere
`[id] Segmente Dinamice`	Crearea rutelor parametrizate accesibile prin obiectul params
`[...slug] Catch-All`	Capturarea tuturor segmentelor de cale ulterioare dintr-un URL ierarhic
`[[...slug]] Opțional`	Rute Catch-All flexibile care se potrivesc inclusiv cu ruta de bază fără parametri
`generateStaticParams()`	Pre-generarea statică la build time a segmentelor dinamice pentru livrare din CDN
`@slot Rute Paralele`	Randarea simultană a mai multor pagini independente în același layout (Dashboard-uri)
`(..) Rute Interceptate`	Afișarea rutelor în ferestre modale contextuale fără pierderea paginii curente
`[lang] Internaționalizare`	Rutare multi-limbă nativă în App Router cu suport pentru middleware și dicționare

Randare Server vs Client și Server Actions (7)

Comandă / Concept	Descriere
`React Server Components (RSC)`	Componente executate exclusiv pe server ce reduc bundle-ul JavaScript la zero
`'use client'`	Directivă ce marchează frontiera către componente interactive rulate pe client
`'use server'`	Directivă ce definește funcții asincrone executate direct pe server (Server Actions)
`useOptimistic()`	Actualizarea instantanee a interfeței înainte de primirea răspunsului de pe server
`useActionState() / useFormStatus()`	Gestiunea stării formularelor conectate la Server Actions și a feedback-ului de încărcare
`@next/mdx`	Integrarea documentelor Markdown îmbogățite cu componente interactive React
`next telemetry`	Controlul colectării datelor statistice anonime privind utilizarea framework-ului

Preluare Date, Revalidare și Caching (7)

Comandă / Concept	Descriere
`fetch() Cache (force-cache / no-store)`	Controlul granular al memorării răspunsurilor HTTP la nivel de cerere
`next: { revalidate: sec }`	Incremental Static Regeneration (ISR) bazat pe timp pentru reîmprospătare automată
`revalidatePath()`	Invalidarea manuală la cerere a memoriei cache pentru o anumită rută
`revalidatePath('page' \| 'layout')`	Controlul adâncimii de invalidare a cache-ului între pagini izolate și subarbori
`revalidateTag()`	Invalidarea țintită a datelor cache-uite asociate unei etichete semantice
`unstable_cache()`	Cache-uirea rezultatelor interogărilor ORM (Prisma/Drizzle) și a calculelor grele
`draftMode()`	Modul de previzualizare a ciornelor nepublicate din Headless CMS ocolind cache-ul

API-uri de Server, Antete, Conexiuni și Cookie-uri (7)

Comandă / Concept	Descriere
`cookies()`	Citirea, scrierea și ștergerea cookie-urilor HTTP pe server în Server Components și Actions
`headers()`	Inspectarea antetelor HTTP ale cererii (User-Agent, IP, Authorization) pe server
`connection()`	Semnalarea explicită a dependenței de o conexiune dinamică înainte de randare
`after()`	Programarea sarcinilor asincrone secundare ce rulează după trimiterea răspunsului către client
`redirect() / permanentRedirect()`	Redirecționarea programatică pe server returnând codurile HTTP 307 sau 308
`notFound()`	Declanșarea programatică a erorii 404 Not Found din Server Components și rute
`Variabile de Mediu (.env)`	Configurarea variabilelor secrete de server și a celor publice cu prefixul NEXT_PUBLIC_

Hook-uri de Navigare pe Client și Rutare Programatică (6)

Comandă / Concept	Descriere
	Navigare rapidă pe partea de client cu prefetching automat în fundal al paginilor
`useRouter()`	Navigare programatică pe client (router.push, replace, refresh, back)
`usePathname()`	Obținerea căii URL curente din browser pentru evidențierea link-urilor active
`useSearchParams()`	Citirea parametrilor de interogare (Query String) din URL pe client
`useSelectedLayoutSegment()`	Identificarea segmentului activ din layout pentru meniuri și tab-uri de navigare
`next/dynamic`	Încărcarea asincronă la cerere a componentelor grele (Lazy Loading cu ssr: false)

Componente Integrate de Optimizare Web (6)

Comandă / Concept	Descriere
`(next/image)`	Redimensionare automată, conversie în WebP/AVIF și protecție împotriva Layout Shift
`next/font`	Optimizarea fonturilor Google sau locale cu self-hosting automat și zero layout shift