How to Deploy Next.js to Firebase Hosting Easily

To deploy a Next.js app to Firebase Hosting, first build your app using next build and export it as static files with next export. Then, initialize Firebase in your project, configure firebase.json to serve the exported files, and deploy using firebase deploy.

Syntax

Deploying Next.js to Firebase involves these main commands and files:

• next build: Builds the Next.js app for production.
• next export: Exports the app as static HTML files.
• firebase init: Sets up Firebase Hosting in your project.
• firebase.json: Config file to tell Firebase where your files are.
• firebase deploy: Uploads your app to Firebase Hosting.

bash

next build
next export
firebase init
firebase deploy

Example

This example shows how to deploy a simple Next.js app as static files to Firebase Hosting.

First, build and export your app:

bash

npm run build
npm run export

Output

info  - Using webpack 5.\ninfo  - Exporting static HTML\nExport successful. Files written to out/

Example

Next, initialize Firebase Hosting and configure it to serve the out folder:

bash

firebase init hosting

Output

=== Hosting Setup ===\n? What do you want to use as your public directory? out\n? Configure as a single-page app (rewrite all urls to /index.html)? No\n? Set up automatic builds and deploys with GitHub? No\nFirebase initialization complete!

Example

Make sure your firebase.json looks like this to serve the static files:

json

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

Example

Finally, deploy your app to Firebase Hosting:

bash

firebase deploy

Output

=== Deploying to 'your-project-id'...\n\n✔  Deploy complete!\nProject Console: https://console.firebase.google.com/project/your-project-id/overview\nHosting URL: https://your-project-id.web.app

Common Pitfalls

• Not exporting static files: Next.js apps must be exported with next export to work with Firebase Hosting static setup.
• Wrong public directory: Firebase must serve the folder where static files are exported, usually out.
• Single-page app setting: For static Next.js, do not enable SPA rewrite in Firebase, or routing breaks.
• Dynamic features: Firebase Hosting static deploy does not support Next.js server-side rendering or API routes.

json

/* Wrong firebase.json example */
{
  "hosting": {
    "public": "public",
    "rewrites": [{ "source": "**", "destination": "/index.html" }]
  }
}

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

Quick Reference

• Run npm run build and npm run export to prepare static files.
• Use firebase init hosting and set public directory to out.
• Deploy with firebase deploy.
• Firebase Hosting serves static files; no server-side Next.js features.

Key Takeaways

Always export your Next.js app as static files using next export before deploying to Firebase Hosting.

Set the Firebase public directory to the folder where static files are exported, usually 'out'.

Firebase Hosting only serves static files; server-side Next.js features won't work here.

Avoid enabling single-page app rewrites in Firebase for Next.js static sites.

Use firebase deploy to upload your static Next.js app to Firebase Hosting.