1. はじめに

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

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

前提条件:

• Next.js の最新バージョンがインストールされています。
• React と Node.js の基礎知識。
ファイルスタック セクションには、
• ファイルスタック アカウントが必要です。

2. 画像を直接アップロードする（ファイルアップロード）

まず、外部サービスを使用せずに Next.js でファイルのアップロードを直接処理する方法を見てみましょう。

ステップ 1: Next.js でアップロード フォームを作成する

画像を選択してアップロードするためのフォームを目的のコンポーネントに作成します。ここでは、useState を使用してファイルを保存し、取得してバックエンドに送信します。

import { useState } から 'react'; デフォルト関数のエクスポート UploadForm() { const [selectedFile, setSelectedFile] = useState(null); const handleFileChange = (イベント) => { setSelectedFile(event.target.files[0]); }; const handleSubmit = async (イベント) => { イベント.preventDefault(); const formData = 新しい FormData(); formData.append('file', selectedFile); const 応答 = await fetch('/api/upload', { メソッド: 'POST'、 本体: フォームデータ、 }); if (response.ok) { console.log('ファイルは正常にアップロードされました'); } それ以外 { console.error('ファイルのアップロード中にエラーが発生しました'); } }; 戻る （

アップロード

); }

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 (
    

Upload

); } ステップ 2: アップロードを処理する API を作成する

次に、バックエンドで画像を処理するためのエンドポイントを Next.js に作成します。 Next.js の API ルートを使用してサーバー側の操作を処理します。

pages/api/upload.js:

にファイルを作成します

'fs' から fs をインポートします。 「パス」からパスをインポートします。 エクスポート const 構成 = { API: { bodyParser: false, // 大きなファイルを処理するために bodyParser を無効にします }、 }; デフォルトの非同期関数ハンドラーをエクスポート(req, res) { if (req.method === 'POST') { const チャンク = []; req.on('データ', (チャンク) => { chunks.push(チャンク); }); req.on('end', () => { const バッファ = Buffer.concat(チャンク); const filePath = path.resolve('.', 'uploads', 'image.png'); // `uploads` フォルダーに保存します fs.writeFileSync(ファイルパス, バッファ); res.status(200).json({ メッセージ: 'ファイルは正常にアップロードされました' }); }); } それ以外 { res.status(405).json({ メッセージ: 'メソッドは許可されていません' }); } }

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 (
    

Upload

); } ステップ 3: アップロード フォルダーを作成する

プロジェクトのルートに「uploads」というフォルダーがあることを確認してください。手動で作成できます:

mkdir アップロード

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 (
    

Upload

); } これにより、画像を選択してサーバーに直接アップロードできるようになりました。

3. Filestack を使用した画像のアップロード

ファイル ホスティング、CDN、効率的な画像処理を提供する

Filestack などの外部サービスを使用したい場合は、次の方法で使用できます。

ステップ 1: ファイルスタックをインストールする

まず、Next.js プロジェクトに Filestack パッケージをインストールする必要があります。

npm インストール filestack-js

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 (
    

Upload

); } ステップ 2: フロントエンドで Filestack をセットアップする

次に、ユーザーが画像を選択してアップロードできるように、コンポーネントに Filestack ウィジェットを設定しましょう。 Filestack にはすぐに使えるウィジェットが用意されているため、これは簡単です。

実装例は次のとおりです:

import { useState } から 'react'; * 'filestack-js' からファイルスタックとしてインポートします。 const client = filestack.init('YOUR_API_KEY'); // API キーに置き換えます デフォルト関数 FilestackUpload() をエクスポート { const [imageUrl, setImageUrl] = useState(''); const handleUpload = async () => { const result = await client.picker({ onUploadDone: (res) => { setImageUrl(res.filesUploaded[0].url); console.log('アップロードされたファイル: ', res.filesUploaded[0].url); }、 }）。開ける（）; }; 戻る （ ); }

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 (
    

Upload

); } ステップ 3: Filestack API キーを取得する

Filestack が機能するには、Filestack でアカウントを作成し、

API キーを生成する必要があります。上記のコードの YOUR_API_KEY を、提供されたものに置き換えます。

ステップ 4: アップロードした画像を表示する

ユーザーが画像をアップロードすると、Filestack によって生成された URL を使用して画像を表示できます:

{imageUrl && }

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 (
    

Upload

); } 4. 結論

それで終わりです！ Next.js アプリケーションで画像のアップロードを処理するには、次の 2 つの方法があります:

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