Next.js 15: tutte le novità da scoprire

Non vi sarà sfuggito che Next.js 15 è arrivato! 🎉 E, come al solito, non arriva a mani vuote. Tra i nuovi hooks, un sistema di bundling turbo-veloce con Turbopack e un'ottimizzazione accresciuta per TypeScript, gli sviluppatori frontend non possono che applaudire. Passiamo in rassegna tutte queste novità e vediamo come trarne vantaggio. Pronto? Si parte! 🚀

1. Nuovi Hooks: miglioramento dell'esperienza di sviluppo

useServerContext e useClientContext: una gestione del contesto semplificata

Gli hooks useServerContext e useClientContext permettono di gestire in modo nativo il contesto specifico del server e del client. Non c'è più bisogno di destreggiarsi tra i due ambienti! Con questi hooks, puoi accedere direttamente ai dati pertinenti in base all'ambiente, in tutta semplicità.

typescript

typescript

Questi hooks permettono una gestione più fluida delle informazioni specifiche del server e del client, senza compromessi sulle prestazioni. Pratico, vero? 😉

useLoadingState: gestione nativa del caricamento

L'hook useLoadingState semplifica la gestione degli stati di caricamento, offrendo un'alternativa nativa agli approcci più artigianali. Perfetto per sapere quando mostrare i loader!

typescript

Con useLoadingState, puoi tenere d'occhio lo stato di caricamento in modo nativo, permettendo una migliore UX senza appesantire il codice.

2. Turbopack: un bundler ultra-performante 🚀

Ecco Turbopack, il nuovo bundler di Next.js! Progettato per sfruttare l'architettura multithread, Turbopack riduce drasticamente i tempi di build e rebuild, soprattutto per i progetti più grandi. Addio alle lunghe attese, benvenuti build istantanei.

Attivare Turbopack

Per attivare Turbopack, aggiungi semplicemente questa configurazione sperimentale nel tuo file next.config.js:

typescript

Turbopack in azione

Turbopack funziona con un approccio modulare, analizzando solo le parti necessarie. Il risultato? Build più veloci e reattività massima in sviluppo, anche su progetti grandi.

3. Gestione degli errori e sicurezza rafforzata 🔒

Next.js 15 migliora anche la gestione degli errori, rendendo i messaggi di errore più precisi e i log più completi. Questo rende il debug più rapido e aiuta a diagnosticare i problemi velocemente in produzione.

Esempio di gestione errori

Ecco come catturare gli errori con Next.js per gestire meglio i casi critici:

typescript

Questi miglioramenti semplificano il debug e rafforzano la sicurezza, limitando le informazioni sensibili che potrebbero essere esposte.

4. Miglioramenti del rendering lato server e dello streaming

Per le applicazioni che necessitano di un rendering lato server (SSR) veloce, Next.js 15 migliora lo streaming SSR, rendendo l'esperienza utente più fluida. Il rendering progressivo permette di inviare i componenti prioritari appena sono pronti, ottimizzando il tempo di caricamento percepito.

Utilizzo dello streaming SSR

Immaginiamo una pagina prodotto dove alcune informazioni critiche, come immagini e prezzo, devono essere mostrate in priorità:

typescript

Questo approccio assicura che gli utenti vedano prima le informazioni essenziali, migliorando così l'esperienza di caricamento.

5. TypeScript ottimizzato 💪

I fan di TypeScript non rimarranno delusi. Next.js 15 migliora il supporto TS con:

• Tipi più precisi per evitare errori comuni,
• Verifica dei tipi più performante durante il build,
• Tipi specifici per le nuove API come useServerContext.

Configurazione TypeScript

Se non è già fatto, Next.js genera un file tsconfig.json ottimizzato per TypeScript, con una configurazione che facilita la gestione dei percorsi e la risoluzione dei moduli:

typescript

Questa configurazione aiuta a ridurre i conflitti di percorso e ad assicurare che i moduli siano gestiti correttamente nel tuo progetto.

Conclusione

Next.js 15 porta miglioramenti sostanziali per accelerare lo sviluppo e rendere le nostre applicazioni più performanti. Hooks per gestire il contesto, Turbopack per build veloci, ottimizzazioni TypeScript e molto altro. Questo aggiornamento ha tutto per far brillare il codice e aumentare la produttività. Pronto ad adottare queste novità? Next.js 15 aspetta solo te!

Buon codice e a presto! 🚀

1// ServerComponent.tsx
2import { useServerContext } from 'next/hooks';
3
4interface ServerData {
5  username: string;
6  role: string;
7}
8
9function ServerComponent() {
10  const serverData = useServerContext<ServerData>(); // Tipizzazione dei dati server
11  return <div>Server: {serverData.username} - {serverData.role}</div>;
12}
13export default ServerComponent;

1// ClientComponent.tsx
2import { useClientContext } from 'next/hooks';
3
4interface ClientData {
5  theme: string;
6  language: string;
7}
8
9function ClientComponent() {
10  const clientData = useClientContext<ClientData>(); // Tipizzazione dei dati client
11  return <div>Client: {clientData.theme} - {clientData.language}</div>;
12}
13export default ClientComponent;

1import { useLoadingState } from 'next/hooks';
2
3function LoadingComponent() {
4  const isLoading = useLoadingState();
5  return (
6    <div>
7      {isLoading ? <p>Caricamento in corso...</p> : <p>Contenuto caricato!</p>}
8    </div>
9  );
10}
11export default LoadingComponent;

1// next.config.js
2const nextConfig = {
3  experimental: {
4    enableTurbopack: true,
5  },
6};
7export default nextConfig;

1try {
2  // Operazione che potrebbe fallire
3} catch (error) {
4  console.error('Errore catturato:', error);
5  // Log più dettagliato qui se necessario
6}

1import { Suspense } from 'react';
2
3function ProductPage() {
4  return (
5    <>
6      <Suspense fallback={<p>Caricamento immagine...</p>}>
7        <ProductImage />
8      </Suspense>
9      <Suspense fallback={<p>Caricamento prezzo...</p>}>
10        <ProductPrice />
11      </Suspense>
12    </>
13  );
14}
15export default ProductPage;

1// tsconfig.json
2{
3  "compilerOptions": {
4    "target": "es2020",
5    "module": "esnext",
6    "strict": true,
7    "baseUrl": ".",
8    "paths": {
9      "@/components/*": ["components/*"]
10    }
11  },
12  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
13  "exclude": ["node_modules"]
14}