How to Integrate Firebase with Next.js (Step by Step)

Integrating Firebase with Next.js: Step by Step

We’re building an application that combines the power of Firebase with the flexibility of Next.js, making our web app dynamic and responsive. Firebase Next.js integration is crucial for developers looking to streamline backend services like authentication, Firestore, and hosting.

Prerequisites

• Node.js v16+ (LTS recommended)
• Next.js v14+
• Firebase CLI installed globally: npm install -g firebase-tools
• A Firebase project set up in the Firebase Console
• Basic knowledge of React and JavaScript

Step 1: Setting Up Your Next.js Project

First, you need to create a new Next.js application. This is the foundation for your Firebase Next.js integration.

npx create-next-app my-firebase-app

Run this command in your terminal. It creates a new directory called my-firebase-app with all the necessary files. If you run into issues, make sure you have Node.js correctly set up.

Step 2: Installing Firebase SDK

Next, you have to install Firebase SDK to enable the Firebase functionalities in your Next.js app.

cd my-firebase-app
npm install firebase

If you see an error about not being able to find the package, ensure you’re in the right directory and that your Node.js version is compatible.

Step 3: Configuring Firebase

Now, you need to add Firebase configuration to your project. Go to your Firebase Console, select your project, and navigate to your project settings. Here’s how to do it:

1. Click on the gear icon next to “Project Overview.”
2. Select “Project settings.”
3. Scroll down to “Your apps” and select “Add app.”
4. Choose Web and copy the Firebase configuration object.

It looks something like this:

const firebaseConfig = {
 apiKey: "YOUR_API_KEY",
 authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
 projectId: "YOUR_PROJECT_ID",
 storageBucket: "YOUR_PROJECT_ID.appspot.com",
 messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
 appId: "YOUR_APP_ID"
};

Step 4: Initializing Firebase in Your App

Create a new file called firebase.js in the lib directory of your Next.js project. This file will handle Firebase initialization.

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
 apiKey: "YOUR_API_KEY",
 authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
 projectId: "YOUR_PROJECT_ID",
 storageBucket: "YOUR_PROJECT_ID.appspot.com",
 messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
 appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

export default app;

When you mess up the configuration (which I’ve done plenty of times), you usually get a “Firebase: No Firebase App ‘[DEFAULT]’ has been created” error. Double-check your apiKey and other properties.

Step 5: Adding Firebase Authentication

Firebase Authentication is vital for managing users in our app. Let’s set up email/password authentication.

import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';
import app from './firebase';

const auth = getAuth(app);

const signUp = (email, password) => {
 createUserWithEmailAndPassword(auth, email, password)
 .then((userCredential) => {
 // Signed up successfully
 const user = userCredential.user;
 console.log('User signed up:', user);
 })
 .catch((error) => {
 const errorCode = error.code;
 const errorMessage = error.message;
 console.error('Error signing up:', errorCode, errorMessage);
 });
};

If you skip proper error handling, you might end up with cryptic errors in your console. Always log them to understand what goes wrong.

Step 6: Using Firestore

Firestore is where you’ll store your app’s data. First, we need to enable Firestore in the Firebase Console under the Database tab.

import { getFirestore, collection, addDoc } from 'firebase/firestore';

const db = getFirestore(app);

const addData = async (data) => {
 try {
 const docRef = await addDoc(collection(db, 'users'), data);
 console.log('Document written with ID:', docRef.id);
 } catch (error) {
 console.error('Error adding document:', error);
 }
};

Don’t forget to grant the correct read/write permissions in Firestore rules, otherwise you’ll be blocked with a “permission denied” error.

Step 7: Deploying with Firebase Hosting

Once your app is ready, you can deploy it using Firebase Hosting. First, initialize Firebase in your project.

firebase init hosting

Follow the prompts, and when they ask for the public directory, set it to out (the default for Next.js builds). Then, build your Next.js project.

npm run build
npm run export

Now deploy your app.

firebase deploy

Ah, the thrill of seeing your app live. If you encounter a 404 error after deployment, check that the build output is correctly configured and that you’ve set Firebase to serve the right files.

The Gotchas

• Environment Variables: Forgetting to set your Firebase config as environment variables can lead to security issues. Make sure your API keys aren’t hard-coded.
• Firestore Rules: If you don’t configure Firestore rules correctly, users may have no access to data, leading to frustrating experiences.
• Rate Limits: Firebase has quota limits on certain operations. If you exceed these, your app could face downtime.
• Real-time Updates: If you’re expecting real-time updates from Firestore, ensure that you subscribe to changes properly, or you’ll miss key data.
• Deployment Errors: Firebase Hosting can throw errors if your build directory is not set correctly. Always check your hosting setup.

Full Code

Here’s a complete working example of integrating Firebase with Next.js:

import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';
import { getFirestore, collection, addDoc } from 'firebase/firestore';
import app from './lib/firebase';

const auth = getAuth(app);
const db = getFirestore(app);

const signUp = (email, password) => {
 createUserWithEmailAndPassword(auth, email, password)
 .then((userCredential) => {
 const user = userCredential.user;
 console.log('User signed up:', user);
 })
 .catch((error) => {
 console.error('Error signing up:', error);
 });
};

const addData = async (data) => {
 try {
 const docRef = await addDoc(collection(db, 'users'), data);
 console.log('Document written with ID:', docRef.id);
 } catch (error) {
 console.error('Error adding document:', error);
 }
};

What’s Next?

Consider implementing additional Firebase services like Cloud Functions or Firebase Storage to enhance your application’s capabilities. Firebase Next.js integration opens up a lot of opportunities for full-fledged applications.

FAQ

Can I use Firebase with a static site built in Next.js?

Yes, but you’ll need to use Firebase’s Realtime Database or Firestore to handle dynamic data, and you’ll have to set up serverless functions for custom back-end logic.

Is Firebase free to use?

Firebase offers a free tier, but be cautious about its limits. If your app grows, you may need to switch to a paid plan.

What authentication methods does Firebase support?

Firebase supports a variety of authentication methods, including email/password, phone authentication, Google, Facebook, and more.

Data Sources

• Firebase Web Setup
• Firebase Authentication Documentation
• Firestore Quickstart
• Firebase Hosting Documentation

Last updated May 16, 2026. Data sourced from official docs and community benchmarks.

🕒 Published: May 15, 2026