deploy nextjs app on firebase google cloud

Question

I am thinking of deploying nextjs project on gcp firebase. However, I could not see any pages running. I mean it's shown fully blank. I am not quite sure if I missed something for deployment.

Here is my configuration

.next
public
src
  pages
  components
  assets - images
server.js
.babelrc
.env.development
.env.staging
.env.production
.firebaserc
firebase.json
jsconfig.json
next.config.js

Now the setup for deployment

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**/**",
        "function": "next"
      }
    ]
  },
  "functions": {
    "source": ".",
    "ignore": [
      ".firebase/**",
      ".firebaserc",
      "firebase.json",
      "**/node_modules/**",
      "**/.vscode/**",
      "**/conventions/**",
      "**/.hooks/**",
      "**/public/**"
    ]
  }
}

.firebaserc

{
  "projects": {
    "default": "jeweltrek-test"
  }
}

next.config.js

const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const withPWA = require("next-pwa");

module.exports = withPlugins(
    [optimizedImages],
    [
      withPWA({
        pwa: {
          dest: "public",
        },
      }),
    ]
);

server.js

const functions = require('firebase-functions');
const next = require('next');

var dev = process.env.NODE_ENV !== 'production';
var app = next({ dev, conf: { distDir: '.next' } });
var handle = app.getRequestHandler();

exports.next = functions.https.onRequest((req, res) => {
  console.log('File: ' + req.originalUrl); // log the page.js file that is being requested
  return app.prepare().then(() => handle(req, res));
});

package.json

{
    "name": "jeweltrek-next",
    "version": "0.1.0",
    "private": true,
    "main": "server.js",
    "engines": {
      "node": "10"
    },
    "scripts": {
      "dev:client": "next",
      "dev:server": "node src/server --source-maps --watch",
      "dev": "dotenv -e .env.development yarn dev:client & yarn dev:server",
      "build": "dotenv -e .env.production next build",
      "build:staging": "dotenv -e .env.staging next build",
      "serve": "dotenv -e .env.staging firebase serve --only functions,hosting",
      "deploy": "dotenv -e .env.staging firebase deploy --only functions,hosting",
      "start": "next start"
    },
    "dependencies": {
      "apollo-boost": "^0.4.7",
      "dotenv": "^8.2.0",
      "express": "^4.17.1",
      "firebase-admin": "^8.12.1",
      "firebase-functions": "^3.6.1",
      "formik": "^2.1.4",
      "graphql": "^15.0.0",
      "html-to-draftjs": "^1.5.0",
      "imagemin-mozjpeg": "^8.0.0",
      "imagemin-optipng": "^7.1.0",
      "isomorphic-fetch": "^2.2.1",
      "isomorphic-unfetch": "^3.0.0",
      "lodash": "^4.17.15",
      "lqip-loader": "^2.2.0",
      "next": "^9.4.0",
      "next-compose-plugins": "^2.2.0",
      "next-optimized-images": "^2.5.8",
      "next-pwa": "^2.4.1",
      "next-runtime-dotenv": "^1.2.0",
      "nprogress": "^0.2.0",
      "react": "16.13.1",
      "react-apollo": "^3.1.5",
      "react-apollo-hooks": "^0.5.0",
      "react-dom": "16.13.1",
      "react-draft-wysiwyg": "^1.14.4",
      "styled-components": "^5.1.0",
      "webp-loader": "^0.6.0",
      "yup": "^0.28.3"
    },
    "devDependencies": {
      "babel-eslint": "^10.1.0",
      "firebase-functions-test": "^0.2.1"
    }
  }

for deploying what I am doing is

• First i build file using yarn build:staging if its for staging

• yarn deploy

it says deployment complete as well with no error but if i navigate to the browser then it does not render the pages

https://us-central1-jeweltrek-test.cloudfunctions.net/next/

this is what i get

Answer 1

It could be something related to permissions to cloud functions and IAM or authentication, check this page: https://firebase.google.com/docs/reference/fcm/rest/v1/ErrorCode Also, check this answer: Firebase Functions HTTPS 403 Forbidden

I hope this solves it. Good Luck!