Next.js + MongoDB 연동

---

1. 라이브러리 설치

npm install mongodb

2. DB 연동용 js파일 생성

=> 필자는 root/util/database.js를 만들었음.

3. next.js용 mongoDB 공식코드 입력

import { MongoClient } from 'mongodb'
const url = 'URL'
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 }

 

4. MongoDB 사이트 > Database 메뉴 클릭

 

5. Connect 버튼 클릭

 

6. Connection String 복사

mongodb+srv://admin:<password>@cluster0.12pdnoz.mongodb.net/

 

7. 공식코드의 const url에 붙여넣기

import { MongoClient } from 'mongodb'
const url = 'mongodb+srv://admin:<password>@cluster0.12pdnoz.mongodb.net/'
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 }

 

8. admin : <password> 부분에 Database Access ID / PW 기입

* 꺾새 <> 지워야 함. ex) admin:test

이거 때문에 고생 좀 했던 거는 안 비밀,,,,

 

9. db입출력이 필요한 js파일에서 import

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

=> 경로는 각자 다르게 설정

10. 데이터 가져오는 법

export default async function Home() {
  const db = (await connectDB).db("forum");
  let result = await db.collection("post").find().toArray();
  console.log(result);
  return <div>{result[0].title}</div>;
}

1. 비동기 처리 문법 async / await 사용

=> MongoDB에서 사용 권유

2. connectDB.db("DB 프로젝트 명")

3. db.collection("컬렉션 명"). find(). toArray();

=> 폴더에 있는 모든 데이터를 가져와서 배열로 변환해 달라는 의미.

4. 이제 데이터를 가져다 사용하면 된다!

 

주의

DB입출력 코드는 보안상 조심스럽기 때문에 server Componet 안에서 작성하는 게 바람직하다.

---

원래 타입스크립트로 설정하여 프로젝트를 진행했었는데 mongoDB 가져오는 부분이 타입에러가 계속 발생하는 바람에

과감히 포기하고, js로 넘어왔다 ㅜㅜ 사이드 프로젝트 할 때는 타입스크립트 써보고 싶은데, 생각보다 쉽지는 않네..