This comprehensive guide will walk you through the process of setting up and hosting a Next.js application on Firebase. In just a few steps, you’ll have your app live and running!
Before we begin, please ensure you have the following:
Name your project and disable Google Analytics.
Click Create Project to finalize.
npx create-next-app@latest Your-App-Name
npm install firebase
npm install -g firebase-tools
firebase --version
As you can see in the error message, there’s an error message related to the firebase.ps1 file on the C: \Users\username\AppData\Roaming\npm path.
Go to that path and delete the firebase.ps1file.
Test the Firebase installation again:
firebase --version
Now it’s solved 😎
firebase login
A browser window will appear where you need to allow Firebase CLI to access your Google account.
firebase init
When prompted, select Hosting and configure for Firebase Hosting.
Choose the Use an existing project you created earlier.
out
./index.html
.In your Next.js app, create a new file firebase.js
in the app/
folder and add:
import firebase from 'firebase/app';
import 'firebase/database'; // Import Realtime Database service
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app();
}
export default firebase;
🔰You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file. 🔰
Run your app locally using:
npm run dev
Or:
firebase serve
Ensure everything is working as expected with Firebase Realtime Database.
Deploy to Firebase:
Once you’re ready, deploy your app to Firebase:
firebase deploy