I have a simple root layout in Nextjs (app router) that renders a navbar and the children below it.
ROOT LAYOUT
import "./globals.css";import type { Metadata } from "next";import { Inter } from "next/font/google";import { Russo_One } from "next/font/google";import Navbar from "./_components/Navbar";export const russo = Russo_One({ weight: "400", subsets: ["latin"] });const inter = Inter({ subsets: ["latin"] });export const metadata: Metadata = { title: "Sportly", description: "Generated by create next app",};export default function RootLayout({ children,}: { children: React.ReactNode;}) { return (<html lang="en"><body className={inter.className}><Navbar /> {children}</body></html> );}In the documentation, it states that...
A layout is UI that is shared between multiple pages. On navigation,layouts preserve state, remain interactive, and do not re-render.Layouts can also be nested
So, I am confused as to why this is happening. I only noticed it because I imported a Google font and used it in the navbar. However, when I change the page, the font weight resets for a brief second before reappearing. Can someone help me understand why this is happening?
NAVBAR COMPONENT
import { Link, Typography, Box } from "@mui/material";import { russo } from "../layout";export default function Navbar() { console.log("navbar rendering..."); return (<nav className="/*STYLES*/"><h1 style={{fontWeight: "400" /* STYLES*/}} className={russo.className}> SPORTLY</h1></nav> );}