Next js url is changing but page is white after deployment to vercel

Question

It all works locally but once I deploy to vercel it doesn't work properly!

I'm pretty new to nextJS. I built an app that works well locally, once I deploy and click any link... The URL changes but the page are just blank white!

If I reload the page it works as expected until I click on any link again.

Note: If I build and run locally it works well... Just on vercel

Nav.js

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';

const Nav = () => {
    const [navState, setNavState] = React.useState(false);

    const handleNavToggle = (e) => {
        setNavState(!navState);
    };
    return (
        <div>
            <header className="text-gray-600 body-font">
                <div className="hidden md:flex container mx-auto flex-wrap p-5 flex-col md:flex-row items-center">
                    <Link href="/" passHref>
                        <a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                stroke="currentColor"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth="2"
                                className="w-10 h-10 text-white p-2 bg-yellow-600 rounded-full"
                                viewBox="0 0 24 24"
                            >
                                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                            </svg>
                            <span className="ml-3 text-xl">Adron Investment Company</span>
                        </a>
                    </Link>
                    <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400   flex flex-wrap items-center text-base justify-center">
                        <Link href="/" passHref>
                            <a className="mr-5 hover:text-gray-900">Home</a>
                        </Link>
                        <Link href="/about" passHref>
                            <a className="mr-5 hover:text-gray-900">About Us</a>
                        </Link>
                        <Link href="/contact" passHref>
                            <a className="mr-5 hover:text-gray-900">Contact Us</a>
                        </Link>
                    </nav>
                    <button className="flex items-center text-white font-bold bg-yellow-600 border-0 py-2 px-3 focus:outline-none hover:bg-yellow-500 rounded text-base mt-4 md:mt-0">
                        Get Started
                        <svg
                            fill="none"
                            stroke="currentColor"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            className="w-4 h-4 ml-1 text-white"
                            viewBox="0 0 24 24"
                        >
                            <path d="M5 12h14M12 5l7 7-7 7"></path>
                        </svg>
                    </button>
                </div>
                <div className="md:hidden container mx-auto flex justify-between p-5 items-center">
                    {/*Logo*/}
                    <Link href="/" passHref>
                        <a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                stroke="currentColor"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth="2"
                                className="w-10 h-10 text-white p-2 bg-yellow-600 rounded-full"
                                viewBox="0 0 24 24"
                            >
                                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                            </svg>
                            {/*<span className="ml-3 text-xl">Adron Investment Company</span>*/}
                        </a>
                    </Link>
                    {/*Nav toggler*/}
                    <div>
                        <button onClick={handleNavToggle}>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-6 w-6 hover:text-yellow-600"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M4 6h16M4 12h16M4 18h16"
                                />
                            </svg>
                        </button>
                    </div>
                </div>
                {/*Mobile Nav*/}
                { navState? 
                <div className="p-2 bg-gray-700 text-white font-bold ">
                    <Link href="/" passHref>
                        <a className="mt-5 block">Home</a>
                    </Link>
                    <Link href="/about" passHref>
                        <a className="mt-5 block">About Us</a>
                    </Link>
                    <Link href="/contact" passHref>
                        <a className="mt-5 block">Contact Us</a>
                    </Link>
                    <Link href="#" passHref>
                        <a className="mt-5 block">Get Started</a>
                    </Link>
                </div> : ""
            }
            </header>
        </div>
    );
};



export default Nav;

_app.js

import App from 'next/app';
import Head from 'next/head';
import '../styles/globals.css';
import { createContext } from 'react';
import { getStrapiMedia } from '../lib/media';
import { fetchAPI } from '../lib/api';

// Store Strapi Global object in context
export const GlobalContext = createContext({});

const MyApp = ({ Component, pageProps }) => {
  const { global } = pageProps;

  return (
    <>
      <Head>
        <link rel="shortcut icon" href={getStrapiMedia(global.favicon)} />
        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet" />
      </Head>
      <GlobalContext.Provider value={global}>
        <Component {...pageProps} />
      </GlobalContext.Provider>
    </>
  );
};

// getInitialProps disables automatic static optimization for pages that don't
// have getStaticProps. So article, category and home pages still get SSG.
// Hopefully we can replace this with getStaticProps once this issue is fixed:
// https://github.com/vercel/next.js/discussions/10949
MyApp.getInitialProps = async (ctx) => {
  // Calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(ctx);
  // Fetch global site settings from Strapi
  const global = await fetchAPI('/global');
  // Pass the data to our page via props
  return { ...appProps, pageProps: { global } };
};

export default MyApp;

next.config.js

module.exports = {
  reactStrictMode: true,
}

Answer 1

Okay, so the problem was with me... The URL I provided for fetching data was with HTTP while my app was with HTTPS.

I had to change the URL and rebuild the app for it to work!