Este es un problema muy sutil con el código del lado del servidor en nextjs.
El error es obvio :está intentando ejecutar el código del lado del servidor (consulta mongo) en un código del lado del cliente. Lo que no es obvio es la causa, porque seguro que no tienes un código equivocado...
Después de un poco de depuración, descubrí que este error se produce si importa su código mongo y no lo usa. Consulte a continuación para saber cómo evitarlo .
Ejemplos buenos y malos
Entonces, esto funciona bien:
import { findUsers } from '../lib/queries'
function Home({ users }) {
return (
<h1>Users list</h1>
//users.map and so on...
)
}
export async function getServerSideProps() {
const users = await findUsers()
return {
props: {
users: users
}
}
}
export default Home
Si bien esto arrojará el error:
import { findUsers } from '../lib/queries'
function Home({ users }) {
return (
<h1>Users list</h1>
//users.map and so on...
)
}
export async function getServerSideProps() {
// call disabled to show the error
// const users = await findUsers()
return {
props: {
users: [] //returned an empty array to avoid other errors
}
}
}
export default Home
Cómo evitarlo
Para evitar este error, simplemente elimine cualquier importación de código del lado del servidor en sus componentes si no usa en getServerSideProps
.