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?