Project Screenshot

Deploy NEXT JS into firebase

Step to follow

1. npx create next-app .
2. do all the code you want.
3. create a firebase project
4. upgrade to Pay as you go
5. login into firebase via cli
6. firebase init
7. setup project for hosting & functions
8. edit your firebase.json file like below

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextServer"
      }
    ]
  },
  "functions": {
    "source": ".",
    "runtime": "nodejs16"
  }
}

let me explain what we did

• hosting setup
  make sure you set the public = public.
  
• functions setup
  rewrite source = ** and function = nextServer(we will create our own function)
  set funcions source="."
  set the runtime =nodejs12

---

Step: 9 Create our custom server.js file

const { https } = require("firebase-functions");
const { default: next } = require("next");

const isDev = process.env.NODE_ENV !== "production";

const server = next({
  dev: isDev,
  //location of .next generated after running -> yarn build
  conf: { distDir: ".next" },
});

const nextjsHandle = server.getRequestHandler();
exports.nextServer = https.onRequest((req, res) => {
  return server.prepare().then(() => {
    return nextjsHandle(req, res);
  });
});

/*
firebase-admin,firebase-functions
require these plugins,install them
*/

Step: 10 install all dependency

npm i firebase-admin firebase-functions

Step: 11 add server.js file in package.json file

So final package.json file will look like this.we added some custom scipt.

{
  "name": "app",
  "main": "server.js",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "out": "next build && next export",
    "deploy2": "cross-env NODE_ENV=production firebase deploy --only functions,hosting",
    "deploy": "firebase deploy --only functions,hosting",
    "start": "next start"
  },
  "dependencies": {
    "cross-env": "^7.0.3",
    "firebase-admin": "^9.4.2",
    "firebase-functions": "^3.13.0",
    "next": "10.0.5",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

Step: 12 Delete index.html from the public directory

Start Deploy

//build our Next.js project to generate .next folder
1. npm run build

//Now deploy
2. npm run deploy