ServBay

Italiano

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe

Italiano

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe

Appearance

Creare ed Eseguire un Progetto Next.js in ServBay ​

Panoramica ​

Next.js è un potente framework React sviluppato e mantenuto da Vercel, ampiamente utilizzato per la creazione di applicazioni web moderne e ad alte prestazioni. Offre moltissime funzionalità pronte all’uso che semplificano notevolmente il processo di creazione di applicazioni complesse da parte degli sviluppatori.

Cos'è Next.js? ​

Next.js è un framework open source molto popolare basato su React e supporta diverse modalità di rendering, tra cui il rendering lato server (SSR) e la generazione di siti statici (SSG). Queste funzionalità contribuiscono a migliorare le prestazioni dell’applicazione, l’esperienza utente e la visibilità sui motori di ricerca. Next.js integra routing basato sul file system, API route, code splitting, supporto a CSS Modules e molte altre caratteristiche per offrire un'esperienza di sviluppo completa.

Caratteristiche e Vantaggi Principali di Next.js ​

  • Supporto a molteplici strategie di rendering: SSR (Server-Side Rendering), SSG (Static Site Generation), CSR (Client-Side Rendering) e modalità miste. Gli sviluppatori possono scegliere la modalità di rendering più adatta alle proprie esigenze.
  • Routing basato sul file system: Generazione automatica delle route in base alla struttura delle cartelle pages o app, in modo semplice ed intuitivo.
  • API Route: Permette di creare facilmente endpoint API all'interno del progetto Next.js, facilitando uno sviluppo integrato frontend-backend.
  • Code Splitting automatico: Divisione automatica del codice a livello di pagina: viene caricato solo il JavaScript necessario per la pagina visualizzata, ottimizzando la velocità di caricamento.
  • Ottimizzazione delle immagini (next/image): Gestione automatica delle dimensioni, del formato e delle strategie di caricamento delle immagini per elevate prestazioni.
  • Supporto nativo a CSS e Sass: Semplifica la gestione e la stesura degli stili.
  • Fast Refresh: Aggiornamento quasi istantaneo delle modifiche al codice durante lo sviluppo.

Con Next.js gli sviluppatori possono realizzare applicazioni web moderne, performanti, scalabili e facilmente manutenibili in modo più efficiente.

Eseguire un Progetto Next.js con ServBay ​

ServBay offre un ambiente locale di sviluppo web integrato che include Node.js e molti altri linguaggi e strumenti. Utilizzando l’ambiente Node.js e la funzionalità di gestione siti (che include reverse proxy e servizio di file statici) di ServBay, è possibile creare, sviluppare e distribuire progetti Next.js con grande facilità.

Questa guida mostra come creare un progetto Next.js, avviarlo in modalità di sviluppo (usando il reverse proxy per la preview) e distribuirlo in produzione (utilizzando il servizio di file statici), il tutto all’interno di ServBay.

Prerequisiti ​

Prima di iniziare, assicurati di aver completato i seguenti passaggi:

  1. ServBay è stato installato correttamente su macOS.
  2. Tramite l’interfaccia di gestione Pacchetti di ServBay, hai installato ed abilitato il pacchetto Node.js necessario. Se non hai ancora installato Node.js, consulta la documentazione su Come usare l'ambiente Node.js di ServBay.

Procedura ​

1. Creare un nuovo progetto Next.js ​

Per prima cosa occorre inizializzare un nuovo progetto Next.js.

  1. Apri il terminale e posizionati nella cartella root dei siti di ServBay:

    bash
    cd /Applications/ServBay/www

  2. Inizializza il progetto con create-next-app: esegui il seguente comando per creare un nuovo progetto Next.js. Consigliamo di chiamare la directory servbay-next-app e questo comando la creerà all’interno di /Applications/ServBay/www.

    bash
    npx create-next-app@latest servbay-next-app

    npx è un tool per eseguire comandi relativi a pacchetti Node.js, mentre create-next-app@latest utilizza la versione più recente dello strumento d’inizializzazione Next.js. Segui le istruzioni sul terminale per completare la configurazione del progetto (scelte come TypeScript, ESLint, Tailwind CSS, App Router, ecc).

  3. Accedi alla cartella del progetto ed installa le dipendenze:

    bash
    cd servbay-next-app
npm install

    Il comando npm install installerà tutte le dipendenze necessarie, così come definite nel file package.json del progetto.

2. Modifica dell’output del progetto (opzionale) ​

Per verificare che il progetto funzioni correttamente, puoi modificare la homepage.

  1. Apri il file pages/index.js (se hai scelto il Pages Router). Se hai scelto App Router, modifica invece app/page.js.

    bash
    # Usa il tuo editor preferito, ad esempio VS Code
code pages/index.js

  2. Modifica il file affinché la pagina mostri "Hello ServBay!". Sostituisci o aggiorna il contenuto con qualcosa di simile:

    javascript
    // pages/index.js (Pages Router)
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
      <p>This page is running via ServBay.</p>
    </div>
  );
}

    Se utilizzi l’App Router (app/page.js), la struttura potrà essere leggermente diversa, ma si tratta sempre di modificare il contenuto del tag <h1>.

3. Avviare la modalità di sviluppo ​

Durante lo sviluppo, normalmente si utilizza il server di sviluppo fornito da Next.js, che supporta Hot Module Replacement (HMR) e Fast Refresh per vedere subito le modifiche. Il reverse proxy di ServBay è perfetto per instradare un dominio locale verso la porta del server di sviluppo in esecuzione.

  1. Avvia il server di sviluppo Next.js: dalla root del progetto (/Applications/ServBay/www/servbay-next-app), esegui:

    bash
    npm run dev -- -p 8585

    Questo comando avvierà il server di sviluppo Next.js e, tramite il parametro -- -p 8585, lo farà ascoltare sulla porta locale 8585 (scegline una libera).

  2. Configura il sito in ServBay (Reverse Proxy): apri l’app ServBay e vai nella sezione di gestione siti. Clicca su aggiungi nuovo sito e configura così:

    • Nome (Name): My first Next.js dev site (o un nome a piacere)
    • Dominio (Domain): servbay-next-dev.servbay.demo (è consigliato il suffisso .servbay.demo per test locali)
    • Tipo sito (Website Type): scegli Reverse Proxy
    • IP di destinazione (Proxy IP): 127.0.0.1 (loopback locale)
    • Porta di destinazione (Proxy Port): 8585 (porta su cui gira Next.js)

    Salva la configurazione per applicare le modifiche. ServBay configurerà automaticamente Caddy o Nginx (in base alle tue settings) per inoltrare tutte le richieste a servbay-next-dev.servbay.demo verso 127.0.0.1:8585.

    Per dettagli vedi la guida Aggiungere un sito di sviluppo Node.js in ServBay.

  3. Visita il sito di sviluppo: apri il browser e visita il dominio configurato, ad esempio https://servbay-next-dev.servbay.demo.

    Poiché ServBay aggiunge e configura automaticamente i certificati SSL per i domini locali tramite ServBay User CA, puoi accedere in locale via HTTPS senza warning dal browser. ServBay supporta anche domini personalizzati e certificati SSL gratuiti, rendendo l’ambiente di sviluppo ancora più pratico.

4. Costruire la versione di produzione e distribuire il sito statico ​

Quando il progetto Next.js è pronto per la pubblicazione, solitamente si costruisce una versione ottimizzata per la produzione. Se il tuo progetto genera output statico (output: 'export' nel config o usando il comando next export), allora l’opzione di sito statico di ServBay è l’ideale.

  1. Costruisci la versione di produzione Next.js ed esporta i file statici: dalla root del progetto, esegui:

    bash
    npm run build
npm run export
    • npm run build compila il codice Next.js e genera la build di produzione ottimizzata, che di solito viene inserita nella cartella .next.
    • npm run export (richiede una configurazione compatibile o versioni Next.js precedenti) o una configurazione output: 'export' salva la build sotto forma di file HTML, CSS e JavaScript statici nella cartella out.

  2. Configura il sito statico in ServBay: apri l’app ServBay e vai nella sezione di gestione siti. Clicca su aggiungi nuovo sito e imposta:

    • Nome (Name): My first Next.js production site (o altro)
    • Dominio (Domain): servbay-next-prod.servbay.demo (consigliato il suffisso .servbay.demo)
    • Tipo sito (Website Type): scegli Static
    • Root del sito (Website Root): inserisci il percorso completo della cartella statica di Next.js, ad esempio /Applications/ServBay/www/servbay-next-app/out.

    Salva e applica le modifiche. ServBay configurerà il web server per servire direttamente i file dalla cartella /Applications/ServBay/www/servbay-next-app/out.

  3. Visita il sito in modalità produzione: apri il browser su https://servbay-next-prod.servbay.demo per vedere i contenuti statici generati da Next.js.

    Anche qui, grazie ai domini personalizzati di ServBay e alla configurazione automatica SSL, anche il sito locale in produzione sarà accessibile in sicurezza via HTTPS.

Conclusioni ​

Seguendo questi passaggi, hai creato un progetto Next.js nell’ambiente locale ServBay, imparando ad avviarlo in modalità di sviluppo tramite reverse proxy e a distribuirlo tramite servizio di file statici una volta pronta la versione di produzione. L’ambiente integrato di ServBay e la sua pratica gestione dei siti rendono molto più semplici tutte le fasi di sviluppo, test e distribuzione locale dei progetti Next.js.