How to not wrap a specific page with Layout component in _app.js
?
For example, I have two pages as pages/home
and pages/about
, now how can I not wrap my pages/home
page with Layout
component?
pages/_app.js
import "../styles/globals.css";
import Layout from "../components/Layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
What I have tried:
pages/_app.js
function MyApp({ Component, pageProps }) {
console.log(typeof Component); // gives me a function
switch (Component) {
case Home():
return <Component {...pageProps} />;
default:
return (
<Layout>
<Component {...pageProps} />{" "}
</Layout>
);
}
}
pages/home.js
import React from 'react';
const Home= () => {
return (<div>Hello</div>);
};
export default Home;
Home
withoutLayout
. and all other components exceptHome
will be wrapped byLayout
. right?MyApp
function is being called?_app.js
. But I think, I got it, that I have to useswitch (Component.name) { }