Vercel: NextJS app reloads when navigating to ‘/‘

Question

I have this NextJS app deployed on vercel

I'm using the new app directory and make use of the RSC components.

The error presenting in this app is that navigation towards the home route / causes the app to reload.

This doesn't happen when navigating from / to the other routes or from any other route to any non / route. Eg.

• / to -> /posts or /projects NO RELOAD

• /projects to /posts NO RELOAD

• any navigation hapenning to / CAUSES RELOAD

This issue is present only in my Vercel deployment, not locally.

I use the Link component from next/link.

export const NavbarLink = ({
  href,
  // rest of props
  onClick,
}: {
  href: string;
  // rest of types
  onClick?: () => void;
}) => {
  return (
    <Link
      href={href}
      onClick={onClick}
      className={!isMobile && shouldDisplay ? 'ml-6' : 'block'}
    >
      <span
        className={`rounded font-bold md:p-3 font-color-dark--primary ${textColor} ${textSize} ${className} ${!shouldDisplay ? 'hidden' : null}`}
      >
        {children}
      </span>
    </Link>
  );
};

and this is NavbarLink is used by all of the links in the navbar: /, /posts, /projects.

<div className={isMobile ? 'align-center flex justify-center text-center' : ''}>
  <NavbarLink
    href={Routes.home}
    textSize="md:text-4xl text-3xl"
    className={NAV_LINK_HOVER_CLASS}
    shouldDisplay
    isMobile={isMobile}
  >
    FerTostado
  </NavbarLink>
  <NavbarLink
    href={Routes.posts}
    textSize="md:text-xl lg:text-2xl text-lg"
    className={NAV_LINK_HOVER_CLASS}
    shouldDisplay={!isMobile}
  >
    Posts
  </NavbarLink>
  <NavbarLink
    href={Routes.projects}
    textSize="md:text-xl lg:text-2xl text-lg"
    className={NAV_LINK_HOVER_CLASS}
    shouldDisplay={!isMobile}
  >
    Projects
  </NavbarLink>
</div>

things I've tried

• Using useRouter.push instead of Next component from next/link
• Moving the app directory from src/app to app (root path)
• Using Link component elsewhere than footer and navbar
• Playing with latest next 13 versions. I'm on 13.3.x
• Played with the next.config.

I noticed a 404 in the base route / in the network tab, which might something to do?

If I follow the trace for that 404 in the console I see this

next.config.mjs

const config = {
  experimental: {
    appDir: true,
  },
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  webpack(config) {
    config.experiments = {
      ...config.experiments,
      topLevelAwait: true,
    };
    return config;
  },
  // images
};
export default config;

This is the repo url in a case you want to see it all.