Guida alla creazione e al deployment di un'app Next.js

Lo sviluppo di un'applicazione Next.js è solo la fase iniziale; il passaggio cruciale successivo è il deployment. Questo processo prevede la messa a disposizione dell'applicazione agli utenti su internet. Una strategia di deployment efficace è fondamentale per garantire le prestazioni, la scalabilità e l'affidabilità della tua applicazione. Questa guida ti illustrerà i passaggi per eseguire il deployment della tua app Next.js.

Esegui la tua app Next.js su Cloud Run

Che cos'è il framework Next.js?

Next.js è un framework React che si basa su React aggiungendo funzionalità che semplificano la creazione e l'ottimizzazione automatica di siti web pronti per la produzione. 

In parole semplici, Next.js è un framework che ti aiuta a creare app moderne con React. Offre supporto per il server, immagini e componenti ottimizzati che consentono di ottenere risultati rapidi mantenendo un trasferimento di file di piccole dimensioni.

Differenze tra React (predefinito) e Next.js

Entrambi possono sembrare simili ed eseguire JavaScript, ma ci sono enormi differenze in ciò che fanno e nelle loro funzioni.

Funzionalità

React (impostazione predefinita)

Next.js

SEO friendliness

Può essere impegnativo

SEO friendly

Prestazioni di caricamento iniziale

Più lento

Più veloce

Recupero dei dati

Richiede l'implementazione manuale

Integrato con getServerSideProps e getStaticProps

Routing

Utilizza una libreria di routing (ad esempio, React Router)

Routing basato sul file system

complessità

Più semplice

Più configurato fin da subito

Funzionalità

React (impostazione predefinita)

Next.js

SEO friendliness

Può essere impegnativo

SEO friendly

Prestazioni di caricamento iniziale

Più lento

Più veloce

Recupero dei dati

Richiede l'implementazione manuale

Integrato con getServerSideProps e getStaticProps

Routing

Utilizza una libreria di routing (ad esempio, React Router)

Routing basato sul file system

complessità

Più semplice

Più configurato fin da subito

Come creare un'app Next.js

Per molte app React, i passaggi sono generalmente gli stessi, ma consigliamo di utilizzare il framework Next.js. Per requisiti di alto livello e prestazioni elevate, questo framework gestirà molti componenti che aiutano a scalare l'app in modo più efficiente e a ottimizzare la SEO del sito React.

Dovrai generare il modello utilizzando il terminale in modo che siano presenti tutti i dettagli e i requisiti del codice. 

Usa il terminale:

npx create-next-app@latest

Per seguire, avrai bisogno anche di alcune configurazioni.

Ti serviranno le istruzioni su cosa è necessario, cosa ti serve (informazioni sul server o sul client) e dove si trovano. Ecco cosa puoi aspettarti dalla build che verrà creata.

"Questo è per le prestazioni e la velocità."

Ancora una volta, questo può aiutarti ad assicurarti di avere le parti pronte che ti fanno desiderare componenti con lato server e/o client.

Ora aggiorna il codice e rendi il layout più bello.

Potresti aver bisogno di informazioni a riguardo, quindi consulta questa documentazione.

Ora che hai apportato queste modifiche, la configurazione è completa. Consenti il rendering.

Considerazioni chiave per la creazione di un'app Next.js

Per un'ottimizzazione per i motori di ricerca ottimale, la velocità del tuo sito web è fondamentale. JavaScript, di per sé, può rallentare il rendering e influire negativamente sulle prestazioni di ricerca. Tuttavia, l'utilizzo di Next.js può mitigare questo problema. Pertanto, dai priorità a un'esperienza di caricamento rapida e a una gestione efficiente dei dati sul tuo sito. Una sicurezza solida e prodotti di alta qualità richiedono un uso attento dei dati di test, nel rispetto della privacy e dell'accesso.

Routing lato client

La maggior parte delle app React utilizza una libreria come react-router-dom per gestire la navigazione. Poiché ciò avviene nel browser, il server di hosting deve essere configurato per supportarlo. In genere, ciò significa indirizzare tutte le richieste di pagina al file index.html principale, consentendo a React Router di prendere il controllo e visualizzare il componente corretto.

Variabili di ambiente

Probabilmente la tua applicazione avrà bisogno di configurazioni diverse per lo sviluppo e la produzione, come chiavi API o endpoint di database. È fondamentale gestirle utilizzando variabili di ambiente (ad esempio, tramite file .env) in modo da non esporre informazioni sensibili nel codice sorgente.

Comunicazione API di backend

Un frontend React è responsabile della UI, ma di solito ottiene i suoi dati dinamici da un'API di backend. Durante il deployment, devi assicurarti che la tua applicazione React conosca l'URL corretto della tua API di produzione e che sia configurata per gestire la condivisione delle risorse tra origini (CORS) se l'API è ospitata su un dominio diverso.


Come eseguire il deployment di un'app Next.js su Cloud Run

Cloud Run può essere una buona scelta per il deployment di un'app React quando vuoi utilizzare un flusso di lavoro basato su container, che offre la massima coerenza e portabilità. Inizia a utilizzare la guida rapida per creare ed eseguire il deployment di app Next.js React su Cloud Run. 

Passaggio 1: assicurati dell'applicazione

Per trasferire correttamente. Assicurati di aver implementato tutti i dettagli pertinenti per i dati e le impostazioni di trasferimento.

Passaggio 2: creazione del Docker per la build successiva

Seguendo questi passaggi, assicurati che ogni fase contenga tutti i dettagli necessari per il progetto.

# Install dependencies only when needed

FROM node:16-alpine AS deps

# Check https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# If using turbo, uncomment this section as well:

# COPY turbo.json ./

# COPY .gitignore ./


# Add env variable

ENV NEXT_TELEMETRY_DISABLED 1


# Rebuild hook allows to check what and what not to include

RUN npm run build


###############

#### Fase 2: immagine di produzione ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# NEXT_PUBLIC_... env variables during build time.

ENV NODE_ENV production


# you only need to copy next.config.js if you are using a custom config file

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# See details in: https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

# Install dependencies only when needed

FROM node:16-alpine AS deps

# Check https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# If using turbo, uncomment this section as well:

# COPY turbo.json ./

# COPY .gitignore ./


# Add env variable

ENV NEXT_TELEMETRY_DISABLED 1


# Rebuild hook allows to check what and what not to include

RUN npm run build


###############

#### Fase 2: immagine di produzione ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# NEXT_PUBLIC_... env variables during build time.

ENV NODE_ENV production


# you only need to copy next.config.js if you are using a custom config file

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# See details in: https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

Ora devi eseguire il deployment. Utilizza una piattaforma come Cloud Build e collega i file di configurazione.

Passaggio 3: usa il cloud a tuo vantaggio per rilasciare

Ora, lascia che Cloud Run sia il metodo finale per gestirlo, tenendo presente se aiuta ed è corretto. Assicurati di fare riferimento agli strumenti e al codice principali e di farli funzionare senza problemi.

Come eseguire il deployment di un'app Next.js su Firebase

Firebase può anche essere un ottimo posto per il deployment, quindi ricorda questi semplici passaggi. Vuoi integrare Next.js su Firebase? Segui la documentazione completa.

Passaggio 1: preparalo per le impostazioni del server pubblico

Segui le configurazioni per ciò che richiede questa immagine o questo documento (SSL richiesto) in modo che tutto funzioni in sicurezza.

Passaggio 2: configurazione e installazione (CMD)

Spiega come vengono installati e come funzionano l'interfaccia a riga di comando e Firebase.

npm install -g firebase-tools

Passaggio 3: connetti e configura il progetto

Segui "Firebase Init - Hosting".

Assicurati che l'URL venga riscritto e che sia corretto nella riga di comando.

Da usare con "no"; in questo modo, quando tutto sarà implementato, non ci saranno problemi.

Risolvi le tue sfide aziendali con Google Cloud

I nuovi clienti ricevono 300 $ di crediti gratuiti da spendere su Google Cloud.

Best practice per i test

Ti servirà un test locale, che richiede un codice host locale.

Dopo aver autenticato la CLI, esegui il push in questo repository:

  • gcloud auth configure-docker

Ora carichi:

  • docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
  • Immagini container gcloud ed esegui il push in

Per l'elenco completo dei suggerimenti generali per lo sviluppo in Cloud Run, leggi questa documentazione.

Fai il prossimo passo

Inizia a creare su Google Cloud con 300 $ di crediti gratuiti e oltre 20 prodotti Always Free.

Google Cloud
DocumentiAssistenza
Console
Accedi
  • Accelera la tua trasformazione digitale
  • Sia che la tua azienda sia all'inizio o a buon punto del suo percorso verso la trasformazione digitale, Google Cloud può aiutarti a risolvere le sfide più difficili.
  • Prodotti Google Cloud
  • Scopri oltre 100 prodotti. I nuovi clienti ricevono 300 $ di crediti gratuiti per l'esecuzione, il test e il deployment dei workload. Tutti i clienti hanno a disposizione oltre 25 prodotti gratuitamente, entro i limiti di utilizzo mensili.
  • Risparmia con il nostro approccio trasparente ai prezzi
  • Il pagamento a consumo di Google Cloud offre risparmi automatici in base all'utilizzo mensile e alle tariffe scontate per risorse prepagate. Contattaci oggi per richiedere un preventivo.
Google Cloud