I'm having trouble deploying my dynamic Next.js app on Firebase

Question

I've set up my Next.js app with dynamic routes like blogs/[slugs]/page. Static pages work without issues, but when I add dynamic routes, I encounter npm dependency errors.

I'm using "tailwindcss": "^3.4.1" and want to stick with this version. I've tried deleting node_modules and package-lock.json, then running npm install to sync the dependencies, but the issue persists.

Running npm list tailwindcss shows:

├─┬ tailwindcss-animate@1.0.7
│ └── tailwindcss@3.4.17 deduped
└── tailwindcss@3.4.17

The build fails with:

Build failed with status: FAILURE
npm error code EUSAGE
npm error: `npm ci` can only install packages when your package.json and package-lock.json (or npm-shrinkwrap.json) are in sync.
npm error: Missing tailwindcss@4.0.9 from lock file.

The error suggests a version mismatch in the lock file. A full error log can be found at /www-data-home/.npm/_logs/2025-02-28T12_02_06_691Z-debug-0.log and the Cloud Build logs at:

Cloud Build Logs

Additionally, Firebase functions deployment failed for:

firebase-frameworks-my-website:ssrmywebsite(asia-east1)

An error also occurred while cleaning up build images, which could result in a small monthly cost if not resolved. The images can be deleted manually here:

How can I resolve this dependency issue and successfully deploy my Next.js app with dynamic routes on Firebase?

This is my package.json

enter image description here

This is my functions/package.json

enter image description here

help me please!!!

Answer 1

Since you're deploying to Firebase, possible that Firebase requires the package-lock.json to be in sync with package.json.

Once you have the correct versions of the dependencies installed locally, commit the updated package-lock.json to your Git repository. And try triggering the deployment again

firebase deploy --only functions

Something similar Issues with Dependencies in Firebase App Hosting and Cloud Functions Deployments for Next.js App