1. Introdução

Fazer upload de imagens em Next.js é uma tarefa comum no desenvolvimento de aplicações web. Neste tutorial, exploraremos duas abordagens diferentes:

• Fazendo upload de arquivos diretamente para seu back-end (com Next.js).
• Usando o Filestack, um serviço que simplifica o gerenciamento de arquivos na nuvem.

Pré-requisitos:

• Tenha a versão mais recente do Next.js instalada.
• Conhecimento básico de React e Node.js.
• Para a seção Filestack, você precisará de uma conta Filestack.

2. Upload de imagens diretamente (uploads de arquivos)

Primeiro, vamos ver como você pode lidar com uploads de arquivos diretamente em Next.js sem usar serviços externos.

Etapa 1: crie o formulário de upload em Next.js

Crie um formulário no componente desejado para selecionar e fazer upload de uma imagem. Aqui, usamos useState para armazenar o arquivo e fetch para enviá-lo ao backend.

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 (
    

Etapa 2: crie a API para lidar com o upload

Agora, crie um endpoint em Next.js para processar a imagem no backend. Usaremos as rotas API do Next.js para lidar com operações do lado do servidor.

Crie um arquivo em 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' });
  }
}

Etapa 3: crie a pasta de upload

Certifique-se de ter uma pasta chamada uploads na raiz do seu projeto. Você pode criá-lo manualmente:

mkdir uploads

Com isso, agora você pode selecionar uma imagem e carregá-la diretamente para o seu servidor.

3. Carregando imagens com Filestack

Agora, se você preferir usar um serviço externo como o Filestack, que oferece hospedagem de arquivos, CDN e manipulação eficiente de imagens, veja como fazer isso.

Etapa 1: instalar a pilha de arquivos

Primeiro, precisamos instalar o pacote Filestack em seu projeto Next.js.

npm install filestack-js

Etapa 2: configurar o Filestack no frontend

A seguir, vamos configurar o widget Filestack em um componente para que os usuários possam selecionar e fazer upload de imagens. Isso é simples, pois o Filestack fornece um widget pronto para uso.

Aqui está um exemplo de implementação:

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 && }
    
  );
}

Etapa 3: Obtenha sua chave de API Filestack

Para que o Filestack funcione, você precisa criar uma conta no Filestack e gerar sua API Key. Substitua YOUR_API_KEY no código acima pelo fornecido a você.

Etapa 4: exibir a imagem enviada

Depois que o usuário fizer upload de uma imagem, você poderá exibi-la usando a URL gerada pelo Filestack:

{imageUrl && }

4. Conclusão

E é isso! Agora você tem duas abordagens para lidar com uploads de imagens em um aplicativo Next.js:

• Upload direto para seu back-end.
• Upload usando Filestack, que oferece uma solução mais avançada e escalável se você não quiser gerenciar o armazenamento de arquivos sozinho.