NextJS + TypeScript + MongoDB 연동 초기 설정

MongoDB 세팅

1. 계정 생성

MongoDB에서 회원가입을 진행한다.

무료로 500mb 용량의 DB를 사용할 수 있다.

2. DB 접속용 아이디 / 비밀번호 생성

Database Access에서 아이디, 비밀번호를 만들어준다.
이 때 아이디, 비밀번호는 잘 기억해두자.

생성 후 edit을 눌러 built-in-role을 Atlas admin으로 설정해주자. DB 접속 시 무엇이든 할 수 있게 하기 위함이다.

그 후 Network Access 메뉴를 찾아 IP를 등록한다.
이 때 어디서나 접속해도 상관없다면 Allow access from anywhere을 누르거나 0.0.0.0/0 을 추가한다.

3. 데이터 추가

데이터베이스와 Collection을 만들고, 데이터를 추가해주자.

---

NextJS에서 사용하기

1. MongoDB 라이브러리 설치

npm install mongodb

2. DB 연결

생성한 DB에서 다음 과정을 따른다.
Connect - Drivers - 그 후 url을 복사해주자.

3. 환경 변수 설정

NextJS에서 환경 변수를 사용하기 위해 프로젝트 루트 디렉토리에
.env.local 파일을 만들어준다.
그 안에 복사한 URL을 기입해준다.

MONGODB_URL = mongodb+srv://아이디:비밀번호@cluster0...mongodb.net/?retryWrites=true&w=majority'

4. 전역 타입 및 tsconfig 설정

타입스크립트와 같이 사용하기 위해 몇 가지 설정을 해주어야한다.

_mongo 전역 타입 지정을 위해 다음 위치에 global.d.t.ts파일을 하나 만들어준다.

// 루트 디렉토리/src/type/global.d.t.ts
export {};

declare global {
    var _mongo: Promise<MongoClient> | undefined;
}

tsconfig.json에 다음과 같이 추가해준다.

// tsconfig.json
.. 
"typeRoots": [
      "./src/types",
      "./node_modules/@types"
    ]
...
"include": [
    ".next/types/**/*.ts",
    "src/**/*",
    "global.d.ts"
  ],

5. db.ts 생성

db 연결 코드는 계속해서 사용되므로 util 폴더를 만들고 db.ts 파일을 만든다.

// util/db.ts

import {MongoClient} from 'mongodb'

const url = process.env.MONGODB_URL;

if (!url) {
    throw new Error('The MONGODB_URL environment variable is not defined')
}
let connectDB: Promise<MongoClient>;
if (process.env.NODE_ENV === 'development') {
    if (!global._mongo) {
        global._mongo = new MongoClient(url).connect()
    }
    connectDB = global._mongo
} else {
    connectDB = new MongoClient(url).connect()
}
export {connectDB}

6. 사용 방법

import { connectDB } from "@/util/db";

export default async function Home() {

  const client = await connectDB;
  const db = client.db('db이름');
  let result = await db.collection('collection 이름').find().toArray();
  console.log(result);
  
  return <div>...</div>;
}

위와 같이 사용하면 되며, 자세한 사용법은 추후 다시 정리하도록 하겠다.