몽고DB, 몽구스를 NEXT에서 사용해보자. 초기설정 (첫설정부터 첫 저장까지)

로컬 :
mongodb://localhost:포트번호/데이터베이스이름

ex)
mongodb://localhost:27017/test

atlas경로 :
DB_CONN_STR=mongodb+srv://아이디:비밀번호@cluster0.자기주소.mongodb.net/데이터베이스이름?retryWrites=true&w=majority

Atlas 에서도 작업을 많이들 하지만, 로컬 db 가 작업하기에는 수월하기때문에 개발 환경에서는 로컬db 로 작업을 하는 편이다.

몽구스를 netxt 에서 사용하는 방법은 많이 있겠지만,
나의 경우는 다음과 같다.

yarn add mongoose

api 폴더에
middleware 폴더 생성

db.js,
index.js 파일 생성

db.js

import mongoose from "mongoose";

export async function dbConnect() {
  if (mongoose.connection.readyState >= 1) return;

  return mongoose.connect(process.env.DB_CONN_STR);
}

export function jsonify(obj) {
  return JSON.parse(JSON.stringify(obj));
}

export default async function dbMiddleware(req, res, next) {
  try {
    if (!global.mongoose) {
      global.mongoose == dbConnect();
    }
  } catch (e) {
    console.error(e);
  }
  return next();
}

index.js

import dbMiddleware from "./db";
import nextConnect from "next-connect";

export default function createHandler(...middlewares) {
  return nextConnect().use(dbMiddleware, ...middlewares);
}

api/models 폴더

user.js (테스트 파일인 만큼 모델과 실제 저장하는 부분을 완전 축소해서 테스팅한다.)

import mongoose, { Schema } from "mongoose";

const MODEL_NAME = "User";

const schema = new Schema(
  {
    name: String,
    password : String
  },
  {
    timestamps: true,
  }
);

export default mongoose.models[MODEL_NAME] ||
  mongoose.model(MODEL_NAME, schema, "users");

api/user/index.js

import createHandler from "../middleware";
import User from "../models/user";

const app = createHandler();

app.get(async (req, res) => {
  const users = await User.find({});
  return res.status(200).json({ data: users });
});

app.post(async (req, res) => {
  var users = new User(req.body);
  try {
    const result = await users.save();
    return res.status(200).json(result);
  } catch (error) {
    ...
  }
});

export default app;

pages/test.js

import axios from "axios";
import React from "react";

export default function test() {
  const variables = { name: "테스터", password: "123" };
  const saveBtn = () => {
    axios.post("/api/user", variables).then(function (resp) {
      console.log(resp);
    });
  };
  return (
    <div>
      <button onClick={saveBtn}>저장 테스트</button>
    </div>
  );
}

초기 설정 끝.