mongoDB연결 안됨

[Seongjun]

선생님 강의대로 index.js에는

import { connectDB } from "/util/database.js";

export default async function Home() {
  let client = await connectDB;
  const db = client.db("forum");
  let result = await db.collection("post").find().toArray();

  return <main>{result[0].title}</main>;
}

util/database.js 에는

import { MongoClient } from "mongodb";
const url =
  "mongodb+srv://admin:qwer1234@cluster0.zqhtykt.mongodb.net/?retryWrites=true&w=majority";
const options = { useNewUrlParser: true };
let connectDB;

if (process.env.NODE_ENV === "development") {
  if (!global._mongo) {
    global._mongo = new MongoClient(url, options).connect();
  }
  connectDB = global._mongo;
} else {
  connectDB = new MongoClient(url, options).connect();
}
export { connectDB };

복붙해서 실행했는데 Module not found: Can't resolve 'dns' 에러가 뜹니다.. 찾아보니 client component에서 DB 코드를 실행을 해서

그런 거 같은데 "use client"를 안 붙이면 서버 코드 아닌가요? database.js가 client component 인가요? 왜 에러가 뜨는지 모르겠습니다...

파일 구조는
.next
node_modules
public
  util
  |
  ㅡ> database.js
src
|
|  ㅡ>pages/
        |
        ㅡ> api/hello.js
        |
        ㅡ>_app.js
        ㅡ>_doument.js
        ㅡ>index.js

       |  ㅡ>styles/...

package.json 파일은 
child_process, fs, promise 에러가 떠서 수정한 상태입니다

{
  "name": "blog_nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "assert": "^2.0.0",
    "browserify-fs": "^1.0.0",
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "child_process": "^1.0.2",
    "crypto-browserify": "^3.12.0",
    "eslint": "8.48.0",
    "eslint-config-next": "13.2.4",
    "https-browserify": "^1.0.0",
    "mongodb": "^6.0.0",
    "net": "^1.0.2",
    "net-browserify": "^0.2.4",
    "next": "13.4.19",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "tls-browserify": "^0.2.2",
    "url": "^0.11.1",
    "util": "^0.12.5"
  },
  "browser": {
    "child_process": false,
    "fs": false,
    "path": false,
    "os": false,
    "net": false,
    "tls": false
  }
}

[codingapple]

pages 폴더의 페이지들에선 getServerSideProps 안에서 db입출력 가능합니다

[Seongjun]

Pages 폴더 안에서 export default async function getServerSideProps(){} 써도 dns 에러가 납니다
import { MongoClient } from "mongodb"; 이 부분에서 에러가 나는 거 같은데 이 부분을 getServerSideProps안에 넣어도 에러가 납니다.
어떻게 해결해야할까요 ㅠㅠ

[codingapple]

https://stackoverflow.com/q/70059702
이런식으로 써야합니다

[Seongjun]

import { MongoClient } from "mongodb";

export default async function Home() {
  const db = client.db("forum");
  let result = await db.collection("post").find().toArray();
  let client = await getServerSideProps();

  return <getServerSideProps item={result} />;
}

export async function getServerSideProps(props) {
  const url =
    "mongodb+srv://admin:qwer1234@cluster0.zqhtykt.mongodb.net/?retryWrites=true&w=majority";
  const options = { useNewUrlParser: true };
  let connectDB;

  if (process.env.NODE_ENV === "development") {
    if (!global._mongo) {
      global._mongo = new MongoClient(url, options).connect();
    }
    connectDB = global._mongo;
  } else {
    connectDB = new MongoClient(url, options).connect();
  }

  return <div>{props.item}</div>;
}

선생님 이렇게 했는데 
Error: Additional keys were returned from `getServerSideProps`. Properties intended for your component must be nested under the `props` key,
e.g.: return { props: { title: 'My Title', content: '...' } } Keys that need to be moved:
$$typeof, type, key, ref, _owner, _store.
이런 에러가 뜹니다. 근데 구글링 해도 모르겠습니다.. 혹시 도움 받을 수 있을까요 ㅠㅠ

[codingapple]

getServerSideProps에서 db 데이터를 뽑아서 return 해주면 
위의 컴포넌트의 props에 보내주는데 
그 props가지고 html에 넣거나 해야합니다  
공식문서에서 getServerSideProps 사용법부터 익혀봅시다

[Seongjun]

넵

[글쓴이]

글