Deploying a Next.js App on Firebase: A Step-by-Step Guide for 2026

Once you've built your amazing Next.js application, the next step is to deploy it to the world. Firebase Hosting is an excellent choice for deploying Next.js apps, offering a global CDN, easy setup, and seamless integration with other Firebase services. This guide will walk you through the process step-by-step.

Prerequisites

• A Next.js project ready for deployment.
• A Firebase account. If you don't have one, you can create one for free on the Firebase website.
• Node.js and npm installed on your machine.

Step 1: Install Firebase CLI

First, you need to install the Firebase Command Line Interface (CLI) globally on your machine. Open your terminal and run:

npm install -g firebase-tools

Step 2: Login to Firebase

After installing the CLI, you need to log in to your Firebase account:

firebase login

This will open a browser window for you to authenticate with your Google account.

Step 3: Initialize Firebase in Your Project

Navigate to your Next.js project's root directory in the terminal and run:

firebase init hosting

The CLI will ask you a series of questions:

• Please select an option: Choose "Use an existing project" and select the Firebase project you want to use.
• What do you want to use as your public directory? Enter out. Next.js builds the production app into the out directory.
• Configure as a single-page app (rewrite all urls to /index.html)? Enter Yes. This is important for single-page applications like Next.js.
• Set up automatic builds and deploys with GitHub? Choose No for now. You can set this up later.

This will create two files in your project: .firebaserc and firebase.json.

Step 4: Configure next.config.js

For the deployment to work correctly, you need to add the following configuration to your next.config.js file:

module.exports = {
  output: 'export',
}
        

Step 5: Build and Deploy

First, build your Next.js app for production:

npm run build

Then, deploy your app to Firebase Hosting:

firebase deploy

After the deployment is complete, the CLI will give you a URL where you can view your live application. That's it! Your Next.js app is now live on Firebase.

Frequently Asked Questions (FAQ)

Can I use a custom domain with Firebase Hosting?

Yes, you can use a custom domain with Firebase Hosting. You can connect your own domain name to your Firebase project from the Firebase console.

How much does Firebase Hosting cost?

Firebase Hosting has a generous free tier, which is more than enough for most small to medium-sized projects. If you need more resources, you can upgrade to a paid plan. You can find more information on the Firebase pricing page.

Can I deploy a Next.js app with server-side rendering (SSR) to Firebase?

Yes, you can deploy a Next.js app with SSR to Firebase, but it requires a more complex setup involving Cloud Functions for Firebase. This guide focuses on deploying a static Next.js app, which is simpler and more cost-effective for many use cases.