Next.js에서 머신러닝 예측 API 작성

18 Oct 2023

nextjs

머신러닝 예측 API는 클라이언트와 서버 간의 통신을 통해 머신러닝 모델의 예측 결과를 전달하는 방법입니다. 이번에는 Next.js 프레임워크를 사용하여 머신러닝 예측 API를 작성하는 방법을 알아보겠습니다.

1. Next.js 프로젝트 생성

먼저, Next.js 프로젝트를 생성해야 합니다. 아래 명령어를 사용하여 새로운 Next.js 프로젝트를 생성합니다.

npx create-next-app my-app

2. 모델 학습

다음으로, 머신러닝 모델을 학습해야 합니다. 학습된 모델은 예측을 할 때 사용될 것입니다. TensorFlow, PyTorch 등 다양한 머신러닝 프레임워크를 이용하여 모델을 학습할 수 있습니다.

3. API 라우트 생성

Next.js에서 머신러닝 예측을 위한 API를 작성하기 위해, API 라우트를 생성해야 합니다.

pages/api/predict.js 파일을 생성하고, 아래와 같이 코드를 작성합니다.

import { NextApiRequest, NextApiResponse } from 'next'

// 머신러닝 모델 로드 및 예측 코드 작성

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    // 클라이언트로부터 입력 데이터 받기
    const { data } = req.body;

    // 머신러닝 모델을 사용하여 예측 수행

    // 예측 결과 반환
    res.status(200).json({ prediction: prediction });
  } else {
    res.status(405).json({ error: 'Only POST requests are allowed' });
  }
}

위 코드에서 // 머신러닝 모델 로드 및 예측 코드 작성 부분에 학습된 모델을 로드하고 예측을 수행하는 코드를 작성해야 합니다.

4. API 호출하기

이제 작성한 API를 클라이언트에서 호출해 보겠습니다. 예를 들어, pages/index.js 파일을 생성하고 아래와 같이 코드를 작성합니다.

import React, { useState } from 'react'
import axios from 'axios'

export default function Home() {
  const [input, setInput] = useState('');
  const [prediction, setPrediction] = useState('');

  const handlePredict = async () => {
    try {
      const response = await axios.post('/api/predict', { data: input });

      setPrediction(response.data.prediction);
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={handlePredict}>Predict</button>
      <div>{prediction}</div>
    </div>
  )
}

위 코드에서 /api/predict 경로에 POST 요청을 보내고, 입력 데이터를 전달하여 예측 결과를 받아오는 코드입니다.

마무리

위의 단계들을 따라가면 Next.js에서 간단한 머신러닝 예측 API를 작성할 수 있습니다. 학습된 모델을 로드하고 예측하는 부분은 각자의 모델과 데이터에 맞게 구현해야 합니다. Next.js를 사용하면 머신러닝 모델을 바탕으로 동적인 예측 기능을 구현할 수 있습니다.

#+tags: Next.js, API