Next.js — Cheat Sheet

Tag: nextjs, react, ssr, ssg, isr, app-router, server-components

Livello: intermedio

TL;DR: Framework React full-stack per produzione; ottimizza rendering ibrido (SSR, SSG, ISR), routing su filesystem e Server Components.

Concetti chiave

-

App Router usa React Server Components di default nella cartella app.

-

Pages Router usa pages/ basato su funzioni SSR/SSG tradizionali.

-

Server Components riducono il bundle client eseguendo logica e fetch sul server.

-

La direttiva 'use client' definisce il confine per componenti con stato e hook.

-

SSR (dynamic = 'force-dynamic') genera HTML a ogni richiesta HTTP.

-

SSG pre-renderizza le pagine statiche a tempo di compilazione (build time).

-

ISR rigenera pagine statiche in background tramite intervallo specificato con revalidate.

-

Route Handlers (route.ts) sostituiscono le vecchie API routes esponendo metodi HTTP standard.

-

Ottimizzazione integrata per asset tramite componenti next/image, next/font e next/script.

-

Server Actions permettono mutazioni asincrone sicure eseguite direttamente sul server.

Domande tipiche e risposte pronte

-

Q: Qual è la differenza principale tra Server Components e Client Components?R: I Server Component renderizzano solo sul server senza inviare codice JS al browser. Uso Client Component con 'use client' quando mi servono hook, event listener o API del browser.

-

Q: Come funziona Incremental Static Regeneration (ISR) in App Router?R: Imposto la proprietà revalidate nel fetch o a livello di route. Next.js serve la cache esistente e rigenera la pagina in background alla scadenza dell'intervallo.

-

Q: Quando conviene usare Route Handlers rispetto alle Server Actions?R: Uso Route Handlers per webhook o endpoint REST consumati da client esterni. Per mutazioni originate dall'interfaccia della stessa app preferisco Server Actions per trasparenza e revalidazione automatica.

Insidie e errori comuni

-

Inserire 'use client' inutilmente a monte nell'albero dei componenti, vanificando i benefici SSR.

-

Accedere a oggetti specifici del client come window o localStorage durante il rendering server.

-

Effettuare fetch con credenziali segrete all'interno di file marcati con 'use client'.

-

Mancata gestione del fallback per pagine dinamiche in generazione statica con generateStaticParams.

-

Sovrascrivere inavvertitamente intestazioni di caching gestite dal fetch deduplicato nativo di Next.js.

Snippet e comandi

# Avvio ambiente di sviluppo locale
npx next dev

# Compilazione e avvio del build di produzione
npx next build && npx next start

TypeScript

// Esempio App Router: Server Component con fetch cacheato e revalidate ISR
export const revalidate = 60;

export default async function ProductPage({ params }: { params: { id: string } }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`, {
    next: { revalidate: 60 }
  });
  const product = await res.json();

  return (
    <main>
      <h1>{product.title}</h1>
      <p>{product.price} €</p>
    </main>
  );
}

TypeScript

// Esempio Server Action per form mutation
export default function AddItemForm() {
  async function addItem(formData: FormData) {
    'use server';
    const name = formData.get('name');
    await db.item.create({ data: { name } });
  }

  return (
    <form action={addItem}>
      <input type="text" name="name" required />
      <button type="submit">Salva</button>
    </form>
  );
}

Da ripassare

-

[ ] Pattern di composizione tra Server e Client Components tramite children.

-

[ ] Strategie avanzate di revalidazione tag-based (revalidateTag, revalidatePath).

-

[ ] Configurazione e lifecycle del Middleware edge (middleware.ts).

-

[x] Routing dinamico a cartelle con [id] e catch-all [...slug].

Jarvis Interviews
Jarvis