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 (
    

Шаг 2. Создайте API для обработки загрузки.

Теперь создайте конечную точку в Next.js для обработки изображения на серверной стороне. Мы будем использовать маршруты API Next.js для обработки операций на стороне сервера.

Создайте файл в 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. Создайте папку для загрузки.

Убедитесь, что в корне вашего проекта есть папка «Загрузки». Вы можете создать его вручную:

mkdir uploads

Теперь вы можете выбрать изображение и загрузить его прямо на свой сервер.

3. Загрузка изображений с помощью Filestack

Теперь, если вы предпочитаете использовать внешний сервис, такой как Filestack, который предлагает хостинг файлов, CDN и эффективную обработку изображений, вы можете это сделать, вот как.

Шаг 1. Установите стек файлов

Во-первых, нам нужно установить пакет Filestack в ваш проект Next.js.

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 (
    

      Upload Image with Filestack
      {imageUrl && }
    
  );
}

Шаг 3. Получите ключ API Filestack.

Чтобы Filestack работал, вам необходимо создать учетную запись на Filestack и сгенерировать API-ключ. Замените YOUR_API_KEY в приведенном выше коде на предоставленный вам.

Шаг 4. Отобразите загруженное изображение.

Как только пользователь загрузит изображение, вы можете отобразить его, используя URL-адрес, сгенерированный Filestack:

{imageUrl && }

4. Заключение

И всё! Теперь у вас есть два подхода к обработке загрузки изображений в приложении Next.js:

• Прямая загрузка на ваш сервер.
• Загрузить с помощью Filestack, который предоставляет вам более продвинутое и масштабируемое решение, если вы не хотите самостоятельно управлять хранилищем файлов.