React Academy · Lezione

Convenzioni dei file dell'App Router

Comprenda la directory app/ e i file page.tsx, layout.tsx, loading.tsx ed error.tsx.

Convenzioni dei file dell'App Router è una lezione React 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 React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

La directory app/

App Router di Next.js utilizza la directory app/. Le cartelle definiscono i segmenti dell’URL; i file speciali all’interno delle cartelle definiscono il comportamento di ogni segmento.

page.tsx — L’interfaccia della route

page.tsx esporta il componente React visualizzato per un segmento dell’URL. Senza un page.tsx, la route non è accessibile pubblicamente.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Shell persistenti

layout.tsx avvolge le route figlie. Persiste durante la navigazione: il suo stato non viene reimpostato quando cambia la route figlia.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — UI di caricamento immediata

loading.tsx viene renderizzato immediatamente mentre vengono caricati i dati asincroni della pagina. Avvolge la pagina in un boundary Suspense automatico.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Boundary degli errori

error.tsx è un boundary degli errori di React per il segmento. Riceve l'errore e una funzione reset per ritentare l'operazione.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — UI 404

not-found.tsx viene renderizzato quando viene chiamato notFound() da un Server Component o quando nessuna route corrisponde.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Layout rimontati

template.tsx è simile a layout.tsx, ma crea una nuova istanza a ogni navigazione: lo stato viene reimpostato e gli effetti vengono eseguiti di nuovo. Lo si usi per le animazioni o l'analisi.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — Route API

route.ts (non route.tsx) esporta i gestori dei metodi HTTP (GET, POST, ecc.) per creare endpoint API all'interno della directory app/.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

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

middleware.ts — Middleware Edge

middleware.ts, nella radice del progetto, viene eseguito prima di ogni richiesta corrispondente sull'edge: lo si usa per i controlli di autenticazione, i reindirizzamenti e le riscritture degli header.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Co-locazione

È possibile collocare file che non definiscono route (componenti, utilità e test) all'interno delle cartelle app/. Solo i file che usano le convenzioni di denominazione speciali (page, layout, ecc.) vengono trattati come segmenti di route.

Layout annidati

Ogni cartella può avere il proprio layout.tsx. Il layout annidato avvolge solo gli elementi figlio del proprio segmento e si combina con il layout genitore sovrastante.

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

Verifica rapida

Quale file dell'App Router fornisce un fallback Suspense automatico mentre vengono caricati i dati asincroni di una pagina?

Riepilogo

App Router usa file speciali: page.tsx (UI della route), layout.tsx (shell persistente), loading.tsx (fallback di Suspense), error.tsx (boundary degli errori), not-found.tsx (404), route.ts (API) e middleware.ts (logica edge).

Domande Frequenti

La lezione «Convenzioni dei file dell'App Router» è gratuita?

Sì — il testo completo di «Convenzioni dei file dell'App Router» è 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 React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Convenzioni dei file dell'App Router»?

Comprenda la directory app/ e i file page.tsx, layout.tsx, loading.tsx ed error.tsx. Eserciti React 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 React Academy?

Non è richiesta alcuna esperienza precedente. React 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 «Convenzioni dei file dell'App Router»?

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 React Academy?

Sì. Ogni lezione React 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 React Academy