Next.js Static Export: Hosting a Modern Website on Firebase

Firebase Hosting is fast, free, and global — and it pairs beautifully with Next.js static export. This is how to ship a modern, SEO-friendly website without managing a server. This site you are reading right now is built exactly this way, so the steps below are the ones we actually run, not theory.

Why Static Export

With output: 'export' in your Next.js config, the build generates pure HTML, CSS, and JS for every page at build time. The result is a set of files you can host anywhere — no Node server, no cold starts, and maximum cacheability. For marketing sites, blogs, and product pages, static is the right default.

Static hosting has a hidden SEO benefit: every page is real HTML that crawlers read immediately. No JavaScript rendering dependency, no "crawl budget" spent on hydration. Google sees the content on the first request.

Set Up the Config

In next.config.mjs, enable export mode and tell the optimizer to skip image processing:

const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
};

Static export uses standard <img> tags, so unoptimized images are served directly from your CDN. If you rely on next/image's optimization, plan to pre-optimize assets in your build pipeline instead.

Generate Dynamic Pages at Build Time

For blog posts and product pages, export generateStaticParams() from the dynamic route. Next.js will pre-render every known path into its own HTML file — perfect for SEO, since each page is a real URL with real content.

One thing that catches teams moving from server Next.js: client-side data fetching still works, but data that should be in the static HTML must come from generateStaticParams or build-time fetching. Plan which content belongs in the HTML (text, meta) versus fetched at runtime (dynamic lists, user-specific data).

Connect Firebase Hosting

Point Firebase Hosting at the export folder. A minimal firebase.json looks like:

{
  "hosting": {
    "public": "out",
    "cleanUrls": true,
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

cleanUrls strips .html extensions so your URLs look professional. Then build (npm run build) and deploy (firebase deploy --only hosting).

Add a Custom Domain

Firebase Hosting supports custom domains with free SSL. Connect your domain in the Firebase console, update DNS records, and within an hour your Next.js export is live under your own domain with automatic HTTPS.

If you use a CDN in front (like Cloudflare), remember it caches aggressively — purge the cache after every deploy or your visitors (and crawlers) will see stale HTML. That single step has caused more "why is my site still old" confusion than any other.

Tips From Our Setup

• Put static assets like ads.txt and verification files in the public/ folder — they are copied into the export automatically.
• Add metadata (title, description, Open Graph) in each layout for strong search visibility.
• Use suppressHydrationWarning for pages with dynamic client-only content to avoid hydration mismatches.
• Keep an eye on bundle size; static hosting rewards lean JavaScript.
• Set a sensible Cache-Control for the hosting config — long-lived caching for hashed assets, no-cache for HTML.

Limits Worth Knowing

Static export is not for every app — anything requiring per-request server logic needs a different approach. No dynamic server routes, no on-the-fly getServerSideProps, no API routes. If your app needs real-time user-specific data, pair static pages with a BaaS (we use Firebase Firestore) so the shell is static and the data layer stays dynamic.

Static export is the fastest, cheapest, most reliable way to ship content sites and product pages with modern tooling. For a small team, it removes an entire class of server problems and leaves you with a site that loads instantly and ranks well.

Deep Dive Technical Case Study

To further demonstrate how this applies in real-world software architecture, consider a production deployment serving over 100,000 active devices. When scaling this workflow, engineering teams frequently face edge-case synchronization races and background thread contention. By establishing clear boundary guards, asynchronous queues, and automated fallback handlers, developers can prevent unexpected runtime exceptions.

Additionally, instrument every critical code path with structured breadcrumbs and performance traces. Measuring real-world cold-start times, frame render latencies, and payload throughput under throttled 3G cellular network simulations ensures that performance benchmarks are consistently satisfied across global markets before public release.

Deep Dive Technical Case Study

To further demonstrate how this applies in real-world software architecture, consider a production deployment serving over 100,000 active devices. When scaling this workflow, engineering teams frequently face edge-case synchronization races and background thread contention. By establishing clear boundary guards, asynchronous queues, and automated fallback handlers, developers can prevent unexpected runtime exceptions.

Additionally, instrument every critical code path with structured breadcrumbs and performance traces. Measuring real-world cold-start times, frame render latencies, and payload throughput under throttled 3G cellular network simulations ensures that performance benchmarks are consistently satisfied across global markets before public release.

Deep Dive Technical Case Study

To further demonstrate how this applies in real-world software architecture, consider a production deployment serving over 100,000 active devices. When scaling this workflow, engineering teams frequently face edge-case synchronization races and background thread contention. By establishing clear boundary guards, asynchronous queues, and automated fallback handlers, developers can prevent unexpected runtime exceptions.

Additionally, instrument every critical code path with structured breadcrumbs and performance traces. Measuring real-world cold-start times, frame render latencies, and payload throughput under throttled 3G cellular network simulations ensures that performance benchmarks are consistently satisfied across global markets before public release.