Next.js App Router: la guida pratica

Un nuovo modo di costruire applicazioni React

L'App Router di Next.js ha cambiato il modo di strutturare le applicazioni. Il routing si basa sul file system dentro la cartella app, e ogni cartella diventa un segmento di URL. Il file page.tsx definisce la pagina, layout.tsx l'involucro condiviso.

Server Component per default

La novita piu importante e che i componenti sono Server Component per default: vengono renderizzati sul server e inviano al browser solo l'HTML risultante, senza appesantire il bundle JavaScript. Si passa a un Client Component solo quando serve interattivita, dichiarandolo esplicitamente.

// app/articoli/page.tsx — Server Component
async function getArticoli() {
  const res = await fetch("https://api.example.com/articoli", {
    next: { revalidate: 60 },
  });
  return res.json();
}

export default async function Pagina() {
  const articoli = await getArticoli();
  return <ArticoliList items={articoli} />;
}

Layout, loading ed error

L'App Router introduce file convenzionali: layout per la struttura condivisa, loading per gli stati di caricamento e error per la gestione degli errori, tutti annidati per segmento. Questo rende l'esperienza utente piu fluida con poco codice.

Quando adottarlo

L'App Router brilla nei progetti che beneficiano di rendering server-side, dati dinamici e SEO. Per applicazioni molto interattive, il mix di Server e Client Component permette di ottimizzare ogni parte.

In MUSTNODE usiamo l'App Router per costruire portali e applicativi veloci, ben indicizzabili e manutenibili.