impor nextjs tetapi jangan aktifkan fungsi lempar Modul tidak ditemukan:Kesalahan:Tidak dapat menyelesaikan 'dns'

Ini adalah masalah yang sangat halus dengan kode sisi server di nextjs.

Kesalahannya jelas :Anda mencoba mengeksekusi kode sisi server (kueri mongo) dalam kode sisi klien. Yang tidak jelas adalah penyebabnya, karena saya yakin Anda tidak salah kode...

Setelah beberapa debug, saya menemukan bahwa kesalahan ini terjadi jika Anda mengimpor kode mongo Anda dan tidak menggunakannya. Lihat di bawah untuk memahami cara menghindarinya .

Contoh baik dan buruk

Jadi, ini berfungsi dengan baik:

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

Sementara ini akan menimbulkan kesalahan:

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

Cara menghindarinya

Untuk menghindari kesalahan ini, hapus saja impor kode sisi server di komponen Anda jika Anda tidak menggunakan di getServerSideProps .