[MongoDB] Next.js 에서 MongoDB 사용하기 (+ Dynamic Route 에서 DB 데이터 사용하는 법)

1. MongoDB 라이브러리 설치

npm install mongodb

: Next.js 작업 폴더를 열어 라이브러리를 설치한다.

 

 

2. DB 연결 함수를 담을 js 파일 만들기

긴 코드를 따로 파일을 만들어 export 하여 사용함으로써

- 재사용이 간편함

- 컴포넌트마다 DB 연결 코드를 작성하면, 새로고침 할 때 마다 connet 를 계속함 → DB 에 부담
  → Next.js 서버 띄울 때 1번만 실행하면 좋기 때문에 따로 파일을 만드는 것이 나음

 

• /util/database.js

// database.js
import { MongoClient } from "mongodb"
  
const url = '';
const options = { useNewUrlParser: true };
let connetDB;

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

export {connetDB};

• url 변수에는 mongoDB 의 connect 버튼에서 가져온 url 을 넣으면 된다. (Database>connet>Connect to your application)
• connetDB 라는 변수에 저장해 놓고 쓰면 매번 실행되지 않는다.
• if 조건문에서 'development' 로 나눈 이유는 ...
  Next.js 의 경우 개발환경에서 파일을 저장할 때마다 자바스크립트 파일이 재실행되기 때문에
  MongoClient.connet 가 동시에 여러개 실행될 수 있다 → DB 입출력 느려짐
  이를 방지하기 위해 global 이라는 전역변수에 보관하여 중복 실행을 막는다.

 

 

3. DB 연결이 필요한 곳에서 함수 가져다 쓰기

import { connetDB } from "@/util/database"

export default async function Home() {
  const client = await connetDB;
  const db = client.db('Database 이름');
  let result = await db.collection('Collection 이름').find().toArray();

  return (
    <div>안녕</div>
  )
}

• DB 연결 코드는 server component 안에서만 사용하는 것이 좋다. (* client component 안에 적으면 사용자도 볼 수 있기 때문)
• .find() 를 사용하면 collection 에 있던 모든 document 출력이 가능하다.
• await 를 꼭 붙여서 async 함수 안에서 사용해야 한다.

 

Dynamic Route 에서 DB 사용하는 방법

import { connetDB } from "@/util/database";
import { ObjectId } from "mongodb";

export default async function Detail(props) {
  const client = await connetDB;
  const db = client.db('Database 이름');
  let result = await db.collection('Collection 이름').findOne({_id : new ObjectId(props.params.id)});

  return (
    <div>
      <h4>상세페이지</h4>
      <h4>{result.title}</h4>
      <p>{result.content}</p>
    </div>
  )
};

• 위의 .find() 는 전체 데이터들을 불러오지만, 하나의 데이터만 찾고 싶을 때는 .findOne() 을 사용하면 된다.
• Detail 컴포넌트는 Dynamic Route 인 /[id]/page.jsx 에 있는 것으로,
  Detail 컴포넌트의 파라미터 props 를 통해 id 값을 가져와 그 값과 일치하는 데이터를 찾는다.
  (* id 값은 사용자가 링크를 클릭했을 때 URL 에 표시된다.)
• _id 값은 mongoDB 에서 document 를 생성할 때 자동으로 부여해주는 고유값으로,
  해당 값으로 document 를 찾고 싶으면 상단에서 ObjectId 를 import 해와서 사용하면 된다.