Next.JS only rerenders navbar on production server

I have a simple Next.js set up which has a navbar that i added to the main layout.js. If i navigate between the routes on my local environment it will not rerender the menu. In fact nothing gets rerendered at all. No network requests after the initial pageload.

When i deploy to production and navigate between the routes using my menu it not only rerenders the menu on every single click but it also does all the network requests over and over again every time i navigate. I tested this by changing the color of the menu buttons in the chrome dev tools and on my local environment they will stay changed while they aren't on production.

The reason i started using React was because mainly because i didn't have to rerender the entire page every single time i navigated and instead just rerender the parts that did change because of the useraction.

This is my current setup:

I'm using netlify (not sure if i am missing a specific production server setting that will fix my issue). I attached the netlify toml aswell as the next config file.

app/layout.js

import './globals.css'
import { Inter } from 'next/font/google'
import { ReduxProvider } from '@/store/provider';
import AccountButtons from './AccountButtons';
const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'The Memory Collective',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
      <ReduxProvider>
      <AccountButtons />
        {children}
      </ReduxProvider>
      </body>
    </html>
  )
}

AccountButtons.js

import Button from "@mui/material/Button";

import Link from 'next/link'

export default function AccountButtons() {

    return (
    <>

        <div>
            <Button variant="contained" size="large"><Link href="/dashboard">My Account</Link></Button>
        </div>

        <div>
            <Link href="/login"><Button variant="text" size="large">Login</Button></Link>
            <Link href="/register"><Button variant="contained" size="large">Get Started</Button></Link>
        </div>
   
    </>
  )

}

import Link from 'next/link'
 
export default function Register() {
  return (
    <>
        <h1>Registration Page</h1>
    </>
  )
}

import Link from 'next/link'
 
export default function Login() {
  return (
    <>
        <h1>Login Page</h1>
    </>
  )
}

app/page.js

import { API } from "../utils/api";
import Image from 'next/image'
import styles from './page.module.css'
import { Fragment } from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Link from 'next/link'



export default async function Home() {
    const data = await getData()
    const set1 = data.textblockset.find(item => item.id === 1);

    return (
    <main className={styles.main}>           
                {
        set1.textblock.map((item, index) => (
          <Fragment key={ item.id }>
            { item.block_icon && (
              <Image 
                src={ item.block_icon }
                alt="icon"
                width={ 50 }
                height={ 50 }
                loading="lazy" />
            ) }

            <Typography paragraph fontWeight="bold">
              { item.block_title }
            </Typography>

            <Typography>
              { item.block_content }
            </Typography>
          </Fragment>
        ))
      }
      </main>

  )

}
async function getData() {
  const res = await fetch(API.homepage.retrieve(1))
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}

netlify.toml

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
      remotePatterns: [
        {
          protocol: 'http', 
          hostname: 'localhost',
          port: '8000',
          pathname: '/media/**',
        },
      ],
    },
  };

module.exports = nextConfig

Solution

Apparently a well known Netlify issue that hasn't been fixed yet: https://github.com/netlify/next-runtime/issues/2089