Deploy Next.js app to Firebase Functions with existing functions

While you could lift the /functions directory to your project's root directory, this would mean that your other functions are unnecessarily bloated with all of your Next.js app's dependencies.

When you deploy a Cloud Function, everything in the configured deployment directory (/functions by default) is deployed - even if you don't use it. It is also deployed once for each function. So if you had a 10MB file to your functions directory, every function's deployed size would increase by 10MB. This is what I mean by "bloating" a function.

FYI: You can change the deployed functions directory by adding the following to your firebase.json file (docs):

"functions": {
  "source": "." // <- the project's root directory
}

Instead, you should make use of partial deployment. In this situation you'd move app.ts to your Next project's directory and leave the other functions that don't depend on your Next deployment in the /functions folder. If you deploy your entire project directory, you will end up deploying /functions too even though you don't use it, so you should instead move your Next front-end and functions into its own folder.

The file structure will look similar to (details below):

/myApp
  /functions
    /lib            // this is where the functions compile
    /node_modules   // functions' dependencies
    /src
      index.ts
      other.ts
    firebase.json   // configuration for this folder's contents
    package.json    // configuration for this folder's contents
  /next
    /node_modules   // Next.js app dependencies
    /.next          // compiled Next.js project
    /pages          // Next.js pages
    /public         // Next.js app public files
    /functions-lib
      app.js        // compiled Next function
    /functions-src
      app.ts        // source of Next function
    firebase.json   // configuration for this folder's contents
    package.json    // configuration for this folder's contents
    ...

Your /functions folder's firebase.json file would look similar to:

{
  "functions": {
    "source": ".",
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  }
}

To get the above structure to behave properly, you need to tweak the configuration of the firebase.json and package.json files.

Add the following to the /function folder's package.json file:

"scripts": {
  "deploy": "firebase deploy --only functions:otherFunc1,functions:otherFunc2",
  ...
}

You could also export these functions as a single group for easy deployment, but the functions will be named like otherFunctions-otherFunc1, otherFunctions-otherFunc2, and so on:

// index.ts
import * as otherFunctions from './other.ts';
export { otherFunctions };

// package.json
"scripts": {
  "deploy": "firebase deploy --only functions:otherFunctions",
  ...
}

Your /next folder's firebase.json file would look similar to:

{
  "functions": {
    "source": ".",
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "target": "myApp",
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{
      "source": "**",
      "function": "app"
    }]
  }
}

Add the following (or similar) to the /next folder's package.json file:

"scripts": {
  "build": "npm run build:next && npm run build:functions",
  "build:functions": "tsc",
  "build:next": "next build",
  "lint": "npm run lint:next && npm run lint:functions",
  "lint:functions": "eslint --ext .js,.ts ./functions-src",
  "lint:next": "...",
  "deploy": "firebase deploy --only hosting,functions:app"
}

With the above changes, drop into the appropriate directory and use npm run deploy whenever you would use firebase deploy.

Note: Don't forget that Cloud Functions consume the bodies of requests automatically, so make sure you account for this when using body parsers in Next projects and testing locally with next start.