Large Payload Size and Time for Nextjs project deployment.

[Keshavdulal]

Hi,

We recently migrated our project from React to Nextjs(13.4.10).
We use firebase cloudstore and hosting.

Previously the hosting deployment of React Project would take a few minutes or so. Nothing too crazy.
But now the same migrated NextJS Project takes anywhere between 10-18 mins and payloads is also nearly 5 times larger (848MB compared to 180MB).

i  functions: packaged /<project-path>/.firebase/<dev-env>/functions (847.85 MB) for uploading

I wanted to discuss If I am doing everything alright or not and is there a way to optimize the payload size and deployment time?
We do frequent automated deployments on PRs and Merges, and this large payload and deployment time would make things slow for us. I get similar results whether I am using preview channel or not.

I tried using Firebase Tools v12.4.5 and [email protected] and 9.23.0 with more or less similar results.

# Regular Script
firebase use development && firebase deploy -P development

# Preview channel
firebase hosting:channel:deploy nextjs

Here's our firebase.json

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": " europe-west1"
    }
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5002
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

firebase.rc

{
  "projects": {
    "development": "<dev-env>",
    "production": "<prod-env>",
    "default": "<dev-env>"
  },
  "targets": {
    "<dev-env>": {
      "hosting": {
        "<project-name>": [
          "<project-name>"
        ],
        "<dev-env>": [
          "<dev-env>"
        ]
      }
    },
    "<prod-env>": {
      "hosting": {
        "<project-name>": [
          "production"
        ]
      }
    }
  },
  "etags": {}
}

Full deployment log

firebase hosting:channel:deploy next-images-2
No Firebase app associated with site <dev-env>, injecting project default config.
  You can link a Web app to a Hosting site here https://console.firebase.google.com/project/<dev-env>/settings/general/web

   Thank you for trying our early preview of Next.js support on Firebase Hosting.
   During the preview, support is best-effort and breaking changes can be expected. Proceed with caution.

   Documentation: https://firebase.google.com/docs/hosting/frameworks/nextjs
   File a bug: https://github.com/firebase/firebase-tools/issues/new?template=bug_report.md
   Submit a feature request: https://github.com/firebase/firebase-tools/issues/new?template=feature_request.md

   We'd love to learn from you. Express your interest in helping us shape the future of Firebase Hosting: https://goo.gle/41enW5X

- info Loaded env from /<project-path>/.env.local
- info Linting and checking validity of types...
- warn The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
- info Creating an optimized production build...
- info Compiled successfully
- info Collecting page data...

- info Generating static pages (0/58)
- info Generating static pages (14/58)
- info Generating static pages (28/58)
- info Generating static pages (43/58)
- info Generating static pages (58/58)
- info Finalizing page optimization...

Route (pages)                              Size     First Load JS
┌ ○ /                                      1.28 kB         387 kB
├   /_app                                  0 B             383 kB
<list-of-58-pages>
+ First Load JS shared by all              409 kB
  ├ chunks/framework-d652e940cea3be79.js   66.8 kB
  ├ chunks/main-5bce2507304bd288.js        38.5 kB
  ├ chunks/pages/_app-54856300022d9f99.js  276 kB
  ├ chunks/webpack-800c4dd7c4a0ac5f.js     2.08 kB
  └ css/094a227034abb764.css               25.5 kB


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

- info Loaded env from /<project-path>/.env.local
Building a Cloud Function to run this application. This is needed due to:
 • Image Optimization
 • advanced rewrites


up to date in 473ms

67 packages are looking for funding
  run `npm fund` for details
⚠  Authenticating with `FIREBASE_TOKEN` is deprecated and will be removed in a future major version of `firebase-tools`. Instead, use a service account key with `GOOGLE_APPLICATION_CREDENTIALS`: https://cloud.google.com/docs/authentication/getting-started
i  hosting: The following function(s) are pinned to site <dev-env> and will be deployed as well: ssr<dev-env>

=== Deploying to '<dev-env>'...

i  deploying functions, hosting
i  functions: preparing codebase firebase-frameworks-<dev-env> 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
i  functions: Loading and analyzing source code for codebase firebase-frameworks-<dev-env> to determine what to deploy
Serving at port 8855

shutdown requested via /__/quitquitquit

i  functions: Loaded environment variables from .env.
i  functions: preparing .firebase/<dev-env>/functions directory for uploading...
i  functions: packaged /<project-path>/.firebase/<dev-env>/functions (848.06 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...
✔  functions: .firebase/<dev-env>/functions folder uploaded successfully
i  hosting[<dev-env>]: beginning deploy...
i  hosting[<dev-env>]: found 328 files in .firebase/<dev-env>/hosting
✔  hosting[<dev-env>]: file upload complete

Any help is appreciated, thanks.

[UmerASaeed]

Hi @Keshavdulal

Were you able to get to the bottom of this? I am on the same boat as you.

[tmhrbr]

I had similar issue, make sure to clean up your repository, remove any .next, out folders etc. it all gets uploaded to the server. firebase deploy will create it's own .next build in the .firebase folder.