Stuck or hanging issue when deploying a NextJs app to firebase hosting

Question

I have a NextJS app that I am trying to deploy to firebase hosting, however during the firebase deploy command it seems to get stuck and hang indefinitely (several hours waiting to no avail). The deployment log is below

This is the next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: { appDir: true },
}

module.exports = nextConfig

My node version is v16.8.0 and my NPM version is 7.21.0

When initializing firebase, I ran firebase experiments:enable webframeworks and then firebase init to initialize the project, after that I ran firebase deploy and this is the log:

Detected a Next.js codebase. This is an experimental integration, proceed with caution.

warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

info  - Creating an optimized production build
info  - Compiled successfully
info  - Linting and checking validity of types
info  - Collecting page data
[    ] info  - Generating static pages (0/7)styles.container Header_container__mD0ij
info  - Generating static pages (7/7)
info  - Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ○ / (617 ms)                             3.71 kB         109 kB
├   └ css/fdb2f6acb69fe1ad.css             794 B
├   /_app                                  0 B            97.3 kB
├ ○ /404                                   179 B          97.5 kB
├ ○ /biography (461 ms)                    3.48 kB         111 kB
├   └ css/65eda0ce9bb2b5b9.css             1.45 kB
├ ○ /indexx (405 ms)                       4.56 kB         112 kB
├   └ css/2805e6d097bc0e08.css             2.95 kB
├ ○ /news (399 ms)                         2.69 kB         110 kB
├   └ css/e3f7d4147fa456f7.css             1.1 kB
└ ○ /shop (623 ms)                         1.62 kB         107 kB
    └ css/75bc53145ed6cfe5.css             506 B
+ First Load JS shared by all              127 kB
  ├ chunks/main-d2e0a2e45955cc22.js        78.7 kB
  ├ chunks/pages/_app-e1b5cdce79d3f8aa.js  17 kB
  ├ chunks/webpack-e5138252bb357a88.js     1.6 kB
  └ css/b57b70b80e694460.css               29.3 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

Building a Cloud Function to run this application. This is needed due to:
 • Image Optimization
 • app directory (unstable)
 • non-static route /biography
 • non-static route /news
 • non-static route /indexx
 • and 1 other reasons, use --debug to see more

Unable to bundle next.config.js for use in Cloud Functions, proceeding with deploy but problems may be enountered.
The command line is too long.


changed 1 package in 49s

119 packages are looking for funding
  run `npm fund` for details

=== Deploying to 'moudstest-proj'...

i  deploying functions, hosting
i  functions: preparing codebase firebase-frameworks-moudstest-proj for deployment
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
i  artifactregistry: ensuring required API artifactregistry.googleapis.com is enabled...
+  artifactregistry: required API artifactregistry.googleapis.com is enabled
+  functions: required API cloudbuild.googleapis.com is enabled
+  functions: required API cloudfunctions.googleapis.com is enabled
!  functions: package.json indicates an outdated version of firebase-functions. Please upgrade using npm install --save firebase-functions@latest in your functions directory.
!  functions: Please note that there will be breaking changes when you upgrade.
i  functions: Loaded environment variables from .env.
i  functions: preparing .firebase\moudstest-proj\functions directory for uploading...
i  functions: packaged D:\Projects\MENA\MZPersonalWebsite\.firebase\moudstest-proj\functions (127.64 MB) for uploading
i  functions: ensuring required API run.googleapis.com is enabled...
i  functions: ensuring required API eventarc.googleapis.com is enabled...
i  functions: ensuring required API pubsub.googleapis.com is enabled...
i  functions: ensuring required API storage.googleapis.com is enabled...
+  functions: required API eventarc.googleapis.com is enabled
+  functions: required API run.googleapis.com is enabled
+  functions: required API storage.googleapis.com is enabled
+  functions: required API pubsub.googleapis.com is enabled
i  functions: generating the service identity for pubsub.googleapis.com...
i  functions: generating the service identity for eventarc.googleapis.com...

What I can see from the log:

1. The deployment is hanging at functions: generating the service identity for eventarc.googleapis.com even though the internet connection is stable and there are no clear errors.
2. Half way through the deployment it prints out Unable to bundle next.config.js for use in Cloud Functions, proceeding with deploy but problems may be enountered. The command line is too long. I'm not sure what the cause is.

Junia

I'm also facing similar issue with hosting nextjs on firebase. But mine stuck at: " Building a Cloud Function to run this application. This is needed due to: • non-static route /admin • non-static route /admin/login • non-static route /api/hello " – Symonds

@Symonds I am having the same issue. Were you able to resolve it? – Pretrice

@Symonds Deployment worked for me after downgrading firebase-tools to v11.19.0 npm install -g [email protected] Created an issue here: github.com/firebase/firebase-tools/issues/5622 – Pretrice

@Pretrice I tried to conact firebase support team. They recommened to use firebase tools v11.18.0. – Symonds

Answer 1

For anyone still having that issue. Try changing the rewrite config in firebase.json to something like the below:

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/nextjsFunc",
        "function": "ssrYOUR_PROJECT_NAME"
      }
    ]
  }
}

Explanation: nextJS uses Server Side Rendering (SSR) and deploys a function to Firebase. With the migration to Function v2 some things have changed on the Firebase side on how that function gets deployed/named.

Pretrice

Answer 2

We fixed this by using

npm uninstall next

npm install [email protected]

npm install firebase-frameworks

After several hours of reinstalls of different versions of node, next, firebase, firebase-tools etc (which did not work)

Hyperesthesia