Deploying NextJS to Firebase Hosting

Question

I'm trying to deploy this web app built with NextJS and Firebase to Firebase hosting. The deploy process terminates with an unexpected error.

Upon pursuing the logs and checking them on Google, I found a GitHub issued dated April which addresses the same problem. Apparently it's related to how Firebase CLI extracts routing information from NextJS AppRouter. I've tried downloading the proposed fix, but it's not available. Upon further research I've found a commit addressing said issued. Updating the Firebase CLI didn't bring any results

The web app is basically a simple CRUD CMS which allows for page creation inside each section of the page, and insertion of simple image and text data. Nothing fancy is being done in any place.

I didn't include logs or config files since apparently this is a known issue that addresses a common use case.

EDIT: Environment information:

CLI Version:   11.27.0
Platform:      linux
Node Version:  v16.16.0

package.json

{
  "name": "andreia-pinho",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "bootstrap": "^5.3.2",
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.10",
    "firebase": "^10.6.0",
    "firebase-tools": "^12.9.1",
    "next": "^13.4.19",
    "postcss": "8.4.26",
    "react": "18.2.0",
    "react-bootstrap": "^2.9.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3"
  }
}

firebase.json

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "europe-west1"
    }
  }
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    images:{
      unoptimized: true
    }
}

module.exports = nextConfig

firebase-debug.log

    [debug] [2023-11-16T23:15:58.693Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
[debug] [2023-11-16T23:15:58.693Z] > authorizing via signed-in user (pedro.barbeira95@gmail.com)
[debug] [2023-11-16T23:15:58.693Z] [iam] checking project andreia-pinho for permissions ["firebase.projects.get","firebasehosting.sites.update"]
[debug] [2023-11-16T23:15:58.695Z] >>> [apiv2][query] POST https://cloudresourcemanager.googleapis.com/v1/projects/andreia-pinho:testIamPermissions [none]
[debug] [2023-11-16T23:15:58.695Z] >>> [apiv2][(partial)header] POST https://cloudresourcemanager.googleapis.com/v1/projects/andreia-pinho:testIamPermissions x-goog-quota-user=projects/andreia-pinho
[debug] [2023-11-16T23:15:58.695Z] >>> [apiv2][body] POST https://cloudresourcemanager.googleapis.com/v1/projects/andreia-pinho:testIamPermissions {"permissions":["firebase.projects.get","firebasehosting.sites.update"]}
[debug] [2023-11-16T23:15:59.512Z] <<< [apiv2][status] POST https://cloudresourcemanager.googleapis.com/v1/projects/andreia-pinho:testIamPermissions 200
[debug] [2023-11-16T23:15:59.512Z] <<< [apiv2][body] POST https://cloudresourcemanager.googleapis.com/v1/projects/andreia-pinho:testIamPermissions {"permissions":["firebase.projects.get","firebasehosting.sites.update"]}
[debug] [2023-11-16T23:15:59.516Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/andreia-pinho [none]
[debug] [2023-11-16T23:16:00.014Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/andreia-pinho 200
[debug] [2023-11-16T23:16:00.014Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/andreia-pinho {"projectId":"andreia-pinho","projectNumber":"794238121312","displayName":"andreia-pinho","name":"projects/andreia-pinho","resources":{"hostingSite":"andreia-pinho","realtimeDatabaseInstance":"andreia-pinho-default-rtdb","storageBucket":"andreia-pinho.appspot.com","locationId":"europe-west"},"state":"ACTIVE","etag":"1_24c6b28a-b308-40d1-a0a6-0e9e6c03c54c"}
[debug] [2023-11-16T23:16:03.711Z] >>> [apiv2][query] GET https://firebasehosting.googleapis.com/v1beta1/projects/andreia-pinho/sites pageToken=&pageSize=10
[debug] [2023-11-16T23:16:05.128Z] <<< [apiv2][status] GET https://firebasehosting.googleapis.com/v1beta1/projects/andreia-pinho/sites 200
[debug] [2023-11-16T23:16:05.128Z] <<< [apiv2][body] GET https://firebasehosting.googleapis.com/v1beta1/projects/andreia-pinho/sites {"sites":[{"name":"projects/andreia-pinho/sites/andreia-pinho","defaultUrl":"https://andreia-pinho.web.app","appId":"1:794238121312:web:faf24b316f832b9ecbda05","type":"DEFAULT_SITE"}]}
[debug] [2023-11-16T23:16:05.129Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/-/webApps/1:794238121312:web:faf24b316f832b9ecbda05/config [none]
[debug] [2023-11-16T23:16:05.824Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/-/webApps/1:794238121312:web:faf24b316f832b9ecbda05/config 200
[debug] [2023-11-16T23:16:05.824Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/-/webApps/1:794238121312:web:faf24b316f832b9ecbda05/config {"projectId":"andreia-pinho","appId":"1:794238121312:web:faf24b316f832b9ecbda05","databaseURL":"https://andreia-pinho-default-rtdb.europe-west1.firebasedatabase.app","storageBucket":"andreia-pinho.appspot.com","locationId":"europe-west","apiKey":"AIzaSyC8Spdjk3CnpNJpEn2P-WQDcqn8DWEbWwc","authDomain":"andreia-pinho.firebaseapp.com","messagingSenderId":"794238121312","measurementId":"G-HMCYZBRY6J"}
[debug] [2023-11-16T23:16:30.885Z] TypeError: Cannot read properties of null (reading 'endsWith')
    at ɵcodegenPublicDirectory (/home/pbarbeira/.cache/firebase/tools/lib/node_modules/firebase-tools/lib/frameworks/next/index.js:206:56)
    at async prepareFrameworks (/home/pbarbeira/.cache/firebase/tools/lib/node_modules/firebase-tools/lib/frameworks/index.js:287:13)
    at async deploy (/home/pbarbeira/.cache/firebase/tools/lib/node_modules/firebase-tools/lib/deploy/index.js:53:13)
[error] 
[error] Error: An unexpected error has occurred.

Answer 1

These 2 things should solve your problem:

1. Update next version to 13.5.6 as this is the latest really stable version.
2. Add swcMinify: false to next.config.js:

/** @type {import('next').NextConfig} */
module.exports = {
  swcMinify: false
  .... other props
}

I had a simillar error on my project and the sollution was disabling swcMinify. You can find a lot of issues from different repositories and all sollutions was disabling this option.