FireNext

Firebase NodeJS Next.js npm Visual Studio Code

FireNext: Host Your Next.js App on Firebase

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!


🚀 Prerequisites

Before we begin, please ensure you have the following:


🛠️ Step 1: Install Node.js

  1. Visit the Node.js download page and grab the LTS version.
  2. Run the installer and follow the on-screen instructions.

  1. Ensure you enable the option to automatically install the required tools.

  1. After installation is complete, click Finish.

  1. A terminal window will appear, installing additional tools. Once finished, press any key to continue, and close the terminal window.

🔥 Step 2: Create a Firebase Project

  1. Head to the Firebase Console and create a new project.

  1. Name your project and disable Google Analytics.

  2. Click Create Project to finalize.


Step 3: Set Up Your Next.js App

  1. Create a new Next.js app:

   npx create-next-app@latest Your-App-Name
  1. Answer the prompts as follows:
    • TypeScript: Yes
    • ESLint: Yes
    • Tailwind CSS: Yes
    • ‘src/’ directory: No
    • App Router: Yes
    • Turbopack: No
    • Custom Import Alias: No

This will take some time…😴

🧰 Step 4: Install Firebase SDK

  1. Navigate to your project directory and install the Firebase SDK:

   npm install firebase
  1. Install Firebase CLI globally by running:
   npm install -g firebase-tools
  1. Test the Firebase installation:
   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 😎


📦 Step 5: Log Into the Firebase

  1. Login to Firebase with:
   firebase login

A browser window will appear where you need to allow Firebase CLI to access your Google account.


🔧 Step 6: Initialize Firebase in Your Project

  1. Run the initialization command:
   firebase init

  1. When prompted, select Hosting and configure for Firebase Hosting.

  2. Choose the Use an existing project you created earlier.

  1. Then select the existing project that you created earlier.

  1. Set public directory to out.
  2. Configure it as a single-page app by selecting Yes when asked to rewrite all URLs to /index.html.
  3. Choose No for GitHub Actions (optional).

📱 Step 7: Add Firebase Realtime Database to Your Project

  1. In the Firebase Console, navigate to Database > Realtime Database.

  1. Select the Singapore as the realtime database location.

  1. Click Create Database and choose Start in test mode and click enable.
  2. Create a web app in the firebase.

  1. In the project main menu click the Add app

  1. Fill the details according to your app & Check the Also setup the **Firebase Hosting for this app** and select the existing project and click Register app.

  1. Copy your Firebase Web App config from this window or form Project settings > General under Your apps.
  2. 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;
    

🌍 Step 8: Deploy with Firebase Realtime Database Support

  1. Build the file from Page.tsx file, after compiling the build you can deploy it locally or deploy to the firebase

🔰You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file. 🔰

  1. Test Locally:

Run your app locally using:

   npm run dev

Or:

   firebase serve

Ensure everything is working as expected with Firebase Realtime Database.

  1. Deploy to Firebase:

    Once you’re ready, deploy your app to Firebase:

   firebase deploy

🎉 Congratulations!

You’ve successfully set up and deployed your Next.js app on Firebase Hosting with Realtime Database support. Your app is now live and ready to be used! 🚀