Routing în App Router
Foldere = rute, fișiere speciale, segmente dinamice.
Actualizat
Ce este Next.js
Next.js e un framework peste React. React îți dă componentele; Next adaugă tot ce îi trebuie unei aplicații reale:
| Ce adaugă Next | Fără Next ar trebui să... |
|---|---|
| routing bazat pe foldere | configurezi un router de mână |
| randare pe server (SSR, static, PPR) | ai doar o pagină goală + JS pe client |
| Server Components și Server Actions | scrii un backend separat |
| cache, optimizare de imagini și fonturi | le configurezi singur |
| build și deploy optimizat (Vercel) | configurezi bundler, server, CDN |
Next are două sisteme de routing: App Router (app/, modern — îl folosim) și Pages Router (pages/, vechi).
Ce este routing-ul bazat pe fișiere
Routing = care cod răspunde la care URL. În App Router, structura folderelor din app/ este structura URL-urilor. O rută devine accesibilă când folderul are un page.tsx.
app/layout.tsxlayout comun pentru tot site-ul (obligatoriu)page.tsx/blog/page.tsx/blog[slug]/page.tsx/blog/:slug, ex. /blog/salut
(marketing)/about/page.tsx/about — grupul (marketing) nu apare în URL
_components/ignorat de routing (folder privat)
Fișierele speciale
| Fișier | Rol |
|---|---|
page.tsx |
UI-ul rutei — o face publică |
layout.tsx |
învelește paginile copil; persistă la navigare |
loading.tsx |
fallback de Suspense cât se încarcă pagina |
error.tsx |
prinde erorile din segment (Client Component) |
not-found.tsx |
afișat la notFound() sau 404 |
route.ts |
endpoint API (GET, POST...) — vezi Route Handlers |
Detalii despre layout-uri și stări în Layout-uri și navigare.
Tipuri de segmente
| Segment | Folder | Potrivește | params |
|---|---|---|---|
| static | blog |
/blog |
— |
| dinamic | [slug] |
/blog/salut |
{ slug: 'salut' } |
| catch-all | [...slug] |
/docs/a/b/c |
{ slug: ['a', 'b', 'c'] } |
| catch-all opțional | [[...slug]] |
/docs și /docs/a/b |
{ slug: undefined } sau array |
| grup | (nume) |
nu apare în URL | — |
| privat | _nume |
exclus din routing | — |
params e un Promise
În Next 16, params și searchParams sunt Promise-uri — le aștepți cu await:
export default async function Page({ params }: PageProps<'/blog/[slug]'>) {
const { slug } = await params
return <h1>{slug}</h1>
}PageProps<'/blog/[slug]'> e generat automat de Next din structura folderelor — tipurile sunt mereu corecte.
generateStaticParams
Pentru rute dinamice, spui la build ce valori există, ca Next să le pre-genereze ca pagini statice:
export async function generateStaticParams() {
const posts = await getPosts()
return posts.map(post => ({ slug: post.slug }))
}Aplicația asta face exact asta pentru fiecare lecție (app/[locale]/[topic]/[lesson]/page.tsx).
Pe scurt
- Next = React + routing + randare pe server + backend + optimizări.
- Folderele din
app/sunt URL-urile;page.tsxface ruta publică. [slug]dinamic,(grup)invizibil în URL;paramsse așteaptă cuawait.