Next js Not Refreshing or changing update after save the code

so i try to create a next js website but i notice one things that it not auto refreshing or changing things when i update the component from “component” folder, here is my code on _app.js

import "../styles/globals.css";
import Layout from "../components/Layout";

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

here is my code on component folder “layout.js”

import { useRouter } from "next/router";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Home.module.css";
import logo_nabati from "../public/assets/logo-nabati.svg";
export default function Layout({ children }) {
  const router = useRouter();
  const menuItems = [
    {
      href: "/",
      title: "Homepage",
    },
    {
      href: "/about",
      title: "About",
    },
    {
      href: "/contact",
      title: "Contact",
    },
  ];
  return (
    <div className="min-h-screen flex flex-col">
      <div className="flex flex-col md:flex-row flex-1">
        <aside className="navbar w-full md:w-96">
          <div className={styles.logo_nabati}>
            <Image
              src={logo_nabati}
              alt="Nabati Picture"
              width={123}
              height={75}
            />
          </div>

          <nav>
            <ul>
              {menuItems.map(({ href, title }) => (
                <li className="m-2" key={title}></li>
              ))}
            </ul>
          </nav>
        </aside>
        <main className="flex-1">{children}</main>
      </div>
      <style jsx>{`
        .navbar {
          background-color: #f7d716;
        }
      `}</style>
    </div>
  );
}

do i have to configure things again to make it dynamic to changes?