CODEWITHSUNDEEP
javascriptreactjsfirebasenext.jsserver-side-rendering
Undefined
Undefined

Reputation: 1021

Next Js - Firebase deployment issue

I am building up a new Next Js app and its a stright forward way to make the app gets deployed in vercel by linking the gitlab Next js project..

For same project I am in the need to deploy it in firebase.

Things I have tried:

-> Made firebase init

That gives firebase.json ,

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

But the above one gives the error like,

enter image description here

From this error I am able to get that it tries to fetch the index.html but I am not sure where it will be after npm run build ..

So I tried giving pages directory and index.js file like,

{
  "hosting": {
    "public": "pages",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
    "rewrites": [{
      "source": "/pages/**",
      "destination": "/index.js"
    },
    {
      "source": "**",
      "destination": "/index.js"
    }]
}

But this just prints the code available in index.js to the UI like,

import React, { Component } from "react";
import Router from "next/router";

export default class Index extends Component {
  componentDidMount = () => {
    Router.push("/landing",'');
  };

  render() {
    return <div />;
  }
}

The gitlab-ci.yml file as follows,

image: node:12.13.0-alpine

stages:
  - deploy

cache:                  
  paths:                
    - node_modules/     
  key: "$CI_BUILD_REPO" 

deploy-prod:
  stage: deploy
  only:
    - master
  script:
    - npm install
    - npm run build
    - npm install -g firebase-tools
    - firebase -V
    - firebase use anvisysytems --token "token_hidden"
    - firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token "token_hidden"

Please help me to achieve the result of fetching the right index.html that will gets generated after building the Next Js application and make the app content load in UI instead of the errors(like above image) or code(like index.js code rendering in UI).

Upvotes: 2

Views: 2574

Answers (1)

user14361391
user14361391

Reputation:

Firebase can host only static files,

To host NEXT js project as static files, you can use export option and then deploy it to Firebase.

https://nextjs.org/docs/advanced-features/static-html-export

Upvotes: 2

Related Questions