Next.js + Firebase Setup

Full Starter Code for Next.js and Firebase 👤 next-firebase-auth + 🗃 Firestore + 🔔 Messaging.

Demo: next-firebase-starter.vercel.app

What's Provided?

• Firebase Authentication Setup
• Private and Login Pages
• Automatically set new users in users collection
• Firebase Client and Admin SDK Init
• Clean Project Structure (Functions, references for Firestore)
• SSR / SSG via Firestore Data
• Enable Firebase Cloud Messaging
• FCM Service Worker Setup
• Tailwind CSS
• Module path aliases

✅ Getting Started

Install dependencies npm install

• 🏡 Environment Vaiables

  Refer .env.local.example and rename after adding your own variables.

• 🔓 Private and Login Pages

  Refer pages/dashboard.js for private page (Authentication Required). And pages/login.js for login page.

• 🔑 Setting Custom Auth Providers

  Refer components/elements/firebaseAuth.js file to add more Providers.

• 📄 Adding users into firestore collection

  Refer - components/elements/firebaseAuth.js callbacks

• 💻 SSR / SSG using Firestore Data

  Use Admin SDK's Firestore Functions: utils/firebase/firestore/fsAdminFunctions.js for server operations.

  Note: Do not use these for Client Side.

• 🚚 Module Path Aliases

  Refer jsconfig.json

• 👩‍🏭 Firebase Cloud Messaging service worker

  Refer firebase-messaging-sw.js

Additional Docs

• next-firebase-auth library documentation (Great Library ♥)
• Firebase Official Documentation

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!