Next.js에서 MongoDB를 사용한 데이터 저장 간단히 구현하기

MongoDB에 데이터를 삽입하는 간단한 CRUD 작업에 대한 설명입니다.

문서에서는 사용자가 입력한 제목과 내용을 MongoDB kakao 컬렉션에 저장하는 간단한 클라이언트 페이지와 API 엔드포인트를 만드는 과정을 다룹니다.

 

1. MongoDB에 데이터 삽입하기

MongoDB에 데이터를 삽입하기 위해서는 insertOne() 메서드를 사용합니다. 이 메서드를 사용해 사용자로부터 입력받은 제목과 내용을 데이터베이스의 컬렉션에 저장할 수 있습니다.

 

2. 사용자 입력을 받는 클라이언트 페이지 만들기

간단한 폼을 만들어 사용자가 제목과 내용을 입력하고 제출할 수 있는 클라이언트 페이지를 만듭니다.

'use client';

import { useState } from 'react';

export default function Home() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // 사용자 입력 데이터를 API로 전송
    const response = await fetch('/api/submit-data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ title, content }),
    });

    const result = await response.json();

    // 성공 여부에 따라 메시지 출력
    if (result.success) {
      setMessage('문서가 성공적으로 저장되었습니다!');
    } else {
      setMessage(`오류 발생: ${result.error}`);
    }

    // 입력 필드 초기화
    setTitle('');
    setContent('');
  };
  return (
    <div className="p-8">
      <h1 className="text-2xl mb-4">문서 삽입 예제</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-lg">제목:</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="border p-2 w-full"
            required
          />
        </div>
        <div>
          <label className="block text-lg">내용:</label>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            className="border p-2 w-full"
            required
          />
        </div>
        <button type="submit" className="bg-blue-500 text-white py-2 px-4 rounded">
          저장하기
        </button>
      </form>
      {message && <p className="mt-4 text-green-500">{message}</p>}
    </div>
  );
}

• 사용자는 제목과 내용을 입력합니다.

• handleSubmit 함수가 호출되면 입력한 데이터를 POST 요청으로 /api/submit-data 엔드포인트에 전송합니다.

• 성공적으로 데이터가 저장되면 메시지가 화면에 표시됩니다.

 

3. API 엔드포인트 구축: route.ts

다음으로, 사용자가 입력한 데이터를 MongoDB kakao 컬렉션에 저장하는 API 엔드포인트를 만듭니다.

경로는 app/api/submit-data/route.ts로 진행하겠습니다.

client body에 title, content를 담아서 전달했고 서버에서 title, content를 받았습니다. 만약 title 또는 content가 없다면 ‘제목과 내용을 입력해주세요.’ 라는 메시지를 클라이언트에 보내버리겠죠.

 

성공하면 kakao라는 collection에 입력한 title과 content가 저장될 것입니다.

import { NextResponse } from 'next/server';
import clientPromise from '@/lib/mongodb';

export async function POST(request: Request) {
  try {
    const { title, content } = await request.json(); // 요청 본문에서 title, content 추출

    if (!title || !content) {
      return NextResponse.json({ success: false, error: '제목과 내용을 입력해주세요.' });
    }

    const client = await clientPromise; // MongoDB 클라이언트 연결
    const db = client.db();
    const collection = db.collection('kakao'); // 'kakao' 컬렉션 사용

    // MongoDB에 데이터 삽입
    await collection.insertOne({ title, content, createdAt: new Date() });

    return NextResponse.json({ success: true }); // 성공적으로 저장되었음을 응답
  } catch (error) {
    return NextResponse.json({ success: false, error: error.message }); // 에러 처리
  }
}

• MongoDB의 insertOne을 사용해 간단하게 데이터를 삽입할 수 있었습니다.