After creating a _app.js file:
const MyApp = ({Component, pageProps}) => {
const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>)
return getLayout(<Component {...pageProps} />)
}
export default MyApp
I also have two pages, about.js and works.js, which simply return an empty div:
export default function Works(){
return(
<div></div>
)
}
The default layout is defined as follows:
const Layout = ({children}) => {
return (
<div>
<Navbar/>
<main>{children}</main>
</div>
);
};
export default Layout;
However, when navigating from /works to /about using the navbar link:
...
<div className={styles.item}><a href={'/about'}>about</a></div>
...
It still loads the Navbar for some reason. I am using Next.js 13.2.3 and I can't seem to figure out why this isn't working as expected.
I've already attempted removing per-page layouts and opting for a shared layout for all pages, but it resulted in the same issue. So, I reverted back to per-page layouts, as I specifically need the default page without the Navbar, while other pages should include it.
Despite searching for solutions on StackOverflow, nothing has resolved my problem. I am now trying to identify what's causing this unexpected behavior in my code.