Error When Writing Files in Node Environment with Next.js Deployed on Serverless Cloud Functions

Question

I am building a Next.js app using the version 12.1.6 and Firebase Cloud Functions as a serverless function.

In the local environment, it works without any problem, but after it's deployed, it returns Failed to load resource: the server responded with a status of 503 () to the client. And there is an error message in the functions log saying:

Error: EROFS: read-only file system, unlink '/workspace/dist/next/BUILD_ID'] {
  errno: -30,
  code: 'EROFS',
  syscall: 'unlink',
  path: '/workspace/dist/next/BUILD_ID'
}

From the error log, it seems that Next.js somehow tries to do write operations in the node environment. But Firebase Cloud Functions does not accept any writing operations except /temp directory. It only allows read operation.

Maybe I just should deploy to other hosting like Vercel. But can older versions resolve this issue? Because I am using the version 9.3 in another Firebase project and it works fine.

I would like to know how to avoid this error using the latest Next version and Firebase Cloud Functions?

packag.json

 "engines": {
    "node": "16"
  },
  "dependencies": {
    "firebase-admin": "^10.0.2",
    "firebase-functions": "^3.20.1",
    "next": "^12.1.6",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.13",
    "@types/react": "17.0.38",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.9",
    "typescript": "4.5.5"
  }

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "source": ".",
    "predeploy": ["npm run build"],
    "runtime": "nodejs16"
  },
  "hosting": {
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "function": "nextHosting",
        "source": "**"
      }
    ]
  }
}

Yeah but the question is is there any way to let Nextjs write cache data in the dist folder generated at the build time? Should I change the next js config or implement a way for Nextjs to be able to write data somehow in the dist folder using /temp?? — Ryohei, May 03 '22 at 10:33
I’m curious what would be the best recommended way to achieve this — Ryohei, May 03 '22 at 10:34
can you check [link1](https://flaviocopes.com/nextjs-cache-data-globally),[link2](https://stackabuse.com/guide-to-getting-started-with-nextjs-create-a-nextjs-app/),&[link3](https://nextjs.org/docs/upgrading#cleaning-the-distdir-is-now-a-default) — Sathi Aiswarya, May 03 '22 at 12:02
I checked these articles thank you. But as I was saying in the question, it’ll be more helpful if there’s advice on letting Nextjs to do write operations for caches while the app is running in a cloud function. Writing data outside /temp directory in Firebase Cloud Functions fails any advice on this? — Ryohei, May 04 '22 at 02:32
By default, Cache-Control headers will be set differently depending on how your page fetches data[1](https://nextjs.org/docs/going-to-production).You can set the [Cache-Control header](https://nextjs.org/docs/api-reference/next.config.js/headers#cache-control) in your Next.js API Routes by using the res.setHeader method: — Sathi Aiswarya, May 06 '22 at 12:21
Thanks for the information, but as I mentioned, I use Cloud Functions as a back-end to fetch data meaning it does not use Next.js API routes. Next.js tries to unlink files where the node runtime environment only permits "WRITE" operations, and it fails. Any way to avoid this? — Ryohei, May 06 '22 at 14:50
did you gone through this [firebase document](https://firebase.google.com/docs/reference/fcm/rest/v1/ErrorCode) — Sathi Aiswarya, May 16 '22 at 09:27

score 0 · Answer 1 · answered Oct 14 '22 at 06:15

upgrade to Cloud function v2 which allows writable actions everywhere.

const { join } = require('path')
const {onRequest} = require("firebase-functions/v2/https");
const { default: next } = require('next')

const nextjsDistDir = join('src', require('./src/next.config.js').distDir)

// https://stackoverflow.com/questions/65601999/fetching-an-image-from-firebase-storage-using-next-image-results-in-a-400-status
const nextjsServer = next({
  dev: false,
  conf: {
    distDir: nextjsDistDir,
    images: {
      domains: [
        'www.notion.so',
        'notion.so',
        'images.unsplash.com',
        'pbs.twimg.com',
        'abs.twimg.com',
        's3.us-west-2.amazonaws.com',
        'fiery-artifact-342404.web.app',
        'yihui.dev',
        'fiery-artifact-342404.firebaseapp.com',
        'yihuihe.notion.site',
        'localhost',
        '127.0.0.1',
      ],
    }
  },
})
const nextjsHandle = nextjsServer.getRequestHandler()
exports.nextjsfunc = onRequest({cors: true}, (req, res) => {
  return nextjsServer.prepare().then(() => nextjsHandle(req, res))
})

long answer here:

https://yihui.dev/firebase-hosting-with-nextjs-and-cloud-functions

Error When Writing Files in Node Environment with Next.js Deployed on Serverless Cloud Functions

1 Answers1