Cos'è Next.js e perché le aziende lo scelgono invece di WordPress

Oggi Next.js è presente in quasi tutte le conversazioni sulle nuove pagine aziendali. L'agenzia lo consiglia al posto di WordPress, lo sviluppatore parla di "rendering lato server" e nelle offerte di hosting improvvisamente si deve cercare il "supporto per Node.js". In questa guida spieghiamo in modo semplice cos'è Next.js, come funziona, a cosa serve e a cosa non serve, e di cosa ha bisogno dal server. Senza gergo dove possibile evitarlo.

Se stai valutando una scelta precisa tra due tecnologie, abbiamo un confronto separato: WordPress o Next.js per una pagina aziendale. Qui invece ci concentriamo su Next.js.

Indice

1. Cos'è Next.js in una frase?
2. In cosa Next.js differisce dal solo React?
3. Come Next.js visualizza le pagine? Quattro modalità di rendering
4. Cos'altro è incluso in Next.js?
5. Perché le aziende scelgono Next.js invece di WordPress?
6. Quando Next.js non è una buona idea?
7. Che tipo di hosting serve a Next.js?
8. Vercel o un server proprio?
9. Come avviare Next.js su Saplo passo dopo passo?
10. FAQ

Cos'è Next.js in una frase?

Next.js è un framework gratuito per costruire siti e applicazioni web, basato sulla libreria React, che prepara l'HTML completo sul server prima che la pagina arrivi al browser.

È sviluppato dall'azienda Vercel, il codice è open source (licenza MIT) e la prima versione è uscita nel 2016. Oggi è uno dei modi più popolari per scrivere siti in JavaScript. Su Saplo lo installiamo nella versione 16.

Un framework è un insieme di soluzioni e regole pronte all'uso, in cui lo sviluppatore inserisce il proprio codice. Non serve reinventare ogni volta il routing, il caricamento dei dati, l'ottimizzazione delle immagini o la costruzione dei file per la produzione. Next.js fornisce tutto questo nel pacchetto.

Importante per chi non è tecnico: Next.js non è un sistema di gestione dei contenuti come WordPress. Non ha un pannello dove cliccare "Aggiungi articolo". È uno strumento per sviluppatori. I contenuti vengono forniti da file, database o da un sistema CMS separato (di questo parleremo più avanti).

In cosa Next.js è diverso dal semplice React?

React è una libreria per costruire interfacce: pulsanti, moduli, liste, intere viste. Tuttavia, da solo non risponde alle domande che emergono quando si sviluppa un vero sito web:

• come organizzare le sottopagine e gli URL,
• da dove e quando prendere i dati,
• come fare in modo che Google veda il contenuto e non una pagina vuota,
• come costruire e avviare una versione di produzione.

Una classica applicazione React (la cosiddetta SPA) invia al browser un file HTML quasi vuoto e un pacchetto JavaScript. Solo dopo il browser compone la pagina. Per l’utente questo significa uno schermo bianco per una frazione di secondo o più a lungo su un telefono lento. Per i motori di ricerca è un lavoro aggiuntivo, perché il contenuto appare solo dopo l’esecuzione degli script.

Next.js prende React e vi aggiunge un livello server. La pagina arriva al browser già piena di contenuti, mentre gli elementi interattivi "prendono vita" poco dopo. Da qui la sua popolarità in progetti dove contano SEO e velocità della prima visualizzazione.

Come mostra Next.js le pagine? Quattro modalità di rendering

Questa è la cosa più importante da capire, perché da essa dipende anche la scelta dell'hosting. Next.js permette a ogni sottopagina di scegliere un modo diverso di essere generata.

Modalità	Quando viene generato l'HTML	Adatto per
Pagina statica (SSG)	una volta, durante la compilazione del progetto	pagina principale, “Chi siamo”, offerta, articoli del blog
Rendering lato server (SSR)	ad ogni accesso dell'utente	carrello, pannello cliente, risultati di ricerca
Aggiornamento incrementale (ISR)	una volta, poi periodicamente in background	catalogo prodotti, listino prezzi, notizie
Rendering nel browser (CSR)	solo sul dispositivo dell'utente	grafici, editor, sezioni dopo il login

Nella pratica un sito aziendale mescola queste modalità. La descrizione dell'azienda è statica e si carica immediatamente. La lista prodotti si aggiorna ogni pochi minuti. Il pannello cliente si renderizza su richiesta, perché ognuno vede contenuti differenti.

Dalla versione 13 Next.js ha anche il cosiddetto App Router e i Server Components: componenti che eseguono solo sul server e non inviano il loro codice al browser. Meno JavaScript lato utente significa pagine più veloci, soprattutto su smartphone.

Cos'altro include Next.js?

Oltre al rendering, il framework risolve diversi problemi tipici che con React puro devi gestire da solo:

• Routing basato sui file. La cartella app/oferta/page.js corrisponde automaticamente all'indirizzo /oferta. Senza configurazioni.
• Ottimizzazione delle immagini. Il componente next/image riduce automaticamente le foto, serve formati moderni e le carica solo quando appaiono sullo schermo.
• API personalizzate. All'interno dello stesso progetto puoi scrivere endpoint, ad esempio per un modulo di contatto o un webhook di pagamento. Non serve un backend separato.
• Metadati SEO. Titoli, descrizioni, tag Open Graph e mappa del sito si impostano direttamente nel codice, per ogni singola pagina.
• Font e script. I meccanismi integrati caricano i font senza «saltelli» del testo e posticipano gli script esterni.
• Build veloci. Nella versione 16 lo strumento di build predefinito è Turbopack, decisamente più rapido del vecchio Webpack.

Perché molte aziende preferiscono Next.js invece di WordPress?

Ci sono quattro argomenti principali.

1. Velocità senza dover aggiungere plugin. WordPress esegue PHP e interroga il database ad ogni visita, a meno che non venga configurata una cache. Una sottopagina statica in Next.js è un file già pronto. È più facile ottenere ottimi risultati su PageSpeed e Core Web Vitals. Le cause della lentezza di WordPress le abbiamo descritte nell'articolo WordPress lento? 9 cause.

2. Minor superficie di attacco. Non c'è un pannello /wp-admin che i bot attaccano quotidianamente, né decine di plugin di autori diversi. Una pagina statica ha praticamente nulla da cui farsi attaccare.

3. Libertà di progetto. Il sito non è limitato da un tema o da un page builder. Per i brand che vogliono un aspetto unico, animazioni o integrazioni con un sistema proprietario, fa una grande differenza.

4. Sito e applicazione in uno. Se oltre al biglietto da visita deve esserci un configuratore, un calcolatore, un pannello clienti o un negozio con logica propria, Next.js gestisce tutto in un solo progetto.

È sempre più diffuso anche il modello headless: i contenuti si inseriscono tramite un pannello comodo (come Directus, Strapi, o anche WordPress usato solo come backend), e li mostra Next.js. La redazione ha il suo pannello, i visitatori una pagina veloce. Su Saplo Directus e Next.js si possono usare insieme in un unico Box.

Quando Next.js non è la scelta giusta?

Onestamente: non sempre conviene. Next.js non è la soluzione ideale quando:

• a modificare i contenuti deve essere una persona non tecnica e il budget non include un CMS. Senza un pannello, ogni modifica testuale richiede l'intervento di uno sviluppatore,
• hai bisogno di una funzione "pronta subito". Prenotazioni, moduli, negozi con pagamenti e corrieri polacchi sono disponibili come plugin già pronti su WordPress. Con Next.js, invece, serve quasi sempre un programmatore,
• non hai chi possa fare le modifiche. WordPress è gestibile da molte più persone rispetto a chi sa scrivere codice React,
• il sito è una semplice vetrina senza ambizioni. In questo caso, la differenza di velocità non giustifica il costo più alto di realizzazione.

Un negozio online semplice si avvia ancora più rapidamente su una piattaforma pronta all'uso. Ne abbiamo parlato nel testo Cos'è WooCommerce.

Di quale hosting ha bisogno Next.js?

Molti si sorprendono. Next.js è un'applicazione Node.js, non un insieme di file PHP. Da questo derivano due scenari:

Versione completamente statica (impostazione output: 'export'). Next.js genera file HTML, CSS e JS pronti all'uso. Basta un qualsiasi server di file, anche un hosting normale. Tuttavia, perdi SSR, ISR, API personalizzate e l'ottimizzazione delle immagini lato server.

Versione completa. È necessario avere un processo Node.js attivo in background che risponda alle richieste. Serve anche un server web davanti a esso (ad esempio nginx), un certificato SSL e qualcosa che riavvii il processo dopo un crash o un riavvio della macchina. Il classico hosting condiviso per PHP di solito non lo permette.

I requisiti minimi sono modesti. Nella nostra ricetta Next.js abbiamo adottato 512 MB di RAM e 2 GB di disco per ogni applicazione. Più memoria serve soprattutto durante la fase di build (npm run build) di progetti più grandi, perché in quel momento il consumo è massimo.

Vercel o server proprio?

Vercel, creatore di Next.js, offre la sua piattaforma di hosting e su di essa il framework funziona nel modo "più nativo". Vale però la pena conoscere due cose:

• il piano gratuito Hobby è destinato a un uso non commerciale. Il sito aziendale dovrebbe essere su un piano a pagamento, calcolato per ogni membro del team,
• con traffico maggiore si aggiungono costi per il trasferimento, le chiamate alle funzioni e l'ottimizzazione delle immagini, quindi il conto cresce con la popolarità del sito.

Un server o un container proprio offrono un costo fisso e prevedibile e il pieno controllo sui dati (server nell'UE). In cambio, qualcuno deve occuparsi di Node.js, nginx, SSL e dei riavvii automatici. Il conto dettagliato dei costi rimandiamo a un articolo separato, ma la regola è semplice: più grande è il traffico e il team, più conviene un abbonamento fisso.

Come avviare Next.js su Saplo passo dopo passo?

Su Saplo Next.js è un'applicazione pronta presente nel catalogo. Non devi configurare il server: il processo Node.js è monitorato (si riavvia da solo in caso di crash), nginx dirige il traffico verso di lui e il certificato SSL viene emesso automaticamente.

Passo 1. Scegli il piano. Un sito in Next.js sta comodamente su Box S (1 GB RAM, 15 GB SSD, 27 € all'anno). Se vuoi lavorare via SSH o costruire progetti più grandi, scegli Box M (2 GB RAM, 30 GB SSD, 65 € all'anno), che include l'accesso SSH. Il Prezzo del primo anno è uguale a quello del rinnovo. Applicazioni e domini sono illimitati su ogni piano. Puoi confrontare i piani nel listino prezzi.

Passo 2. Aggiungi l'applicazione. Nel pannello seleziona dal catalogo Next.js. Se non hai ancora codice, Saplo crea un progetto di partenza (create-next-app), lo costruisce e lo avvia: così vedi subito il sito funzionante.

Passo 3. Collega l'indirizzo. All'inizio ricevi una sottodominio *.saploapp.pl con SSL. Puoi aggiungere un dominio personale nel pannello e configurare i record DNS seguendo le istruzioni.

Passo 4. Carica il tuo codice tramite Git. Genera il file di configurazione con il comando saplo init, aggiungilo al repository e collega GitHub nei dettagli dell'applicazione (app “Saplo Deploy”). Da quel momento ogni git push al ramo di produzione (di default main) avvia automaticamente npm install, la build e il riavvio. Di solito richiede 1-3 minuti, il risultato si vede con un pallino verde o rosso accanto al commit su GitHub. Maggiori dettagli nella Documentazione Git Deploy.

Passo 5. Variabili d'ambiente. API key, indirizzi di database e segreti li imposti nel pannello come variabili, non nel codice del repository.

Hai già un sito in Next.js su Vercel o un altro server? La Migrazione a Saplo è inclusa in ogni piano.

FAQ

Next.js è gratuito?

Sì. Next.js è un software open source con licenza MIT e può essere utilizzato commercialmente senza costi. L'unica spesa è per il hosting su cui il sito è ospitato.

Next.js è adatto per la SEO?

Sì, è uno dei suoi principali punti di forza. Grazie alla generazione di HTML sul server o durante la fase di build, i motori di ricerca ricevono immediatamente il contenuto completo, e il caricamento rapido aiuta con i Core Web Vitals. Tuttavia, il framework da solo non sostituisce contenuti di qualità e metadati corretti.

Devo conoscere React per usare Next.js?

Per creare un sito, sì, perché Next.js è React con aggiunte. Per usare un sito già pronto, no: se i contenuti arrivano dal pannello CMS, la redazione non tocca il codice.

Next.js funzionerà su un normale hosting condiviso?

Solo come esportazione statica, senza rendering lato server, ISR e API proprie. La versione completa richiede un processo Node.js attivo, cioè un server, un container o una piattaforma che lo esegua. Su Saplo ogni Box è un container separato, dove Next.js funziona nella sua versione completa.

Quanta RAM serve a Next.js?

Un sito piccolo o medio funziona con circa 512 MB di RAM. Il processo che richiede più risorse è la compilazione del progetto, quindi per applicazioni grandi è consigliabile avere una scorta, per esempio Box M con 2 GB di RAM.