Đây thực sự là một vấn đề phức tạp với mã phía máy chủ trong nextjs.
Lỗi là rõ ràng :bạn đang cố gắng thực thi mã phía máy chủ (truy vấn mongo) trong mã phía máy khách. Điều không rõ ràng là nguyên nhân, vì tôi chắc chắn rằng bạn không có mã sai ...
Sau một số lần gỡ lỗi, tôi phát hiện ra rằng lỗi này sẽ xảy ra nếu bạn nhập mã mongo của mình và không sử dụng nó. Xem bên dưới để hiểu cách tránh điều này .
Ví dụ tốt và xấu
Vì vậy, điều này hoạt động tốt:
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
Trong khi điều này sẽ gây ra lỗi:
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
Làm thế nào để tránh nó
Để tránh lỗi này, chỉ cần xóa bất kỳ quá trình nhập mã phía máy chủ nào trong các thành phần của bạn nếu bạn không sử dụng nó trong getServerSideProps
.