This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
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!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
This project is pre-configured with Firebase for both client SDK and Admin SDK.
Dependencies are already added to package.json. If not installed yet:
npm i firebase firebase-adminCopy the example and fill in values from the Firebase Console:
cp .env.local.example .env.localFill the NEXT_PUBLIC_FIREBASE_* values from Project Settings → Your Apps → Web App Config.
For server-side Admin access, either:
- Set
FIREBASE_PROJECT_ID,FIREBASE_CLIENT_EMAIL, andFIREBASE_PRIVATE_KEY(with literal \n newlines), or - Put the full service account JSON into
FIREBASE_SERVICE_ACCOUNT_KEY.
Files created for you:
lib/firebase/client.ts– Client SDK (Auth, Firestore, Storage)lib/firebase/admin.ts– Admin SDK initialization for server-only codeapp/api/firebase/route.ts– Test endpoint to verify Admin Firestore connectivity
Start the dev server:
npm run devOpen http://localhost:3000/api/firebase – you should see { ok: true, ... } if your Admin credentials are correct. If you see an error, ensure your .env.local is configured properly.
On Vercel (or your host):
- Add the same environment variables from
.env.localto your project settings. - No special bundling config is required; the
app/api/firebase/route.tsforces Node.js runtime for Admin SDK. - Ensure the service account has adequate IAM roles (e.g., Firestore User, Firebase Auth Admin if needed).
Client components:
import { db, auth, storage } from '@/lib/firebase/client';
// Use Firestore: add/get docs, etc.Server routes or server actions:
import { adminDb, adminAuth } from '@/lib/firebase/admin';
// Use Admin Firestore/Auth for privileged operations.Security tip: Never expose Admin SDK or service account credentials to the client. Only use lib/firebase/admin.ts in server code.