[javascript] Next.js를 사용하여 이미지 업로드 기능을 구현할 수 있나요?

24 Nov 2023

javascript

이미지 업로드를 위해 다음과 같은 단계를 따를 수 있습니다:

multer와 같은 파일 업로드 미들웨어를 사용하여 이미지를 서버에 업로드합니다. multer는 Node.js의 파일 업로드를 쉽게 처리하도록 도와주는 패키지입니다.
Next.js는 public 폴더를 사용하여 정적 파일을 제공하므로, 업로드된 이미지를 저장할 public/uploads 폴더를 생성합니다.
업로드된 이미지는 서버에 저장된 후, 클라이언트에 URL을 제공합니다. 이 URL을 사용하여 이미지를 렌더링할 수 있습니다.

아래는 Next.js에서 이미지 업로드를 구현하는 예시 코드입니다:

// pages/upload.js

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

const Upload = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageUpload = async () => {
    if (selectedImage) {
      const formData = new FormData();
      formData.append('image', selectedImage);

      try {
        const response = await axios.post('/api/upload', formData);
        console.log('Image uploaded!', response.data.url);
      } catch (error) {
        console.error('Error uploading image:', error);
      }
    }
  };

  const handleImageSelect = (event) => {
    setSelectedImage(event.target.files[0]);
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageSelect} />
      <button onClick={handleImageUpload}>Upload</button>
    </div>
  );
};

export default Upload;

위 코드는 이미지를 선택하고 업로드하는 간단한 컴포넌트입니다. handleImageUpload 함수에서 이미지를 서버에 업로드하고, 응답으로 받은 URL을 콘솔에 출력하도록 구현되어 있습니다. 디자인 및 추가적인 처리는 필요에 따라 개발해주어야 합니다.

위의 예시 코드에서 /api/upload는 이미지를 업로드하기 위한 Next.js API 라우트를 나타냅니다. 서버 측에서는 multer를 이용하여 이미지를 받아서 저장하고, 업로드된 이미지에 대한 URL을 응답으로 제공해야 합니다.

이제 Next.js와 multer를 사용하여 이미지 업로드 기능을 구현할 수 있게 되었습니다. 추가적인 디자인 및 서버 측 로직을 구현할 때는 필요한 패키지와 라이브러리를 설치하여 사용하면 됩니다.