Creazione e gestione di un progetto Next.js

Cos'è Next.js?

Next.js è un framework basato su React sviluppato da Vercel, utilizzato per costruire applicazioni React statiche e renderizzate lato server. Offre molte funzionalità pronte all'uso, come la renderizzazione lato server (SSR), la generazione di siti statici (SSG), il routing API, il supporto integrato per CSS e Sass, e altro ancora, consentendo agli sviluppatori di creare applicazioni web moderne in modo più efficiente.

Caratteristiche principali e vantaggi di Next.js

• Renderizzazione lato server (SSR): Migliora la velocità di caricamento della pagina e le prestazioni SEO.
• Generazione di siti statici (SSG): Pre-renderizza le pagine statiche, migliorando le prestazioni e l'esperienza utente.
• Divisione automatica del codice: Carica solo il codice JavaScript necessario per la pagina corrente, ottimizzando le prestazioni.
• Routing integrato: Routing basato sul file system, senza bisogno di configurazioni aggiuntive.
• Routing API: Permette di creare endpoint API nello stesso progetto.
• Supporto integrato per CSS e Sass: Gestisce facilmente gli stili.

Utilizzare Next.js può aiutare gli sviluppatori a creare applicazioni web moderne ed altamente reattive in modo più efficiente.

Creazione e gestione di un progetto Next.js con ServBay

In questo articolo, useremo l'ambiente Node.js fornito da ServBay per creare e gestire un progetto Next.js. Useremo la funzionalità "host" di ServBay per configurare il server web e accedere al progetto tramite proxy inverso e servizio di file statici.

Creazione di un progetto Next.js

1. Inizializzazione del progetto

   Innanzitutto, assicurati di aver installato l'ambiente Node.js fornito da ServBay. Quindi, utilizza il seguente comando per inizializzare un nuovo progetto Next.js:

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   Segui le istruzioni e inserisci il nome del progetto (consigliato servbay-next-app), e seleziona altre opzioni secondo le tue esigenze.

2. Installazione delle dipendenze

   Entra nella directory del progetto e installa le dipendenze:

   cd servbay-next-app
   npm install

Modifica del contenuto di output del progetto Next.js

1. Modifica del file pages/index.js

   Apri il file pages/index.js e modifica il contenuto per visualizzare "Hello ServBay!":

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

Entrare in modalità di sviluppo

1. Avvio del server di sviluppo

   Avvia il server di sviluppo e specifica la porta (ad esempio: 8585):

   npm run dev -- -p 8585

   Questo avvierà un server di sviluppo locale che esporrà la porta 8585.

2. Configurazione del proxy inverso dell'host di ServBay

   Usa la funzionalità "host" di ServBay per accedere al server di sviluppo tramite proxy inverso. Nella configurazione dell'host di ServBay, aggiungi un nuovo proxy inverso:

   • Nome: My first Next.js dev site
   • Dominio: servbay-next-test.dev
   • Tipo di host: Proxy inverso
   • IP: 127.0.0.1
   • Porta: 8585

   Per i dettagli sulla configurazione, consulta aggiungere un sito web di sviluppo Node.js.

3. Accesso alla modalità di sviluppo

   Apri il browser e visita https://servbay-next-test.dev per vedere il progetto in tempo reale. ServBay supporta domini personalizzati e certificati SSL gratuiti, offrendo una maggiore sicurezza.

Costruzione della versione di produzione

1. Costruzione della versione di produzione

   Una volta completato lo sviluppo, usa i seguenti comandi per costruire la versione di produzione:

   npm run build
   npm run export

   Dopo la costruzione, i file statici saranno nella directory out.

2. Configurare il servizio di file statici

   Usa la funzionalità "host" di ServBay per accedere alla versione di produzione tramite servizio di file statici. Nella configurazione dell'host di ServBay, aggiungi un nuovo sito statico:

   • Nome: My first Next.js production site
   • Dominio: servbay-next-test.prod
   • Tipo di host: Statico
   • Directory radice del sito: /Applications/ServBay/www/servbay-next-app/out

3. Accesso alla modalità di produzione

   Apri il browser e visita https://servbay-next-test.prod per vedere la versione di produzione. Grazie ai domini personalizzati e ai certificati SSL gratuiti di ServBay, il tuo sito avrà una maggiore sicurezza e affidabilità.

Seguendo questi passaggi, avrai creato e gestito con successo un progetto Next.js, utilizzando le funzionalità offerte da ServBay per gestire e accedere al tuo progetto.