Next.js 프로젝트와 MongoDB 연동하기 (2)

Next.js 프로젝트와 MongoDB 연동하기

1. MongoDB에서 데이터 생성하기

먼저, MongoDB에서 데이터를 생성해봅시다. MongoDB에 로그인 후 'collections' 버튼을 클릭하면 데이터베이스의 데이터를 볼 수 있습니다. 현재는 아무 데이터도 없으니, 'Add my own data' 버튼을 눌러 데이터를 추가해봅시다.

 

'forum'이라는 이름의 데이터베이스와 'post'라는 이름의 컬렉션을 만들어봅시다. 데이터베이스를 먼저 만든 후, 그 안에 컬렉션을 만들고, 그 안에 다시 도큐먼트를 추가할 수 있습니다.

도큐먼트에는 원하는 데이터를 자유롭게 추가할 수 있습니다. 예를 들어, 게시글의 제목과 내용을 저장하고 싶다면, 다음과 같이 도큐먼트를 생성할 수 있습니다:

 

 

//json
{
  "title": "안녕",
  "content": "반가워"
}

 

 

 

2. Next.js에서 MongoDB 연결하기

이제 Next.js에서 MongoDB를 연결해봅시다. 먼저, MongoDB 라이브러리를 설치합시다.

 

//bash
npm install mongodb

다음으로, MongoDB를 연결하는 코드를 작성합시다. 이 코드는 데이터베이스에 접속하고, 데이터를 가져오는 등의 작업을 할 수 있게 해줍니다. 이 코드를 재사용하기 위해, 함수로 만들어서 필요할 때마다 호출하면 됩니다.

다음은 MongoDB를 연결하는 코드 예시입니다:

import { MongoClient } from "mongodb";

export default async function Home() {
  const client = await MongoClient.connect(
    "mongodb+srv://admin:qwer1234@dongwok.cxwea9z.mongodb.net/?retryWrites=true&w=majority&appName=dongwok",
    { useNewUrlParser: true }
  );
  const db = client.db("forum");

  db.collection("post").find();
  return <div>hello</div>;
}

위 코드에서는 YOUR_MONGODB_URL에 MongoDB 데이터베이스의 URL을 입력해야 합니다.

 

3. Next.js에서 MongoDB 데이터 사용하기

이제 MongoDB와 연결이 완료되었으니, 실제로 데이터를 가져와서 사용해봅시다.

아래 코드는 connectDB 함수를 import하여 MongoDB에서 데이터를 가져와 출력하는 예시입니다:

import { MongoClient } from "mongodb";
const url = "DB접속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 };

여기서 await connectDB는 MongoDB에 연결하고, db.collection('post').find().toArray()는 'post' 컬렉션의 모든 도큐먼트를 배열로 변환하여 가져옵니다. 이렇게 가져온 데이터를 원하는 방식으로 화면에 출력하면 됩니다.