Deployment Issue – "Could not find a production build in the '.next' directory"

[Buenaventura-Celine]

[REQUIRED] Environment info

firebase-tools: 12.5.0

Platform: MacOS
Next JS: 14.2.24

[REQUIRED] Test case

Hello,

I am deploying my Next.js app using Firebase. My project consists of a Next.js frontend with Firebase as the backend, which is why I chose Firebase for deployment. The app relies on Server-Side Rendering (SSR) and uses functions like getServerSideProps.

However, after deployment, the website displays the following error:

Error during Next.js app preparation: Could not find a production build in the '.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id

It seems like Firebase is not detecting or using the .next directory properly. I have already ensured that I ran next build before deploying.

[REQUIRED] Steps I did before deployment

1. In the terminal, I ran the following:
2. firebase experiments:enable webframeworks
3. Created firebase functions to serve dynamic pages

import {default as next} from "next";
import * as functions from "firebase-functions";
import * as admin from "firebase-admin";

admin.initializeApp();

const dev = process.env.NODE_ENV !== "production";
const app = next({dev});
const handle = app.getRequestHandler();

export const nextjs = functions.https.onRequest((req, res) => {
  app
    .prepare()
    .then(() => {
      handle(req, res);
    })
    .catch((err: Error) => {
      res
        .status(500)
        .send("Error during Next.js app preparation: " + err.message);
    });
});

This is also my firebase.json

 "hosting": {
    "rewrites": [
      {
        "source": "/api/**",
        "function": "nextjs"
      },
      {
        "source": "/**",
        "function": "nextjs"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1"
    }
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": [
        "npm --prefix \"$RESOURCE_DIR\" run lint",
        "npm --prefix \"$RESOURCE_DIR\" run build"
      ]
    }
  ]

Then I run the npm run build, for me to have the .next folder then after that firebase deploy. Am I missing something?

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[leoortizz]

Hey @Buenaventura-Celine thanks for reporting your issue. Can you please follow the steps from the Firebase Hosting docs to integrate Next.js and report back here? The key difference is you don't need to implement a Cloud Function for the Next.js server, the Firebase web frameworks integration does that for you.

[Buenaventura-Celine]

Thanks @leoortizz after following the steps from the link you've given this is the result: the deployment is still not successful. I am seeing this error now.

The steps I did:

1. firebase experiments:enable webframeworks
2. firebase init hosting
3. npm run build to build the .next folder
4. then firebase deploy.

For your reference here is my firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "firestore": {
      "port": 8080
    },
    "pubsub": {
      "port": 8085
    },
    "storage": {
      "port": 9199
    },
    "ui": {
      "enabled": true
    }
  },
  "hosting": {
    "public": ".next",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1"
    }
  }
}

The version of my firebase is: 13.35.1

Am I missing something? Anyway thanks for the support :)

[chalosalvador]

Hi @Buenaventura-Celine the problem is that your firebase.json is incorrect. Assuming that your firebase.json is in the root of your Next.js project, you need to remove "public": ".next" and add "source": ".". The "source" key in your firebase.json should reference the root path of your Next.js project.

Please try that change, run firebase deploy and report back here.

Note: firebase deploy will detect your Next.js and build your project automatically not need to run npm run build.

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "firestore": {
      "port": 8080
    },
    "pubsub": {
      "port": 8085
    },
    "storage": {
      "port": 9199
    },
    "ui": {
      "enabled": true
    }
  },
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1"
    }
  }
}

[Buenaventura-Celine]

Hello @chalosalvador,

Thank you for your help! The solution worked, but I’m still encountering several issues when accessing the dynamic pages. I’m not sure if this falls within your scope, but I noticed that when I deploy the project on Vercel, these issues don’t occur.

Would you happen to have any insights on why this might be happening?

These are the issues I encounter when I do firebase functions:log

• 2025-03-24T16:20:39.259607Z ? ssrwizyhrisdev: ⨯ Error: next-i18next was unable to find a user config at /workspace/next-i18next.config.js

This is my next-i18next.config.js

[chalosalvador]

@Buenaventura-Celine I've tested with a simpler next.config.js and the deploy seems to work fine. Can you try with a simplified version of your next.config? You can use this one as reference assuming you're using the pages router.