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

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

• app/layout.tsx - Șabloane de structură persistente (RootLayout și Nested Layouts): Definește structura grafică comună partajată între mai multe pagini (antet, meniu, subsol) ce își păstrează starea la navigare.
• React Server Components (RSC) - Execuție exclusivă pe server cu zero bundle: Componente React rulate exclusiv pe server care trimit către browser doar HTML și instrucțiuni compacte, fără cod JavaScript în bundle.
• app/loading.tsx - Stări de încărcare instantanee (React Suspense): Afișează automat un ecran schelet (skeleton UI) sau indicator de progres în timp ce datele paginii sunt descărcate pe server.