Tengo páginas que tienen diferentes diseños. Para cambiar el diseño, estoy usando Component.name en _app.js . Está trabajando en Desarrollo, pero después de compilar el proyecto y usar el inicio de npm. Parece que Component.name no contiene el valor correcto, lo que hace que otras páginas utilicen el componente de diseño.
if (Component.name === 'Login') { return <Component {...{ pageProps, toast }} />; } return ( <Layout> <Component {...{ pageProps, toast }} /> </Layout> );¿Hay algo que me he perdido aquí? O esta no es la forma correcta de implementar algo como esto.
Estoy enfrentando el mismo problema. Después de investigar un poco, resulta que se debió a que los archivos se minificaron en producción. Podemos establecer el nombre del componente explícitamente antes de exportar, luego deberíamos poder acceder a él en producción.
// Login Component function Login() {....} Login.displayName = "Login" export default Login;entonces puedes acceder con
if (Component.displayName === 'Login') { return <Component {...{ pageProps, toast }} />; } return ( <Layout> <Component {...{ pageProps, toast }} /> </Layout> );Puede usar el nombre de ruta del enrutador aquí para verificar esto:
if (["/login"].includes(router.pathname)) { return <Component {...{ pageProps, toast }} />; } return ( <Layout> <Component {...{ pageProps, toast }} /> </Layout> );