NEXTでMongoDBとMongosを使いましょう初期設定(最初の設定から最初の保存まで)

ローカル:
mongodb://localhost:ポート番号/データベース名
ex)
mongodb://localhost:27017/test
atlasパス:
DB CONN STR=mongodb+srv://アイデンティティ:パスワード@クラスタ0.自分の住所.mongodb.Net/データベース名?retryWrites=true&w=majority
Atlasでも多くの作業が行われているが,ローカルdbは容易に動作するため,開発環境では通常ローカルdbが用いられる.
netxtでは多くの方法が使用できます.
私の場合は以下の通りです.

yarn add mongoose

apiフォルダ内
ミドルウェアフォルダの作成
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>
  );
}

初期設定が終了します.