How to Build a Full-Stack App with Next.js & Firebase [Step-by-Step]

Next.js + Firebase Full-Stack Development: From Zero to Production

In this guide, you’ll learn how to create a full-stack web application using Next.js and Firebase. We’ll cover project setup, authentication, database (Firestore), API routes, security rules, and deployment. By the end, you’ll have a production-ready app hosted on Vercel.

Step 1 — Create a Next.js Project

First, install Node.js (v18+). Then run the following command to create a Next.js project with TypeScript support:

npx create-next-app@latest my-fullstack-app --typescript
cd my-fullstack-app
git init

Step 2 — Install Firebase SDKs

We’ll need Firebase for both the client and server (admin) side:

npm install firebase firebase-admin react-firebase-hooks

The react-firebase-hooks library helps manage authentication and Firestore subscriptions easily.

Step 3 — Setup Firebase Project

Go to the Firebase Console and create a project. Enable the following:

• Authentication (Email/Password or Google OAuth)
• Firestore Database (in Native mode)
• Service Account Key for server-side (admin SDK)

Step 4 — Configure Environment Variables

Create a .env.local file in the root of your project and add your Firebase credentials:

NEXT_PUBLIC_FIREBASE_API_KEY=xxxx
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxxx.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-id
FIREBASE_ADMIN_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n....\n-----END PRIVATE KEY-----\n"
FIREBASE_ADMIN_CLIENT_EMAIL=xxxx@project.iam.gserviceaccount.com

Tip: When using the private key, replace \\n with actual line breaks in Node:

process.env.FIREBASE_ADMIN_PRIVATE_KEY?.replace(/\\n/g, '\n')

Step 5 — Firebase Client Setup

Inside lib/firebaseClient.ts, configure Firebase client SDK:

import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];

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

Step 6 — Authentication

We’ll build a simple login system using react-firebase-hooks. Example: pages/dashboard.tsx

import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../lib/firebaseClient";

export default function Dashboard() {
  const [user] = useAuthState(auth);
  return user ? <p>Welcome {user.email}</p> : <p>Please login.</p>;
}

Step 7 — Firestore Security Rules

Restrict access to ensure users can only read/write their own data:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /todos/{docId} {
      allow read, write: if request.auth.uid == resource.data.owner;
    }
  }
}

Step 8 — API Routes in Next.js

You can write server-side API routes with Firebase Admin SDK. Example: pages/api/createTodo.ts

import { getAuth } from "firebase-admin/auth";
import { db } from "../../lib/firebaseAdmin";

export default async function handler(req, res) {
  const token = req.headers.authorization?.split("Bearer ")[1];
  const decoded = await getAuth().verifyIdToken(token);

  await db.collection("todos").add({
    text: req.body.text,
    owner: decoded.uid,
    createdAt: Date.now(),
  });

  res.status(200).json({ ok: true });
}

Step 9 — Deploy to Vercel

1. Push your repo to GitHub 2. Import into Vercel 3. Add environment variables in project settings 4. Deploy 🚀

Step 10 — Monitor & Optimize

• Use Firebase Emulator locally for faster testing
• Enable monitoring tools like Sentry
• Set up backups for Firestore data

FAQ

Q: Can I use NextAuth instead of Firebase Auth?
A: Yes, but you’ll need to handle JWT tokens carefully so they match Firebase’s authentication model.

Q: Is this setup production-ready?
A: Yes, if you configure Firestore rules properly, protect your service account keys, and enable monitoring.

Q: Which Firebase plan should I use?
A: Start with the free Spark plan, but for production apps consider upgrading to Blaze for scalability and Cloud Functions.

Q: Can I deploy without Vercel?
A: Yes, you can use Firebase Hosting, Netlify, or AWS Amplify, but Vercel is the smoothest for Next.js.