NEXT.JS 버젼13 MongoDB 연결

따로 백엔드 서버없이 MongoDB만을 연결하여 인스타그램 형식의 웹사이트를 만드려고 한다.

MongoDB 사이트에 가입하고, Atlas에 free-tier 데이터베이스를 하나 배포하자

- 배포된 데이터베이스 이미지

위 이미지의 connect 버튼을 누르면 다양한 방식의 연결 방법을 가이드 해준다.

나는 나의 애플리케이션에 연결할 것이므로 상단의 Drivers를 클릭하여 확인했다.

- connect 버튼 클릭 후 이미지

node.js 환경을 선택하고 가이드대로 mongodb를 설치했다.
그리고 application code를 나의 프로젝트의 파일에 입력하였다.

MongoClient인스턴스의 파라미터에 나의 id와 비밀번호가 입력된 uri등을 입력하는 형태의 코드로 구성되어 있다.

때문에 비밀번호가 노출되지 않도록 환경변수로 관리해주었다.

테스트 api를 작성하고 POSTMAN으로 요청하니 클라우드 데이터베이스에 있는 데이터를 확인할 수 있었다.

- api 요청 후 이미지

npx create-next-app --example with-mongodb mflix

만약 프로젝트를 시작할 때부터 MongoDB를 사용하고자 한다면, NEXTJS 프로젝트를 생성할 때 위와 같은 명령어를 터미널에 입력하면 처음부터 mongoDB에 연결하는 코드가 작성된채로 시작할 수 있다.

첫번째 참조 사이트를 확인하면 친절하게 가이드가 작성되어 있다.

참조 사이트 : https://www.mongodb.com/developer/languages/javascript/nextjs-with-mongodb/

https://www.mongodb.com/atlas?_ga=2.244178050.627074137.1705219925-2047044616.1705219925&_gac=1.153772874.1705219925.CjwKCAiAqY6tBhAtEiwAHeRopShHOm6sA_vlsyzJJhD_y0x8L9QQzEMCzudpcQdqUlqyJEx8aCmKDhoCGqwQAvD_BwE