Next.js, il popolare framework per lo sviluppo di applicazioni web, ha recentemente annunciato il rilascio della sua ultima versione: Next.js 14. In occasione della quarta conferenza annuale di Vercel, gli sviluppatori di Next.js hanno presentato una serie di miglioramenti e nuove funzionalità che promettono di rendere il framework ancora più potente e facile da usare.
Contrariamente alle versioni precedenti, che si concentravano sull’aggiunta di nuove API, Next.js 14 si distingue per il suo impegno nel perfezionare gli strumenti esistenti, offrendo agli sviluppatori una soluzione più efficiente e intuitiva per la realizzazione di progetti web moderni.
In questo articolo andiamo ad analizzare tutte le più importanti caratteristiche di questa nuova versione del framework full-stack costruito su React, osservando quali sono le motivazioni alla base della loro introduzione e come possiamo implementarle nelle nostre applicazioni.
Inoltre, analizziamo anche eventuali modifiche rispetto alle versioni precedenti e quali conseguenze comportano.
- Turbopack: Un Compilatore Turbo per Next.js
- Server Actions: Semplificare le Mutazioni Dati
- Partial Prerendering: Unendo Statico e Dinamico
- Miglioramenti ai Metadati: Ottimizzazione dell'Esperienza Utente
- Corso di Apprendimento Next.js: Formazione e Risorse Aggiornate
- Integrazione con Strapi e l'AI di Vercel
- Next.js e l'Intelligenza Artificiale
- Altre modifiche
- Conclusione
Turbopack: Un Compilatore Turbo per Next.js
Una delle novità più significative di Next.js 14 è l’introduzione di Turbopack, un compilatore innovativo che sostituisce Webpack. Questo nuovo sistema, costruito sulla base del linguaggio di programmazione Rust, promette di rivoluzionare il processo di sviluppo con tempi di avvio del server locale più rapidi del 53,3% e aggiornamenti del codice più veloci del 94,7% grazie al Fast Refresh. Turbopack rappresenta un enorme passo avanti nella performance di sviluppo locale, portando benefici tangibili in termini di velocità e affidabilità.
Turbopack non è solo un semplice miglioramento rispetto a Webpack; è una rivoluzione nella gestione delle dipendenze e nella compilazione dei moduli. La sua architettura, basata su Rust, consente di gestire le dipendenze in modo più efficiente, riducendo drasticamente i tempi di compilazione. Questo significa che gli sviluppatori possono vedere in tempo reale le modifiche apportate al codice, migliorando significativamente l’esperienza di sviluppo. Turbopack è particolarmente vantaggioso in progetti di grandi dimensioni, dove la gestione delle dipendenze e la velocità di compilazione sono critiche per la produttività.
Puoi testare Turbopack immediatamente.
Assicurati di avere la versione 14 di Next.js nel tuo progetto. Puoi aggiornarla modificando la dipendenza nel tuo file package.json e poi eseguendo npm install o yarn install.
In alcune versioni di Next.js 14, Turbopack potrebbe non essere abilitato per impostazione predefinita. Se necessario, puoi abilitarlo aggiungendo un flag nel tuo comando di avvio. Per esempio, potresti modificare il tuo script dev in package.json da “dev”: “next dev” a “dev”: “next dev –turbo”.
Lettura consigliata: Tecnologie web a confronto: Laravel 10, Spring Boot 3.1 e Next.js 14
Server Actions: Semplificare le Mutazioni Dati
Next.js 14 introduce come funzionalità stabile le Server Actions, un cambiamento che semplifica notevolmente lo sviluppo di applicazioni web. Le Server Actions permettono di definire funzioni eseguite sul server che possono essere invocate direttamente dai componenti React nel lato client. Questo approccio facilita la creazione di mutazioni dati, migliorando l’esperienza utente in scenari di connessioni lente o dispositivi meno potenti. Gli sviluppatori possono ora implementare funzionalità server-side in maniera più intuitiva, riducendo la complessità e migliorando l’efficienza del codice.
Le Server Actions sono profondamente integrate nell’intero modello di App Router. Puoi quindi:
- Rivalidare i dati memorizzati nella cache con revalidatePath() o revalidateTag().
- Reindirizzare a diverse rotte tramite redirect().
- Impostare e leggere i cookie attraverso cookies().
- Gestire gli aggiornamenti UI ottimistici con useOptimistic().
- Catturare e visualizzare gli errori provenienti dal server con useFormState().
- Mostrare gli stati di caricamento sul client con useFormStatus().
Vediamo un esempio.
All’interno di un componente React, definisci una funzione che eseguirà un’azione lato server. La chiave qui è l’uso della direttiva ‘use server’ per indicare che la funzione verrà eseguita sul server:
// app/page.tsx
export default function Page() {
async function createItem(formData) {
'use server';
// Logica per creare un elemento (ad esempio, salvataggio nel database)
return { success: true };
}
// Resto del componente...
}
Code language: JavaScript (javascript)Nello stesso componente, puoi ora utilizzare questa funzione direttamente per eseguire azioni lato server, come rispondere a un evento di invio di un modulo:
// Continuazione di app/page.tsx
export default function Page() {
async function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const result = await createItem(formData);
if (result.success) {
// Gestisci il successo dell'azione
}
}
return (
<form onSubmit={handleSubmit}>
{/* Elementi del form */}
<button type="submit">Submit</button>
</form>
);
}
Code language: JavaScript (javascript)Qui, la funzione createItem viene eseguita sul server quando il modulo viene inviato. Questo approccio consente di gestire operazioni lato server come il salvataggio dei dati o altre elaborazioni back-end in modo efficiente e sicuro, direttamente all’interno dei componenti React.
Ecco invece un esempio di come potresti strutturare un componente in Next.js 14 che contiene due form, ognuno dei quali interagisce con diverse Server Actions tramite metodi GET e POST:
Definizione delle Server Actions in File Esterni
// actions/getData.js
export async function getData() {
'use server';
// Logica per ottenere i dati (GET)
}
// actions/postData.js
export async function postData(formData) {
'use server';
// Logica per inviare i dati (POST)
}
Code language: JavaScript (javascript)Creazione del Componente con Due Form
// app/page.tsx
import React from 'react';
import { getData } from '../actions/getData';
import { postData } from '../actions/postData';
export default function Page() {
async function handleGetSubmit(event) {
event.preventDefault();
const result = await getData();
// Gestisci la risposta
}
async function handlePostSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const result = await postData(formData);
// Gestisci la risposta
}
return (
<div>
<form onSubmit={handleGetSubmit}>
{/* Elementi del form per GET */}
<button type="submit">Get Data</button>
</form>
<form onSubmit={handlePostSubmit}>
{/* Elementi del form per POST */}
<button type="submit">Post Data</button>
</form>
</div>
);
}
Code language: JavaScript (javascript)In questo esempio, ogni form ha il proprio gestore di invio (handleGetSubmit e handlePostSubmit) che chiama la rispettiva Server Action. Il primo form gestisce una richiesta GET, mentre il secondo gestisce una richiesta POST. Le Server Actions sono definite in file esterni per una migliore organizzazione e riutilizzo del codice.
Lettura consigliata: Google Cloud e la Generative AI: tutte le innovazioni lanciate grazie a Duet AI
Partial Prerendering: Unendo Statico e Dinamico
Un’altra caratteristica sperimentale in Next.js 14 è il Partial Prerendering. Questa funzione mira a combinare i vantaggi della generazione di siti statici (SSG) e del rendering lato server (SSR). Utilizzando i confini dei componenti Suspense di React, Partial Prerendering determina quali parti dell’applicazione sono statiche e quali dinamiche. Le parti statiche vengono preparate come HTML, mentre le parti dinamiche vengono aggiornate solo quando necessario. Questo approccio ibrido promette di semplificare lo sviluppo, offrendo le prestazioni della staticità con la flessibilità del dinamico.
Il Partial Prerendering è una caratteristica che potrebbe cambiare radicalmente il modo in cui pensiamo al rendering nelle applicazioni web. Offrendo un ibrido tra SSG e SSR, permette agli sviluppatori di ottimizzare le prestazioni senza sacrificare la flessibilità. Questa tecnica è particolarmente utile in scenari dove è necessario bilanciare le esigenze di contenuto statico e dinamico, come nei siti e-commerce o nelle content platforms.
Per implementare il Partial Prerendering in Next.js 14, utilizzerai le funzionalità di React Suspense per definire quali parti della tua applicazione possono essere prerenderizzate staticamente e quali devono essere caricate dinamicamente. Ecco un esempio:
Utilizza Suspense per definire le parti dinamiche del tuo componente che dovrebbero essere caricate dopo il caricamento della shell statica:
// app/page.tsx
import React, { Suspense } from 'react';
const DynamicComponent = React.lazy(() => import('./DynamicComponent'));
export default function Page() {
return (
<div>
<h1>Titolo Statico</h1>
<Suspense fallback={<p>Caricamento...</p>}>
<DynamicComponent />
</Suspense>
</div>
);
}
Code language: JavaScript (javascript)Definisci il componente che verrà caricato dinamicamente:
// DynamicComponent.tsx
export default function DynamicComponent() {
// Logica per il componente dinamico
return <div>Contenuto Dinamico</div>;
}
Code language: JavaScript (javascript)DynamicComponent verrà caricato dinamicamente, mentre il resto della pagina (<h1>Titolo Statico</h1>) verrà prerenderizzato staticamente. Questo approccio combina i vantaggi della generazione di pagine statiche con la flessibilità del rendering dinamico, migliorando le prestazioni e l’esperienza utente.
Lettura consigliata: Sam Altman: quando la realtà supera le allucinazioni di chatGPT
Miglioramenti ai Metadati: Ottimizzazione dell’Esperienza Utente
Next.js 14 ha introdotto miglioramenti significativi nella gestione dei metadati. Questa versione separa i metadati bloccanti da quelli non bloccanti, assicurando che la visualizzazione iniziale della pagina non venga rallentata da metadati non essenziali. La gestione ottimizzata dei metadati è fondamentale per un’esperienza utente fluida, evitando problemi come il flickering della pagina o cambiamenti nella disposizione degli elementi dovuti a variazioni nella viewport o nel tema.
Prima che il contenuto della tua pagina possa essere trasmesso dal server, sono necessari alcuni importanti metadati relativi alla viewport, allo schema di colori e al tema da inviare prima al browser. Assicurare che questi tag meta siano inviati con il contenuto iniziale della pagina aiuta a garantire un’esperienza utente fluida, prevenendo sfarfallii dovuti al cambio del colore del tema o spostamenti del layout dovuti a modifiche della viewport.
Come abbiamo detto, in Next.js 14, abbiamo una separazione tra i metadati bloccanti e quelli non bloccanti. Solo un piccolo sottoinsieme di opzioni di metadati è bloccante, assicurando che i metadati non bloccanti non impediscano a una pagina prerenderizzata parzialmente di servire la shell statica.
Le seguenti opzioni dei metadati sono ora deprecate e saranno rimosse dai metadati in una futura versione principale:
– `viewport`: Imposta lo zoom iniziale e altre proprietà del viewport.
– `colorScheme`: Imposta le modalità di supporto (chiaro/scuro) per il viewport.
– `themeColor`: Imposta il colore del bordo intorno al viewport.
A partire da Next.js 14, ci sono nuove opzioni `viewport` e `generateViewport` per sostituire queste opzioni. Tutte le altre opzioni dei metadati rimangono invariate. Puoi iniziare ad adottare queste nuove API oggi. Le opzioni dei metadati esistenti continueranno a funzionare.
Corso di Apprendimento Next.js: Formazione e Risorse Aggiornate
Riconoscendo l’importanza della formazione per gli sviluppatori, Next.js 14 è accompagnato da un nuovo corso di apprendimento gratuito (https://nextjs.org/learn). Questo corso copre una vasta gamma di argomenti, dal Next.js App Router all’autenticazione, passando per l’integrazione con database Postgres, il rendering statico e dinamico, fino al prerendering parziale. Il corso è progettato per aiutare gli sviluppatori a comprendere e sfruttare appieno le potenzialità del framework.
Integrazione con Strapi e l’AI di Vercel
L’integrazione con Strapi, un CMS headless, è un altro aspetto notevole di Next.js 14. Questa collaborazione consente di costruire progetti che sfruttano le caratteristiche di entrambi i sistemi, offrendo funzionalità come CRUD completo, autenticazione, registrazione e middleware per percorsi protetti. Inoltre, Vercel ha introdotto un nuovo SDK per l’AI, promuovendo l’integrazione tra intelligenza artificiale e sviluppo web, e ampliando le possibilità di creazione di contenuti dinamici e personalizzati.
Next.js e l’Intelligenza Artificiale
L’integrazione dell’intelligenza artificiale in Next.js apre nuove frontiere nello sviluppo web. Con l’AI SDK di Vercel, gli sviluppatori possono sfruttare i modelli di linguaggio per creare esperienze utente personalizzate e contenuti dinamici. Questa integrazione è particolarmente interessante per applicazioni che richiedono un elevato grado di interattività e personalizzazione, come piattaforme di e-learning, assistenti virtuali, e sistemi di raccomandazione
Altre modifiche
Ecco una serie di altri cambiamenti relativi alla versione 14 di Next:
- [Cambiamento] La versione minima di Node.js è ora la 18.17.
- [Cambiamento] Rimosso il target WASM per la build di next-swc (PR).
- [Cambiamento] Abbandonato il supporto per @next/font a favore di next/font (Codemod).
- [Cambiamento] Modificato l’import di ImageResponse da next/server a next/og (Codemod).
- [Cambiamento] Il comando next export è deprecato a favore di output: ‘export’.
- [Deprecazione] onLoadingComplete per next/image è deprecato a favore di onLoad.
- [Deprecazione] domains per next/image è deprecato a favore di remotePatterns.
- [Caratteristica] È possibile abilitare un logging più dettagliato intorno alla cache di fetch (Documentazione).
- [Miglioramento] Dimensione della funzione ridotta dell’80% per un’applicazione create-next-app di base.
- [Miglioramento] Gestione della memoria migliorata quando si utilizza il runtime edge in sviluppo.
Conclusione
Next.js 14 rappresenta un significativo passo avanti per il framework. Concentrandosi sul miglioramento delle caratteristiche esistenti piuttosto che sull’aggiunta di nuove, questa versione offre agli sviluppatori un’esperienza più snella, efficiente e potente. Con Turbopack, Server Actions, Partial Prerendering e l’integrazione con Strapi e l’intelligenza artificiale, Next.js 14 si afferma come una soluzione ideale per lo sviluppo di applicazioni web moderne e performanti. Gli sviluppatori hanno ora a disposizione uno strumento ancora più robusto e versatile per creare esperienze web innovative ed efficaci.
