Deployed NextJS over Firebase but getting Error 403 Forbidden - reactjs

Question

I just deployed my NextJS app over Firebase Hosting and Firebase Functions. After the deployment is successful, I went to the website but I was greeted with this page.
this is my firebase.json
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "nextApp"
}
]
},
"functions": {
"source": ".",
"predeploy": [
"npm install",
"npm run build"
],
"runtime": "nodejs12",
"ignore": [
"**/tests/**",
"**/node_modules/**",
"jest.config.js"
]
}
}
my cloud functions for nextJS
// This file is an entry point for Firebase Function to serve NextJS
const functions = require('firebase-functions');
const { default: next } = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({
dev,
conf: {
distDir: '.next',
future: {
strictPostcssConfiguration: false,
excludeDefaultMomentLocales: true,
webpack5: false,
},
},
});
const handle = app.getRequestHandler();
exports.nextApp = functions.region('asia-southeast2').https.onRequest((req, res) => {
console.log('File: ' + req.originalUrl);
return app.prepare().then(() => handle(req, res));
});
I did check Google Cloud Console and made sure that I've added allUsers to the Cloud Function Invoker role, but it isn't helping.

Answer 1

Sorry, silly me I've figured it out. The issue is because I'm deploying the Cloud Function to asia-southeast2 region but Firebase Hosting only able to access Cloud Functions hosted in us-central1.