Routing în Next.js

Next.js folosește un sistem de routing bazat pe fișiere. Structura folderelor din app/ definește automat URL-urile aplicației tale.

Conceptul de bază

Fiecare folder din app/ reprezintă un segment de URL, iar fișierul page.jsx din acel folder face ruta accesibilă public.

- layout.jsx
- page.jsx

Rute statice


// app/about/page.jsx → /about
export default function AboutPage() {
  return <h1>Despre noi</h1>
}


// app/blog/page.jsx → /blog
export default function BlogPage() {
  return <h1>Blog</h1>
}

Rute dinamice

Folosești [param] pentru segmente variabile:


// app/blog/[slug]/page.jsx → /blog/orice-slug
export default async function BlogPost({ params }) {
  const { slug } = await params
  return <h1>Articol: {slug}</h1>
}

Catch-all routes


// app/docs/[...path]/page.jsx → /docs/a/b/c
export default async function DocsPage({ params }) {
  const { path } = await params
  // path = ['a', 'b', 'c']
  return <p>Cale: {path.join('/')}</p>
}

[[...path]] (cu paranteze duble) face segmentele opționale — ruta funcționează și fără ele. Nextra folosește exact acest pattern!

Layouts

Fișierul layout.jsx învelește toate paginile din același folder și sub-foldere. Nu se re-randează la navigare.


// app/blog/layout.jsx
export default function BlogLayout({ children }) {
  return (
    <div>
      <nav>
        <a href="/blog">Toate articolele</a>
      </nav>
      <main>{children}</main>
    </div>
  )
}

- layout.jsx
- - layout.jsx
  - page.jsx

Link și navigare

Folosește componenta <Link> în loc de <a> pentru navigare client-side rapidă:


import Link from 'next/link'
 
export default function Nav() {
  return (
    <nav>
      <Link href="/">Acasă</Link>
      <Link href="/about">Despre</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  )
}

Navigare programatică


'use client'
import { useRouter } from 'next/navigation'
 
export default function LoginButton() {
  const router = useRouter()
 
  async function handleLogin() {
    await login()
    router.push('/dashboard')   // redirect
    // router.replace('/dashboard') // fără history entry
    // router.back()               // înapoi
  }
 
  return <button onClick={handleLogin}>Intră în cont</button>
}

useRouter din next/navigation funcționează doar în Client Components (cu 'use client').

Route Groups

Poți organiza rutele fără a afecta URL-ul folosind paranteze (group):

Pagini speciale

Fișier	Rol
`page.jsx`	Pagina publică a rutei
`layout.jsx`	Layout persistent
`loading.jsx`	UI de loading (Suspense automat)
`error.jsx`	UI pentru erori
`not-found.jsx`	Pagina 404


// app/blog/loading.jsx
export default function Loading() {
  return <p>Se încarcă articolele...</p>
}


// app/blog/error.jsx
'use client'
export default function Error({ error, reset }) {
  return (
    <div>
      <p>Ceva a mers greșit: {error.message}</p>
      <button onClick={reset}>Încearcă din nou</button>
    </div>
  )
}