Next.js での画像のアップロード (ファイル アップロード、ファイルスタック)

1. はじめに

Next.js への画像のアップロードは、Web アプリケーションを開発する際の一般的なタスクです。このチュートリアルでは、次の 2 つの異なるアプローチを検討します。

• ファイルをバックエンドに直接アップロード (Next.js を使用)。
• クラウドでのファイル管理を簡素化するサービスである Filestack を使用します。

前提条件:

• Next.js の最新バージョンをインストールします。
• React と Node.js の基本的な知識。
「ファイルスタック」セクションには、
• ファイルスタック アカウントが必要です。

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 アプリケーションで画像のアップロードを処理するための 2 つの方法が用意されました。

• バックエンドに直接アップロード。
• Filestack を使用してアップロード。ファイル ストレージを自分で管理したくない場合は、より高度でスケーラブルなソリューションが得られます。

以上がNext.js での画像のアップロード (ファイル アップロード、ファイルスタック)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。