DEV Community

Sh Raj
Sh Raj

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode
  1. Install necessary dependencies:
npm install firebase-functions next
Enter fullscreen mode Exit fullscreen mode

Step 6: Deploy to Firebase

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

firebase deploy
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)