I have a pages that have different Layouts. Inorder to Switch Layout I am using the Component.name in _app.js. It is working in Development but after building the project and using the npm start. It seems the Component.name doesn't contain the correct value making the Layout Component used by other pages.
if (Component.name === 'Login') {
return <Component {...{ pageProps, toast }} />;
}
return (
<Layout>
<Component {...{ pageProps, toast }} />
</Layout>
);
Is there something that I have missed here? Or this is not the correct way to implement something like this.
I am facing the same issue. After some digging, it turns out it was because files were minified in production. We can set the component name explicitly before we export, then we should be able to access it in production.
// Login Component
function Login() {....}
Login.displayName = "Login"
export default Login;
then you can access it with
if (Component.displayName === 'Login') {
return <Component {...{ pageProps, toast }} />;
}
return (
<Layout>
<Component {...{ pageProps, toast }} />
</Layout>
);
You could use the pathname of the router here to check this:
if (["/login"].includes(router.pathname)) {
return <Component {...{ pageProps, toast }} />;
}
return (
<Layout>
<Component {...{ pageProps, toast }} />
</Layout>
);