dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
NEX Toate comenzile Next.js

app/page.tsx – Definirea conținutului specific al unei rute în Next.js

Structură App Router și Fișiere Speciale Next.js 13+ (App Router)

Fișierul special care face ca un segment de rută să fie accesibil public printr-un URL în browser.

Sintaxă 
export default async function Page() {
  return <h1>Bun venit pe dexblog.ro</h1>;
}

Ce face app/page.tsx - Definirea conținutului specific al unei rute

Fiecare fișier page.tsx (sau `.jsx`) marchează o pagină web publică.

Locația din sistemul de fișiere dictează URL-ul: `app/page.tsx` este pagina principală `/`, iar `app/despre/page.tsx` devine adresa `/despre`.

În mod implicit, toate paginile din App Router sunt Server Components asincrone, ceea ce permite interogarea directă a bazei de date cu `async/await` fără stări intermediare de încărcare `useEffect`.

Exemple

Exemplul 1: Pagină asincronă Server Component ce extrage date direct din server

Execută logica pe server și returnează doar HTML optimizat către browser.

export default async function ArticolePage() {
  // Apel direct pe server fără expunere de secrete:
  const date = await fetch('https://api.dexblog.ro/articole', {
    next: { revalidate: 3600 }
  });
  const articole = await date.json();

  return (
    <div>
      <h1 className="text-3xl font-bold mb-6">Articole Recente</h1>
      <ul>
        {articole.map((articol: any) => (
          <li key={articol.id}>{articol.titlu}</li>
        ))}
      </ul>
    </div>
  );
}

Ieșire în terminal

Pagina este randată pe server și trimisă gata generată către client.

Greșeli frecvente

  • Adăugarea directivei ‘use client’ în mod reflex pe orice pagină; folosiți Client Components doar când aveți nevoie de interacțiune cu utilizatorul (butoane, click-uri, formulare cu stare).

Comenzi înrudite