I currently have a basic root layout set up in Nextjs (app router) that displays a navigation bar and the child components underneath 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>
);
}
The documentation elaborates on...
A layout comprises UI elements shared across various pages. While navigating, layouts maintain their state, stay interactive, and do not re-render. Additionally, layouts can be nested within each other.
An issue I encountered pertains to font resetting briefly upon changing pages after importing a Google font for use in the navbar component. Can anyone shed light on why this behavior occurs?
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>
);
}