Hosting per l'export statico di Next.js

Next.js può costruire un sito che non ha bisogno di un server: imposta output: "export" e next build scrive ogni pagina come HTML in out/. Lobsite ospita quella cartella. Esegui npm run build, poi npx lobsite, e il sito è online a un indirizzo *.lobsite.app con HTTPS. Per chiarezza fin da subito: questa pagina parla di export statici. Rendering lato server, route API e middleware richiedono un hosting Node.js come Vercel.

Come funziona

1. Attiva l'export statico in next.config.js con output: "export" (vedi sotto), poi esegui npm run build. Il sito finisce in out/.
2. Esegui npx lobsite nel progetto. Pubblica out/, non public/ né .next/. Il primo deploy non richiede account e dura 6 ore.
3. Tienilo con il link per rivendicarlo, in un account gratuito. Da lì ogni npm run build && npx lobsite aggiorna lo stesso indirizzo.

next.config.js per un export statico

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

module.exports = nextConfig;

• output: "export" fa scrivere out/ a next build. Il vecchio comando next export non esiste più da Next.js 14; questa impostazione l'ha sostituito.
• images: { unoptimized: true } serve se usi next/image: il loader predefinito ridimensiona le immagini su un server a ogni richiesta. Con questa impostazione le immagini vengono servite così come sono; ridimensionale prima della build o usa un loader personalizzato.
• trailingSlash può restare disattivato. Le pagine vengono scritte come about.html e Lobsite le serve su /about.

Cosa non può fare un export statico

La documentazione di Next.js elenca le funzioni che richiedono un server. Quelle in cui ci si imbatte più spesso:

• Route API e Route Handler diversi dai GET statici. Invia invece i moduli a /_lobsite/forms/contact; vedi moduli.
• redirects, rewrites e headers in next.config. Sposta reindirizzamenti e header in lobsite.toml, dove valgono per ogni richiesta; il Generatore di reindirizzamenti scrive le regole.
• Middleware, Server Actions, ISR e cookies() o headers() nelle pagine.
• Route dinamiche senza generateStaticParams: ogni pagina deve essere nota al momento della build.

Se la tua app ne dipende, non è un sito statico, e un hosting che esegue Next.js su un server è la scelta giusta.

Hosting per Next.js a confronto

Vercel crea Next.js e ne esegue tutto. Per un sito aziendale, un blog o una documentazione costruiti come export statico, Lobsite è l'hosting più semplice: un comando, si caricano solo i file modificati, un URL di anteprima per ogni deploy.

Domande frequenti

Posso ospitare qui un'app Next.js con rendering lato server?

No. Lobsite serve file, quindi funziona solo un export statico. Se le pagine usano getServerSideProps, Server Actions o rendering dinamico, ospitala dove Next.js gira su un server.

Perché le immagini next/image non funzionano dopo l'export?

Il loader di immagini predefinito ha bisogno di un server. Aggiungi images: { unoptimized: true } a next.config.js, o imposta un loader personalizzato che punti a un CDN di immagini, e rifai la build.

La mia pagina 404 di Next.js funziona?

Sì. next build scrive 404.html dalla tua pagina not-found (App Router) o da pages/404 (Pages Router), e Lobsite la serve per qualsiasi indirizzo inesistente.

Posso usare l'App Router con un export statico?

Sì. I Server Components vengono renderizzati in fase di build; i componenti client girano nel browser come sempre. Sono escluse solo le funzioni che richiedono una richiesta a runtime.