Deterministic Static Next.js with App Router and Firebase Hosting

While Next.js is frequently associated with dynamic Node.js server runtimes, server-side rendering (SSR), and streaming servers, many high-value production websites and client portals thrive on static exports. Pre-rendering every route at build time yields predictable costs, instantaneous CDN edge delivery, and removes the operational overhead of managing containerized Node processes.

By configuring Next.js App Router for static export (`output: 'export'`) combined with Firebase Hosting's global CDN and security rules, you achieve maximum reliability and top Core Web Vitals scores.

Configuring the Static Export Pipeline

In `next.config.mjs`, setting `output: 'export'` instructs the Next.js compiler to generate HTML, CSS, JavaScript, and asset bundles directly into the `out/` directory. Enabling `trailingSlash: true` ensures that every generated route produces a directory containing an `index.html` file, matching Firebase Hosting's clean URL routing conventions.

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

export default nextConfig;

Production Security Headers on Firebase Hosting

Because static sites do not run server-side Express or Node middleware to attach HTTP response headers, these must be configured declaratively within `firebase.json`. This provides defence-in-depth against clickjacking, MIME-type sniffing, and cross-site scripting.

{
  "hosting": {
    "public": "out",
    "cleanUrls": true,
    "trailingSlash": true,
    "headers": [
      {
        "source": "**",
        "headers": [
          { "key": "X-Content-Type-Options", "value": "nosniff" },
          { "key": "X-Frame-Options", "value": "DENY" },
          { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
          { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" },
          { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains; preload" }
        ]
      },
      {
        "source": "/_next/static/**",
        "headers": [
          { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
        ]
      }
    ]
  }
}

Handling Dynamic Needs via Cloud Functions

When a static website needs to process dynamic operations—such as payment webhooks, contact form dispatch, or scheduling notifications—you can route specific endpoints to isolated Firebase Cloud Functions without forfeiting the benefits of static asset delivery.

This static Next.js export pipeline deployed to Firebase Hosting powers both this website and the production web architecture for the Divinari Platform. By removing Node.js server dependencies, teams achieve instant global page loads with virtually zero cloud infrastructure overhead. To explore modernizing your application stack or migrating to static edge hosting, explore my Full-Stack Engineering Services.