Next.js에서 MongoDB find() 쿼리를 사용해 문서 검색하기

1. MongoDB에서 문서 검색하기

MongoDB의 find() 메서드를 사용하면 컬렉션에서 특정 조건에 맞는 문서를 검색할 수 있습니다.

 

find() 메서드 예시

db.collection('kakao').find({ title: '안녕' }).toArray();

kakao 컬렉션에서 title이 안녕인 문서를 검색하는 쿼리입니다. 검색 결과는 배열로 반환됩니다.

 

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

실제 예시를 위해서 사용자가 제목을 입력하면 그 제목에 맞는 문서를 검색해 결과를 화면에 표시하는 간단한 클라이언트 페이지를 만들어보겠습니다.

'use client';

import { useState } from 'react';

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // 사용자 입력 데이터를 API로 전송
    const response = await fetch(`/api/search?title=${title}`, {
      method: 'GET',
    });

    const result = await response.json();

    if (result.success) {
      setDocuments(result.data); // 문서 결과 저장
      setMessage('');
    } else {
      setMessage(`오류 발생: ${result.error}`);
    }
  };

  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>
        <button type="submit" className="bg-blue-500 text-white py-2 px-4 rounded">
          검색하기
        </button>
      </form>

      {message && <p className="mt-4 text-red-500">{message}</p>}

      <div className="mt-8">
        {documents.length > 0 ? (
          <div>
            <h2 className="text-xl mb-2">검색 결과:</h2>
            <ul>
              {documents.map((doc, index) => (
                <li key={index} className="border p-2 mb-2">
                  <h3 className="font-bold">{doc.title}</h3>
                  <p>{doc.content}</p>
                  <p className="text-sm text-gray-500">작성일: {new Date(doc.createdAt).toLocaleDateString()}</p>
                </li>
              ))}
            </ul>
          </div>
        ) : (
          <p>검색 결과가 없습니다.</p>
        )}
      </div>
    </div>
  );
}

• 사용자가 제목을 입력하면 handleSubmit 함수를 통해 입력된 제목을 기반으로 /api/search API에 GET 요청을 보냅니다. 검색 결과가 존재한다면 API에서 검색된 문서를 화면에 출력하게 됩니다.

• input에서 value={title} 잊지 말아주세요~

 

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

마지막으로 클라이언트 페이지에서 받은 제목을 이용해 MongoDB에서 문서를 검색하는 API를 만들면 됩니다. 클라이언트에서 요청을 /api/search로 보냈기 때문에 app/api/search/route.ts로 만들어주겠습니다.

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

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url);
    const title = searchParams.get('title'); // URL에서 title 파라미터 가져오기

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

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

    // MongoDB에서 제목과 일치하는 문서 검색
    const documents = await collection.find({ title: title }).toArray();

    return NextResponse.json({ success: true, data: documents }); // 성공적으로 데이터를 반환
  } catch (error) {
    return NextResponse.json({ success: false, error: error.message }); // 에러 처리
  }
}

서버에서 중요한 건 param을 잘 받아와야 합니다. 따라서 title = searchParams.get('title') 잘 작성해주셔야 됩니다.

 

만약 검색 결과가 존재한다면 데이터를 클라이언트로 전달 할 것이고, 에러가 존재하면 별도의 에러 처리를 할 것입니다. (검색 결과가 없는 경우는 빈 배열을 반환합니다.)

 

find()를 사용하면 조건에 맞는 검색을 쉽게 할 수 있습니다.