Next.js Firebase Starter

A production-ready starter template for building full-stack web applications with Next.js 15, React 19, and Firebase. This template ships with email/password authentication, Firestore data helpers, a route-protected admin page, and a global auth context so you can skip the boilerplate and start building.

Tech Stack

| Layer | Technology | | -------------- | ---------------------------------------------------------------- | | Framework | Next.js 15 (App Router) | | UI Library | React 19 | | Styling | Tailwind CSS | | Language | TypeScript | | Backend / Auth | Firebase (Auth + Firestore) | | Linting | ESLint + Prettier |

Features

• Email / Password Authentication - sign-up, sign-in, and sign-out flows backed by Firebase Auth
• Global Auth Context - a React context provider (AuthContextProvider) wraps the app and exposes the current user via useAuthContext()
• Protected Routes - the /admin route redirects unauthenticated users to the home page
• Firestore Helpers - typed addData and getData utilities for reading and writing documents
• App Router - built on the Next.js App Router with server components, layouts, and file-based routing
• Inter Font - automatically loaded and optimized via next/font/google

Prerequisites

• Node.js 18 or higher
• npm (bundled with Node.js)
• A Firebase project

Getting Started

1. Use the template

Click Use this template on GitHub to create your own repository, then clone it:

git clone https://github.com/<your-username>/<your-repo>.git
cd <your-repo>
npm install

2. Configure environment variables

Create a .env.local file in the project root:

cp .env.local.example .env.local   # if the example file exists, otherwise create it

Add your Firebase project credentials (see Set Up Firebase below):

NEXTPUBLICFIREBASEAPIKEY=yourapikey
NEXTPUBLICFIREBASEAUTHDOMAIN=yourauthdomain
NEXTPUBLICFIREBASEPROJECTID=yourprojectid
NEXTPUBLICFIREBASESTORAGEBUCKET=yourstoragebucket
NEXTPUBLICFIREBASEMESSAGINGSENDERID=yourmessagingsenderid
NEXTPUBLICFIREBASEAPPID=yourappid

Important: .env.local is already listed in .gitignore. Never commit real credentials to version control.

3. Run the development server

npm run dev

Open http://localhost:3000 in your browser. The page hot-reloads as you edit files under src/.

Set Up Firebase

• Go to https://console.firebase.google.com/ and sign in with your Google account.
• Click Add project, give it a name, and click Create project.
• On the project overview page, click the web icon (</>) to register a web app.
• Give the app a nickname and click Register app. Firebase will display your config object. Copy the values into .env.local.
• In the left sidebar, go to Build > Authentication > Sign-in method and enable Email/Password.
• (Optional) Go to Build > Firestore Database and create a database to use the Firestore helpers.

Project Structure

src/
├── app/                        # Next.js App Router pages and layouts
│   ├── admin/
│   │   └── page.tsx            # Protected page, redirects unauthenticated users
│   ├── signin/
│   │   └── page.tsx            # Sign-in page
│   ├── signup/
│   │   └── page.tsx            # Sign-up page
│   ├── globals.css             # Global styles (Tailwind base imports)
│   ├── layout.tsx              # Root layout, wraps app in AuthContextProvider
│   └── page.tsx                # Home page
│
├── context/
│   └── AuthContext.tsx         # Auth context provider and useAuthContext hook
│
└── firebase/
    ├── config.ts               # Firebase app initialization (singleton)
    ├── auth/
    │   ├── signIn.ts           # signInWithEmailAndPassword wrapper
    │   └── signup.ts           # createUserWithEmailAndPassword wrapper
    └── firestore/
        ├── addData.ts          # setDoc helper with merge support
        └── getData.js          # getDoc helper

Authentication

Authentication is handled through Firebase Auth and surfaced app-wide via a React context.

src/context/AuthContext.tsx subscribes to onAuthStateChanged and exposes { user } to any component that calls useAuthContext(). The root layout wraps the entire app in this provider, so auth state is always available client-side.

src/firebase/auth/ contains two thin async wrappers:

• signIn(email, password) - calls signInWithEmailAndPassword and returns { result, error }
• signup(email, password) - calls createUserWithEmailAndPassword and returns { result, error }

Protected routes - src/app/admin/page.tsx demonstrates the pattern: read user from useAuthContext() inside a useEffect, then call router.push("/") if the user is null.

Firestore Helpers

Two utility functions live in src/firebase/firestore/:

| Function | Description | | ------------------------------- | -------------------------------------------------------------------------------------- | | addData(collection, id, data) | Writes (or merges) a document at collection/id using setDoc with { merge: true } | | getData(collection, id) | Reads a single document from collection/id using getDoc |

Both return { result, error } for consistent error handling.

Available Scripts

| Command | Description | | ----------------- | ---------------------------------------------------------------- | | npm run dev | Start the development server at http://localhost:3000 | | npm run build | Build the application for production | | npm run start | Start the production server (requires build first) | | npm run lint | Run ESLint across the project | | npm run release | Bump the version and generate a changelog via standard-version |

Deployment

Vercel (recommended)

• Push your repository to GitHub.
• Import the project at vercel.com/new.
• Add all NEXTPUBLICFIREBASE_* environment variables in the Vercel project settings.
• Deploy. Vercel handles builds and previews automatically on every push.

Other platforms

Set the same NEXTPUBLICFIREBASE_* environment variables in your host's dashboard and run:

npm run build
npm run start

See the Next.js deployment documentation for platform-specific guidance.

Contributing

Contributions are welcome. Please read CONTRIBUTING.md before opening a pull request. Bug reports and feature requests can be filed via GitHub Issues.

Security

Please review SECURITY.md for the project's vulnerability disclosure policy.

License

This project is licensed under the MIT License. See LICENSE for details.

Resources

• Next.js Documentation
• Firebase Documentation
• Tailwind CSS Documentation
• TypeScript Documentation