'NextJS: Footer not render on vercel deploy

so I want to make a template for the navbar and footer and decide to use a layout like on here

it's working fine on the localhost but when deploy on the vercel for some reason not rendered but just a footer that is not rendered

Preview

on local host
on vercel

Script

Layoout.js

import Footer from "./Footer";
import Navbar from "./Navbar";

const Layout = ({ children }) => {
  return (
    <>
      <Navbar />
      {children}
      <Footer />
    </>
  );
};

export default Layout;

_app.js

import Layout from "../component/Layout";

import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

export default MyApp;

index.js

import Head from "next/head";
import Featured from "../component/Featured";
import ProductList from "../component/ProductList";

export default function Home() {
  return (
    <div>
      <Head>
        <title>MarssId</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Featured />
      <ProductList />
    </div>
  );
}

Footer.jsx

import Image from "next/image";
import React from "react";
import styled from "styled-components";
import { Instagram } from "@material-ui/icons";

const Container = styled.div`
  height: calc(100vh - 100px);
  @import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
  font-family: "Roboto", sans-serif;
  background-color: #93221e;
  display: flex;
`;

const Item = styled.div`
  flex: 1;
  position: relative;
  display: flex;

  &:last-child {
    flex: 3;
    padding: 50px;
    justify-content: space-between;
  }
`;

const Card = styled.div`
  flex: 1;
  padding: 0 20px;
`;
const Title = styled.h1`
  font-size: 18px;
  color: white;
`;

const Text = styled.p`
  color: white;
  margin-top: 10px;
`;

const Motto = styled.h2`
  color: whitesmoke;
`;

const SocialContainer = styled.div`
  color: white;
  margin-top: 10px;
  display: flex;
`;

const SocialIcon = styled.div`
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
`;

const Footer = () => {
  return (
    <Container>
      <Item>
        <Image src={"/img/1.JPG"} layout={"fill"} objectFit="cover" />
      </Item>
      <Item>
        <Card>
          <Motto>MARRS, CANDUNYA CEMILAN!</Motto>
          <Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Text>
        </Card>
        <Card>
          <Title>Contact</Title>
          <Text>Shopee</Text>
          <SocialContainer>
            <SocialIcon>
              <Instagram />
            </SocialIcon>
          </SocialContainer>
        </Card>
      </Item>
    </Container>
  );
};

export default Footer;

What I've tried

I tried to move the Footer from Layout.js to index.js to make sure the footer work and yes it's working but still in the layout.js the footer is not rendered.

Layoout.js

import Footer from "./Footer";
import Navbar from "./Navbar";

const Layout = ({ children }) => {
  return (
    <>
      <Navbar />
      {children}
    </>
  );
};

export default Layout;

index.js

import Head from "next/head";
import Featured from "../component/Featured";
import ProductList from "../component/ProductList";

export default function Home() {
  return (
    <div>
      <Head>
        <title>MarssId</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Featured />
      <ProductList />
      <Footer/>
    </div>
  );
}

am I missing something here? I don't have any idea what is wrong here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'NextJS: Footer not render on vercel deploy

Sources

Related Questions