Deploy NextJS App on Firebase 🔥

Deploying a Next.js app on Firebase Hosting involves a few steps. Here's a basic guide to get you started:

Step 1: Install Firebase Tools

Make sure you have Node.js and npm installed, then install Firebase Tools globally if you haven't already:

npm install -g firebase-tools

Step 2: Initialize Firebase

If you haven't already set up Firebase for your project, initialize Firebase in your project directory:

firebase login # This will open a browser window for authentication
firebase init

Select Firebase features you want to use. Make sure to select Hosting and follow the prompts to set up your Firebase project.

Step 3: Build Your Next.js App

Before deploying, build your Next.js app for production:

npm run build

Step 4: Configure Firebase for Next.js

Create a firebase.json file in the root of your project (if it doesn't exist) or modify it to include:

{
  "hosting": {
    "public": "out",
    "rewrites": [
      {
        "source": "**",
        "function": "nextApp"
      }
    ]
  },
  "functions": {
    "source": "functions"
  }
}

Step 5: Set up Firebase Functions (if needed)

If you are using API routes or server-side rendering with Next.js, you'll need to set up Firebase Functions.

1. Create a functions folder in your project root.
2. Create an index.js file inside functions with something like this:

const functions = require('firebase-functions');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, conf: { publicRuntimeConfig: { foo: 'bar' } } });
const handle = app.getRequestHandler();

exports.nextApp = functions.https.onRequest((req, res) => {
  return app.prepare().then(() => handle(req, res));
});

1. Install necessary dependencies:

npm install firebase-functions next

Step 6: Deploy to Firebase

Now, you're ready to deploy your app to Firebase Hosting:

firebase deploy

Additional Notes

• If you have environment variables, you can use Firebase environment configuration or a .env file with dotenv to manage them.
• Make sure your Next.js app is set up properly for Firebase, especially if you're using client-side routing or APIs.
• Always check the Firebase Hosting URL to see if your app deployed successfully.

This should get your Next.js app up and running on Firebase Hosting!