Building Static Portfolios with Next.js 16 and Firebase

Next.js has evolved significantly over the years, introducing the App Router, advanced compiler architectures (like Turbopack), and refined caching mechanisms. When building personal portfolio sites, one of the most powerful configurations is combining Next.js static HTML exports with Firebase Hosting.

In this post, we’ll look at how to set up, configure, and deploy this stack successfully.

Why Static Exports?

Static site generation (SSG) delivers pre-rendered HTML, CSS, and JS assets directly to users. This provides:

1. Unrivaled Load Times: Pages load instantly since no server-side compute is required.
2. Zero Maintenance: Static files are hosted on global CDNs, removing server orchestration tasks.
3. Cost Efficiency: Hosting static assets on Firebase Hosting fits well within the free tier.

Configuring next.config.ts

To enable static exports, configure the output field in your Next.js configuration:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  images: {
    unoptimized: true, // Required for static exports since Next.js image optimization relies on a Node server
  },
};

export default nextConfig;

This ensures that running next build generates an out/ folder containing your completely pre-rendered website.

Routing and SSG dynamic routes

For dynamic routes (like blog posts /blog/[slug]), you must export a function called generateStaticParams to tell Next.js which paths to pre-render during the build step:

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

By leveraging this, Next.js compiles every post into a standalone static HTML file, guaranteeing lightning-fast performance and seamless search engine crawling out-of-the-box.