Next.js에 이미지 업로드(파일 업로드, 파일 스택)

1. 소개

Next.js에 이미지를 업로드하는 것은 웹 애플리케이션을 개발할 때 일반적인 작업입니다. 이 튜토리얼에서는 두 가지 접근 방식을 살펴보겠습니다.

• 파일을 직접 업로드 백엔드(Next.js 사용)
• 클라우드에서 파일 관리를 간편하게 해주는 서비스 Filestack을 이용해보세요.

전제 조건:

• Next.js 최신 버전을 설치하세요.
• React와 Node.js에 대한 기본 지식
• Filestack 섹션의 경우 Filestack 계정이 필요합니다.

2. 이미지 직접 업로드(파일 업로드)

먼저 외부 서비스를 사용하지 않고 Next.js에서 직접 파일 업로드를 처리하는 방법을 살펴보겠습니다.

1단계: Next.js에서 업로드 양식 만들기

원하는 구성요소에 양식을 작성하여 이미지를 선택하고 업로드하세요. 여기서는 useState를 사용하여 파일을 저장하고 가져와서 백엔드로 보냅니다.

import { useState } from 'react';

export default function UploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', selectedFile);

    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      console.log('File uploaded successfully');
    } else {
      console.error('Error uploading file');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

2단계: 업로드를 처리할 API 만들기

이제 백엔드에서 이미지를 처리하기 위해 Next.js에 엔드포인트를 생성합니다. 서버 측 작업을 처리하기 위해 Next.js의 API 경로를 사용할 것입니다.

pages/api/upload.js에 파일 만들기:

import fs from 'fs';
import path from 'path';

export const config = {
  api: {
    bodyParser: false, // Disable bodyParser to handle large files
  },
};

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const chunks = [];

    req.on('data', (chunk) => {
      chunks.push(chunk);
    });

    req.on('end', () => {
      const buffer = Buffer.concat(chunks);
      const filePath = path.resolve('.', 'uploads', 'image.png'); // Saves to the `uploads` folder

      fs.writeFileSync(filePath, buffer);
      res.status(200).json({ message: 'File uploaded successfully' });
    });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

3단계: 업로드 폴더 생성

프로젝트 루트에 uploads라는 폴더가 있는지 확인하세요. 수동으로 생성할 수 있습니다:

mkdir uploads

이제 이미지를 선택하여 서버에 직접 업로드할 수 있습니다.

3. Filestack으로 이미지 업로드

이제 파일 호스팅, CDN 및 효율적인 이미지 처리를 제공하는 Filestack과 같은 외부 서비스를 사용하려는 경우 다음 방법을 따르세요.

1단계: 파일스택 설치

먼저 Next.js 프로젝트에 Filestack 패키지를 설치해야 합니다.

npm install filestack-js

2단계: 프런트엔드에서 Filestack 설정

다음으로 사용자가 이미지를 선택하고 업로드할 수 있도록 구성 요소에 Filestack 위젯을 설정해 보겠습니다. Filestack은 즉시 사용 가능한 위젯을 제공하므로 이는 간단합니다.

다음은 구현 예입니다.

import { useState } from 'react';
import * as filestack from 'filestack-js';

const client = filestack.init('YOUR_API_KEY'); // Replace with your API Key

export default function FilestackUpload() {
  const [imageUrl, setImageUrl] = useState('');

  const handleUpload = async () => {
    const result = await client.picker({
      onUploadDone: (res) => {
        setImageUrl(res.filesUploaded[0].url);
        console.log('File uploaded: ', res.filesUploaded[0].url);
      },
    }).open();
  };

  return (
    <div>
      <button onClick={handleUpload}>Upload Image with Filestack</button>
      {imageUrl && <img src={imageUrl} alt="Uploaded Image" />}
    </div>
  );
}

3단계: Filestack API 키 받기

Filestack이 작동하려면 Filestack에 계정을 만들고 API 키를 생성해야 합니다. 위 코드의 YOUR_API_KEY를 제공된 코드로 바꾸세요.

4단계: 업로드된 이미지 표시

사용자가 이미지를 업로드하면 Filestack에서 생성된 URL을 사용하여 표시할 수 있습니다.

{imageUrl && <img src={imageUrl} alt="Uploaded Image" />}

4. 결론

그리고 그게 다입니다! 이제 Next.js 애플리케이션에서 이미지 업로드를 처리하는 두 가지 접근 방식이 있습니다.

• 백엔드에 직접 업로드
• Filestack을 사용하여 업로드하면 파일 저장소를 직접 관리하고 싶지 않은 경우 더욱 발전되고 확장 가능한 솔루션을 얻을 수 있습니다.

위 내용은 Next.js에 이미지 업로드(파일 업로드, 파일 스택)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!