Frontend Academy · Lezione

Pages Router e App Router a confronto

Confrontare i paradigmi di routing di Next.js: il Pages Router basato sui file e il nuovo App Router con layout annidati, gestione del caricamento ed Error Boundary

Lezione 1 di 413 passaggi

Pages Router e App Router a confronto è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Due router, un framework

Next.js ha due sistemi di routing: l'originale Pages Router (directory pages/) e il più recente App Router (directory app/, Next 13+). Entrambi continuano a funzionare in Next 14/15.

Pages Router — routing basato sui file

Ogni file all'interno di pages/ diventa una route. I segmenti dinamici utilizzano le parentesi quadre: pages/users/[id].tsx corrisponde a /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — recupero dei dati

Export speciali dichiarano il comportamento di recupero: getStaticProps (SSG), getServerSideProps (SSR), getStaticPaths (SSG con route dinamiche).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — routing basato sulle cartelle

App Router utilizza le cartelle come segmenti delle route. Un file page.tsx all'interno di una cartella definisce la pagina.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — file speciali

I file per segmento offrono primitive potenti: layout.tsx (UI persistente intorno ai figli), loading.tsx (fallback di Suspense), error.tsx (Error Boundary), not-found.tsx.

Layout annidati

I layout di App Router avvolgono le route annidate e persistono durante la navigazione, senza essere ricreati.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Recupero dei dati in App Router

Gli Server Component possono essere asincroni e recuperare i dati direttamente: non servono getServerSideProps/getStaticProps. Il componente viene eseguito sul server e al client viene inviato solo HTML.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Client Component in App Router

Aggiunga 'use client' all'inizio di un file per contrassegnare il relativo componente come Client Component (interattivo, eseguito nel browser).

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

API Routes e Route Handlers

Pages Router: pages/api/users.ts esporta una funzione predefinita con req/res. App Router: app/api/users/route.ts esporta i metodi HTTP (GET, POST) come export nominati, utilizzando Request/Response standard.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

Strategia di migrazione

Entrambi i router possono coesistere nello stesso progetto: sposti le pagine gradualmente, una alla volta. In caso di conflitto, App Router ha la precedenza.

Quando utilizzare l'uno o l'altro

Nuovi progetti: App Router (più potente e attualmente al centro degli investimenti). Progetti esistenti con Pages Router: può mantenerlo o migrare gradualmente. Per piccoli siti statici che non necessitano di layout o RSC, vanno bene entrambi.

Verifica rapida

Come si indica un componente come Client Component nel Pages Router di Next.js?

Rispondi nella lezione interattiva

Riepilogo: Pages Router e App Router

Pages Router: basato sui file, getStaticProps/getServerSideProps. App Router (Next 13+): basato sulle cartelle, Server Components asincroni, layout annidati e file di caricamento/errore. Indichi l'interattività lato client con 'use client'. Route API: pages/api/* rispetto a app/api/*/route.ts con esportazioni per i metodi HTTP. Possono coesistere entrambi; lo sviluppo attivo è concentrato sull'App Router.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 41
Lezioni: 163

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Pages Router e App Router a confronto» è gratuita?

Sì — il testo completo di «Pages Router e App Router a confronto» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Pages Router e App Router a confronto»?

Confrontare i paradigmi di routing di Next.js: il Pages Router basato sui file e il nuovo App Router con layout annidati, gestione del caricamento ed Error Boundary Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Pages Router e App Router a confronto»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy