Come distribuire un’applicazione Next.js

La distribuzione di un’applicazione Next.js implica che l’applicazione web Next.js sia accessibile su Internet e che gli utenti di tutto il mondo possano interagire con essa.

Sebbene siano disponibili diverse opzioni di distribuzione, la piattaforma Container as a Service (CaaS) di Back4app offre diversi vantaggi. Questi vantaggi la rendono una scelta convincente per tutti gli sviluppatori che desiderano distribuire la propria applicazione web con semplici passaggi.

In questo articolo, costruirete un’applicazione Next.js e imparerete come ospitare e distribuire tale applicazione utilizzando il servizio di containerizzazione di Back4app.

Punti di forza

• Imparerete a utilizzare il modello cloud Container as a Service per distribuire le vostre applicazioni web Next.js in modo rapido ed efficiente.

• Scoprirete i punti di forza di Next.js, come il rendering lato server, la suddivisione automatica del codice, il routing integrato e la generazione di siti statici che migliorano l’esperienza dell’utente.

• Comprenderete i potenziali limiti di Next.js, come la curva di apprendimento, l’ecosistema limitato, la complessità del rendering lato server e la limitata flessibilità del routing.

Che cos’è Next.js?

Next.js è un framework open-source esteso alla libreria React per la generazione di applicazioni web. Con Next.js, è possibile creare comodamente applicazioni React renderizzate lato server (SSR) e generate staticamente, con prestazioni adeguate alle proprie esigenze.

È stato creato da Vercel (precedentemente noto come Zeit) nel 2016. Negli ultimi anni Next.js ha guadagnato molta popolarità grazie alla sua facilità d’uso e alle sue potenti funzionalità.

Vantaggi di Next.js

Next.js offre diversi vantaggi che lo rendono una scelta popolare per lo sviluppo web. Alcuni di questi vantaggi includono:

Rendering lato server

Il framework Next.js consente il rendering lato server per le applicazioni web. Il rendering lato server consente di pre-renderizzare le pagine sul server prima di inviarle al client come HTML. Ciò consente una migliore ottimizzazione per i motori di ricerca (SEO).

Quando si utilizza il rendering lato server, le pagine vengono renderizzate sul server prima di essere inviate al client, aumentando così i tempi di caricamento delle pagine. Questo è particolarmente vantaggioso per gli utenti con connessioni o dispositivi più lenti.

Inoltre, il rendering lato server facilita il recupero dei dati da API o database prima del rendering della pagina.

Divisione automatica del codice

La suddivisione del codice si riferisce alla tecnica di suddividere un’applicazione JavaScript e tutto il suo codice in parti più piccole. Next.js divide automaticamente il codice in base ai percorsi della pagina.

La funzione di suddivisione automatica del codice di Next.js consente di velocizzare il caricamento iniziale delle pagine. Inoltre, riduce la quantità di JavaScript inviato al client, migliorando le prestazioni e l’esperienza dell’utente.

Instradamento integrato

Il sistema di routing integrato di Next.js è un vantaggio significativo del framework. Con il sistema di routing incorporato, la definizione dei percorsi e la navigazione tra le pagine sono semplici. Next.js supporta il routing sia lato client che lato server.

Questo sistema di routing supporta il routing dinamico, aumentando la produttività degli sviluppatori, migliorando le prestazioni delle applicazioni e offrendo un’esperienza utente fluida ed efficiente.

Percorsi API

Le applicazioni Next.js sono dotate di rotte API predefinite che consentono agli sviluppatori di creare endpoint API serverless direttamente all’interno delle loro applicazioni. Le rotte API sono una potente funzionalità di Next.js che offre diversi vantaggi per la creazione di applicazioni web.

Questi vantaggi includono la possibilità per gli sviluppatori di creare funzioni serverless, definire e organizzare endpoint API e recuperare dati durante il rendering lato server. Le rotte eliminano la necessità di un server backend separato. Supportano anche le API REST e GraphQL.

Next.js utilizza le rotte API per gestire in modo efficiente le richieste API, semplificando la costruzione di applicazioni scalabili, performanti e SEO-friendly.

Generazione di siti statici

La generazione statica di siti è un vantaggio fondamentale del framework Next.js. Next.js utilizza la generazione statica di siti per pre-renderizzare le pagine al momento della creazione e servirle come file statici. Questa funzione garantisce tempi rapidi di caricamento delle pagine grazie al pre-rendering di ogni pagina in file HTML.

I siti statici sono altamente SEO-friendly e hanno vettori di attacco ridotti, il che li rende più sicuri. I siti statici generati da Next.js sono intrinsecamente scalabili, in quanto possono gestire carichi di traffico elevati senza affaticare l’infrastruttura del server.

Next.js consente il supporto offline per i siti statici, in modo che gli utenti possano continuare a navigare e accedere alle pagine precedentemente visitate senza una connessione a Internet.

Limitazioni di Next.js

Sebbene Next.js sia un framework potente e popolare per la creazione di applicazioni React renderizzate sul lato server, è bene conoscere alcune limitazioni:

Curva di apprendimento

Next.js introduce concetti e convenzioni aggiuntive non familiari allo sviluppo React tradizionale. Passare a costruire con Next.js può richiedere del tempo per capire e adattarsi alla sua architettura e alle sue caratteristiche specifiche.

Next.js offre una serie di opzioni di configurazione che possono essere personalizzate in base ai requisiti del progetto. Con i suoi strumenti, le sue librerie e le sue opzioni di plugin, è necessario prendersi un po’ di tempo per familiarizzare con l’ecosistema Next.js.

Ecosistema limitato

Next.js è un framework relativamente nuovo rispetto a framework/librerie consolidati come React e Angular. Di conseguenza, il suo ecosistema è ancora in crescita e in fase embrionale. Non ha la stessa ampiezza di librerie e plugin dei framework più affermati.

Potrebbe essere necessario affidarsi a pacchetti supportati dalla comunità o costruire soluzioni personalizzate per requisiti specifici.

Complessità del rendering lato server

Sebbene il rendering lato server sia una potente funzionalità di Next.js, può anche introdurre complessità nel processo di sviluppo.

Spesso richiede molto più tempo per l’apprendimento e l’implementazione. L’uso del rendering lato server può portare a errori di rendering del server o a incoerenze tra il rendering del server e quello del client.

È meglio prestare attenzione quando si implementa questo rendering. È necessario essere in grado di gestire efficacemente il recupero dei dati e lo stato dell’applicazione, poiché il server e il client devono sincronizzare i loro stati.

Flessibilità di routing limitata

Next.js ha un sistema di routing integrato che segue un approccio basato sui file. Questo ha lo scopo di semplificare il routing in molti casi. Tuttavia, potrebbe non fornire lo stesso livello di flessibilità di librerie di routing più avanzate.

La personalizzazione del comportamento del routing al di là delle convenzioni predefinite può richiedere ulteriori soluzioni, non sempre convenienti.

Opzioni di distribuzione di Next.js

Per le applicazioni Next.js sono disponibili diverse opzioni di distribuzione, tra cui Containers as a Service (CaaS) e Infrastructure as a Service (IaaS).

Dovete sapere quali sono queste opzioni, come funzionano e come si confrontano tra loro per adattarsi al meglio alla vostra applicazione Next.js.

Infrastruttura come servizio (IaaS)

IaaS è un modello di cloud computing che fornisce risorse informatiche virtualizzate su Internet. Quando si utilizza IaaS, gli sviluppatori possono distribuire e gestire le loro applicazioni su macchine virtuali (VM) ospitate da un provider cloud.

La distribuzione di un’applicazione Next.js su una piattaforma IaaS offre diversi vantaggi, tra cui il controllo e la flessibilità. Le piattaforme IaaS sono anche economicamente vantaggiose, poiché seguono un programma pay-as-you-go. Ciò significa che il costo viene addebitato in base alle risorse che l’applicazione finisce per utilizzare.

Tra le piattaforme IaaS più diffuse che si possono utilizzare per distribuire le applicazioni Next.js vi sono:

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

Contenitore come servizio (CaaS)

CaaS è un modello di cloud computing simile a una piattaforma IaaS. Tuttavia, oltre a fornire le risorse di calcolo, offrono un ambiente completamente gestito per la distribuzione e la gestione di applicazioni containerizzate.

Ciò significa che la configurazione e il lavoro per gestire l’esecuzione dell’applicazione sono minimi. Ciò significa anche che il controllo sulle personalizzazioni è molto limitato.

Quando si distribuisce un’applicazione Next.js come contenitore, il codice dell’applicazione, il runtime e le dipendenze vengono raggruppati in un’immagine del contenitore. Questa immagine può quindi essere distribuita ed eseguita su una piattaforma CaaS.

Alcune popolari piattaforme CaaS su cui è possibile distribuire le applicazioni Next.js includono:

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

Le piattaforme CaaS semplificano la distribuzione. Inoltre, migliorano la scalabilità, la portabilità e la sicurezza delle applicazioni. Astraggono dalla gestione dell’infrastruttura e forniscono orchestrazione e scalabilità integrate.

Creazione e distribuzione di un’applicazione Next.js su Back4App

In questa sezione, discuteremo di ciò che occorre per costruire un’applicazione web utilizzando il framework Next.js e distribuire l’applicazione sulla piattaforma Back4app utilizzando il servizio container Back4app.

Imparerete a navigare nella piattaforma e a utilizzare il servizio container per rendere accessibile la vostra applicazione web attraverso i server di Back4app. Dopo aver letto questa sezione, imparerete come distribuire un’applicazione Next.js.

Che cos’è Back4app Containers?

La piattaforma CaaS di Back4app è una piattaforma che offre un modello di servizio basato sul cloud, consentendo di gestire e distribuire container e applicazioni su tali container.

I contenitori di Back4App sono una potente funzionalità della piattaforma Back4App che offre un ambiente flessibile, scalabile e sicuro per l’esecuzione delle applicazioni.

Questi contenitori supportano diversi linguaggi di programmazione come PHP, Python, Node.js, ecc. Per alcuni sviluppatori si tratta di un’ottima piattaforma di hosting Next.js gratuita.

I container di Back4app possono essere scalati automaticamente per soddisfare le vostre esigenze. Ogni contenitore è isolato dagli altri, garantendo la protezione dei dati dell’applicazione. I container si integrano facilmente con l’ecosistema Back4App.

In questo modo è possibile collegare facilmente i container ad altri servizi Back4App, come database e funzioni cloud.

Introduzione al progetto

In questa esercitazione, si costruirà un’applicazione di base utilizzando Next.js. Questa applicazione recupererà consigli casuali da un’API esterna utilizzando l’API fetch. L’applicazione visualizzerà poi i consigli sull’interfaccia dell’applicazione web che costruirete.

È possibile saltare la costruzione dell’applicazione Next.js per distribuire l’applicazione su Back4app. Trovate il codice sorgente finale dell’applicazione in questo repository GitHub.

Prerequisiti

Per seguire questo tutorial e distribuire la vostra applicazione Next.js su Back4app, dovete soddisfare i seguenti prerequisiti.

Assicurarsi di avere:

• Comprensione dei concetti della libreria React
• Esperienza con Docker, compresa l’installazione di Docker
• Familiarità con Node.js e NPM
• Git installato sul computer e un account GitHub.

Codifica dell’applicazione Next.js

Per creare lo scaffold per l’applicazione Next.js, eseguire il seguente comando nel terminale node.js:

npx create-next-app@latest

Eseguendo il comando di cui sopra, si otterrà una serie di richieste visualizzate nel terminale. Queste richieste servono a configurare l’applicazione Next.js.

Le richieste saranno simili a questa schermata del terminale.

Next.js configura l’applicazione in base alle risposte fornite. In questa applicazione non saranno necessari App Router e Tailwind CSS. Selezionare No per queste opzioni.

Quando la vostra applicazione è stata creata, iniziate a costruire l’interfaccia.

Per prima cosa, aggiungere i seguenti stili globali al file globals.css:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

Il file globals.css si trova nella cartella styles della cartella src. Dopo aver aggiunto gli stili globali, per applicarli alla vostra applicazione, importate il file globals.css nel file _app.tsx nella cartella pages.

Prima di importare il file globals.css nel file _app.tsx, è necessario creare un componente di layout per definire il layout dell’applicazione.

A tale scopo, creare una cartella di componenti nella cartella src e un file Layout.tsx all’interno di tale cartella. Nel file Layout.tsx, scrivere il seguente codice:

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

Il blocco di codice precedente definisce un componente Layout. Nel componente Layout, si importano gli stili dal file Home.module.css e la funzione Comforter dal modulo next/font/google.

Utilizzando la funzione Comforter, si configura il font Comforter e lo si applica all’elemento h1 dell’intestazione, impostando il prop className a comforter.className.

L’espressione props.children renderà i componenti figli all’interno del componente di layout.

È inoltre necessario definire lo stile dell’intestazione nel file Home.module.css e gli altri stili necessari.

Ad esempio:

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

Ora, importare il file global.css e il componente Layout nel file _app.tsx e avvolgere l’applicazione nel componente Layout:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

È stato definito il layout dell’applicazione. Quindi, è possibile recuperare i consigli dall’API e visualizzarli nell’applicazione. Per farlo, si utilizzerà il file index.tsx nella cartella pages.

Nel file index.tsx, sovrascrivere il codice esistente con il codice seguente:

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

Il blocco di codice definisce la pagina iniziale. Importa la libreria React, il modulo Home.module.css per lo stile e il font Google Montserrat dalla libreria di font Next.js.

L’hook useEffect è un potente strumento che consente di eseguire effetti collaterali nei componenti React. In questa applicazione, è stato utilizzato l’hook useEffect per recuperare i consigli dall’API. Il consiglio recuperato dall’API viene quindi impostato sullo stato advice.

Il gancio useEffect verrà eseguito inizialmente quando il componente viene reso e poi di nuovo ogni volta che il valore dello stato del conteggio cambia. Questo perché è stato impostato lo stato del conteggio come valore dell’array delle dipendenze.

Quando si fa clic sul pulsante generate, viene eseguita la funzione handleClick, che incrementa lo stato del conteggio di 1. Questo fa sì che l’hook useEffect venga eseguito di nuovo, recuperando nuovi consigli dall’API e aggiornando lo stato dei consigli. Ogni volta che si fa clic sul pulsante generate, sullo schermo verrà visualizzato un nuovo consiglio.

La vostra applicazione Next.js è completa!

Per avviare l’applicazione, eseguire il seguente comando:

npm run dev

L’applicazione deve essere in esecuzione sul server locale http://localhost:3000.

Facendo clic sul pulsante genera, si recupera e si visualizza un nuovo consiglio. Inoltre, ogni volta il “numero di consigli” viene incrementato di 1.

Dockerizzare l’applicazione

Prima di distribuire l’applicazione Next.js su Back4app, è necessario dockerizzare l’applicazione. La dockerizzazione di un’applicazione impacchetta l’applicazione e le sue dipendenze in contenitori Docker.

I contenitori Docker offrono un modo leggero, isolato e portatile per eseguire le applicazioni con le librerie e le configurazioni necessarie.

In questo modo è possibile distribuire facilmente le applicazioni su qualsiasi macchina con Docker installato. Con la dockerizzazione delle applicazioni si semplifica la distribuzione, si migliora la portabilità, la scalabilità e così via.

Di seguito è riportata una guida passo-passo su come è possibile dockerizzare l’applicazione Next.js:

Passo 1: Creare un Dockerfile nella radice del progetto
Creare un nuovo file chiamato Dockerfile nella directory principale del progetto Next.js. Questo file conterrà le istruzioni per Docker per costruire un’immagine della vostra applicazione.

Passo 2: Definire il file Docker
Nel file Docker, inserire il seguente codice:

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

Questo file Docker esegue le seguenti operazioni:

• Si parte dal runtime ufficiale di Node.js 14.
• Imposta la directory di lavoro su /app.
• Copia package.json e package-lock.json nell’immagine Docker e installa le dipendenze.
• Copia il resto del codice dell’applicazione nell’immagine Docker.
• Costruisce l’applicazione Next.js.
• Espone la porta 3000 per l’applicazione.
• Definisce il comando di avvio dell’applicazione.

Queste specifiche descrivono l’ambiente in cui verrà eseguita l’applicazione.

Passo 3: Creare l’immagine Docker

Eseguire il seguente comando nel terminale per creare l’immagine Docker:

docker build -t advice-generator .

Si può sostituire “advice-generator” con il nome che si vuole dare all’immagine Docker.

Eseguire il contenitore Docker

Dopo aver creato l’immagine, è possibile eseguirla come contenitore con il seguente comando:

docker run -p 3000:3000 advice-generator 

Questo comando mappa la porta 3000 del contenitore Docker con la porta 3000 del computer.

Seguendo questi passaggi, l’applicazione Next.js verrà eseguita in un contenitore Docker. È possibile accedervi navigando su http://localhost:3000 nel browser web.

Inviare l’applicazione Next.js a GitHub

Dopo aver dockerizzato l’applicazione, è necessario eseguire il push dell’applicazione su un repository GitHub. Per spingere l’applicazione in un repository GitHub, creare un nuovo repository all’interno del proprio account GitHub ed eseguire i seguenti comandi nella directory dell’applicazione sul proprio terminale:

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: Questo comando inizializza un nuovo repository Git nella directory corrente.
• git add: Questo comando aggiunge tutti i file della directory corrente all’area di staging.
• git remote add origin : questo comando collega il repository locale a un repository remoto. Sostituire l’opzione con l’URL del repository remoto.
• git commit -m ‘initial commit’: questo comando prende tutte le modifiche scritte nell’area di staging e le memorizza in un nuovo commit.
• git branch -M main: Questo comando crea un nuovo ramo chiamato main e passa ad esso.
• git push -u origin main: Questo comando spinge i commit nel ramo principale al repository remoto origin.

Distribuire l’applicazione su Back4app

Per distribuire la vostra applicazione su Back4app, dovete prima creare un account Back4app. Per farlo, seguite i seguenti passaggi:

1. Visitate il sito web di Back4app.
2. Fare clic sul pulsante “Iscriviti”.
3. Compilate il modulo di iscrizione e inviatelo.

Se si dispone già di un account Back4app configurato, è sufficiente effettuare l’accesso e procedere alla fase successiva.

Dopo aver creato un account, accedere al proprio account e fare clic su “Nuova app”.

pulsante. Il pulsante si trova nell’angolo superiore destro dello schermo.

Verrà visualizzata una schermata simile a quella mostrata di seguito.

Selezionare l’opzione Container as a Service per costruire e distribuire l’applicazione usando i container. La compilazione non dovrebbe richiedere molto tempo. Al termine, collegare l’account GitHub all’applicazione CaaS creata.

Quindi selezionate il repository che volete distribuire dal vostro account GitHub collegato nell’applicazione Back4app.

Dopo aver selezionato un repository, non resta che distribuire l’applicazione. Prima di farlo, è necessario assegnare un nome all’applicazione e configurarne il deployment.

Fare clic sul pulsante “Crea applicazione” per distribuire l’applicazione.

Congratulazioni, la vostra applicazione è stata distribuita con successo su Back4app. È possibile accedere all’applicazione sul web navigando al link fornito da Back4app nella schermata precedente.

Conclusione

Next.js è un framework open-source per la costruzione di applicazioni React renderizzate lato server (SSR). Offre molti vantaggi, tra cui la generazione di siti statici, la suddivisione automatica del codice, il routing integrato, i percorsi API e così via. Questi vantaggi rendono Next.js un framework potente.

La distribuzione di un’applicazione Next.js utilizzando il CaaS di Back4pp semplifica il processo di sviluppo. La piattaforma CaaS di Back4app è una soluzione scalabile, sicura ed economica per la distribuzione di applicazioni Next.js.

La sua interfaccia user-friendly, gli aggiornamenti in tempo reale, il supporto alle API GraphQL e REST, i backup automatici e l’ambiente serverless ne fanno una scelta perfetta per gli sviluppatori.

FAQ