1. Introducción

Subir imágenes en Next.js es una tarea común al desarrollar aplicaciones web. En este tutorial, exploraremos dos enfoques diferentes:

• Subir archivos directamente a tu backend (con Next.js).
• Usando Filestack, un servicio que simplifica la gestión de archivos en la nube.

Requisitos previos:

• Tener instalada la última versión de Next.js.
• Conocimientos básicos de React y Node.js.
• Para la sección Filestack, necesitarás una cuenta de Filestack.

2. Cargar imágenes directamente (carga de archivos)

Primero, veamos cómo puedes manejar la carga de archivos directamente en Next.js sin utilizar servicios externos.

Paso 1: cree el formulario de carga en Next.js

Cree un formulario en el componente que desee para seleccionar y cargar una imagen. Aquí usamos useState para almacenar el archivo y buscar para enviarlo al 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 (
    

Paso 2: cree la API para manejar la carga

Ahora, cree un punto final en Next.js para procesar la imagen en el backend. Usaremos las rutas API de Next.js para manejar las operaciones del lado del servidor.

Crear un archivo en páginas/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' });
  }
}

Paso 3: crea la carpeta de carga

Asegúrate de tener una carpeta llamada cargas en la raíz de tu proyecto. Puedes crearlo manualmente:

mkdir uploads

Con esto, ahora puedes seleccionar una imagen y subirla directamente a tu servidor.

3. Subir imágenes con Filestack

Ahora, si prefieres utilizar un servicio externo como Filestack, que ofrece alojamiento de archivos, CDN y manejo eficiente de imágenes, así es como puedes hacerlo.

Paso 1: instalar Filestack

Primero, necesitamos instalar el paquete Filestack en su proyecto Next.js.

npm install filestack-js

Paso 2: configurar Filestack en la interfaz

A continuación, configuremos el widget Filestack en un componente para que los usuarios puedan seleccionar y cargar imágenes. Esto es sencillo, ya que Filestack proporciona un widget listo para usar.

Aquí hay un ejemplo de implementación:

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

Paso 3: Obtenga su clave API de Filestack

Para que Filestack funcione, debe crear una cuenta en Filestack y generar su Clave API. Reemplace YOUR_API_KEY en el código anterior con el que se le proporcionó.

Paso 4: muestra la imagen cargada

Una vez que el usuario sube una imagen, puedes mostrarla usando la URL generada por Filestack:

{imageUrl && }

4. Conclusión

¡Y listo! Ahora tienes dos métodos para manejar la carga de imágenes en una aplicación Next.js:

• Subida directa a tu backend.
• Sube usando Filestack, que te brinda una solución más avanzada y escalable si no deseas administrar el almacenamiento de archivos tú mismo.