Come Pubblicare un'App React o Next.js

Pubblicare un'App React o Next.js

Come Pubblicare un'App React o Next.js (Rewrite SPA Incluse) | We.Inc

Scegli tipo di app e hosting per ottenere il comando di build, la cartella di output e il file di rewrite che evita i 404 al refresh su Vercel, Netlify, Cloudflare e GitHub Pages.

Per pubblicare un'app React, esegui la build di produzione, poi affida la cartella di output a un hosting: dist per Vite, out per un export statico di Next.js. Le single page app richiedono anche una rewrite che invii i percorsi sconosciuti a index.html, altrimenti ricaricare un link profondo restituisce 404. Un'app Next.js completa richiede un hosting che esegua Node.js.

Output della build per tipo di app

La maggior parte dei deploy React falliti si riduce a tre cose: la cartella di output sbagliata, una rewrite mancante per le route lato client, oppure una funzione di Next.js che richiede un server inviata a un hosting statico. Scegli qui sotto il tipo di app e l'hosting per vedere l'impostazione e il file esatti per quella coppia, ognuno preso dalla documentazione ufficiale dell'hosting.

Domande frequenti

Perché la mia app React mostra 404 quando ricarico una pagina?

Il router vive nel browser, ma un refresh chiede al server un file come /about/index.html che non esiste. Una rewrite che restituisce index.html per i percorsi sconosciuti permette al router di riprendere il controllo. Ogni hosting ha la propria sintassi per questa regola.

Mi serve una rewrite su Cloudflare Pages?

No, se la tua build non ha un 404.html al primo livello. La documentazione di Cloudflare spiega che in quel caso Pages tratta il progetto come una single page app e serve l'index principale per qualsiasi percorso che non sia un file reale.

Posso pubblicare un'app Next.js su GitHub Pages?

Solo come export statico con output: 'export'. GitHub Pages serve file e non può eseguire il server di Next.js, quindi funzioni come server actions, cookie, rewrite e rendering on demand lì non sono disponibili.

Qual è la differenza tra un redirect e una rewrite?

Un redirect manda il browser a un nuovo URL, cambiando la barra degli indirizzi. Una rewrite serve un file diverso mantenendo l'URL richiesto, ed è ciò che serve a una single page app. Netlify indica una rewrite con lo status 200.

Dove vanno le variabili d'ambiente?

Impostale nelle impostazioni del progetto sull'hosting, non in un file .env incluso nel commit. Ricorda che le variabili inviate al browser sono pubbliche, quindi tieni le chiavi che devono restare private su un server o in funzioni serverless.

Primo passo: una build di produzione pulita

Secondo passo: un routing che sopravvive al refresh

Terzo passo: un dominio e una verifica

Regole di rewrite SPA per hosting

Dove va la regola catch-all (dalla documentazione di ogni hosting, ottobre 2026)

Rewrite Netlify in netlify.toml

La stessa regola del file _redirects di una riga. Lo status 200 mantiene l'indirizzo richiesto dal visitatore.

Workflow GitHub Actions per un sito Vite

Adattato dal workflow della guida al deploy di Vite (che fissa ogni action a un commit). Esegue la build a ogni push su main e pubblica dist. Attiva GitHub Actions come sorgente in Settings, poi Pages.

Importa il repository; Vercel riconosce Vite. Aggiungi questo file alla radice del progetto così i link profondi caricano l'app.

Comando di build npm run build, cartella di pubblicazione dist. Salva questa riga come public/_redirects così Vite la copia in dist.

Collega il repository e scegli il preset Vite. Non serve alcuna regola finché dist non ha un 404.html al primo livello, perché in quel caso Pages serve l'index principale per i percorsi sconosciuti.

Imposta base sul nome del repository, esegui la build con GitHub Actions e pubblica dist. GitHub Pages supporta un 404.html personalizzato ma non le regole di rewrite, quindi una soluzione comune è copiare index.html in 404.html dopo la build; quei link profondi si caricano poi con status 404.

Vercel esegue direttamente la build di Next.js, quindi qui l'export statico è facoltativo. Tienilo solo se vuoi gli stessi file ovunque.

Imposta la cartella di pubblicazione su out. Ogni route ha già il proprio file HTML, quindi non serve una rewrite catch-all.

Usa npm run build con cartella di output out. L'export include un 404.html, quindi Pages lo serve per i percorsi mancanti invece della home page.

L'export statico è l'unico modo per far girare Next.js qui. Se il sito si trova sotto il percorso di un repository, imposta basePath in modo che corrisponda.

Importa il repository e pubblica. Vercel è uno degli adapter verificati elencati nella documentazione sul deploy di Next.js.

Netlify esegue Next.js tramite una propria integrazione, che la documentazione di Next.js non elenca ancora come adapter verificato. Controlla la sua documentazione per eventuali funzioni mancanti.

Cloudflare esegue Next.js su Workers tramite una propria integrazione, anch'essa non ancora un adapter verificato. Segui la sua guida per il framework invece del flusso statico di Pages.

Non è possibile. GitHub Pages serve solo file e non può eseguire next start. Passa a un export statico o scegli un hosting che esegua Node.js.

Vite + React

Export statico di Next.js

App Next.js completa

Vercel

Netlify

Cloudflare Pages

GitHub Pages

Selettore della ricetta di deploy

Cosa hai creato?

Dove verrà eseguita?

Tutte le coppie di app e hosting

Copia

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito