1. Présentation

Le téléchargement d'images dans Next.js est une tâche courante lors du développement d'applications Web. Dans ce didacticiel, nous explorerons deux approches différentes :

• Téléchargement de fichiers directement sur votre backend (avec Next.js).
• Utilisation de Filestack, un service qui simplifie la gestion des fichiers dans le cloud.

Prérequis :

• Avoir la dernière version de Next.js installée.
• Connaissance de base de React et Node.js.
• Pour la section Filestack, vous aurez besoin d'un compte Filestack.

2. Téléchargement direct d'images (téléchargements de fichiers)

Voyons d'abord comment gérer les téléchargements de fichiers directement dans Next.js sans utiliser de services externes.

Étape 1 : Créez le formulaire de téléchargement dans Next.js

Créez un formulaire dans le composant souhaité pour sélectionner et télécharger une image. Ici, nous utilisons useState pour stocker le fichier et le récupérer pour l'envoyer au 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 (
    

Étape 2 : Créez l'API pour gérer le téléchargement

Maintenant, créez un point de terminaison dans Next.js pour traiter l'image dans le backend. Nous utiliserons les routes API de Next.js pour gérer les opérations côté serveur.

Créez un fichier dans 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' });
  }
}

Étape 3 : Créez le dossier de téléchargement

Assurez-vous d'avoir un dossier appelé uploads à la racine de votre projet. Vous pouvez le créer manuellement :

mkdir uploads

Avec cela, vous pouvez désormais sélectionner une image et la télécharger directement sur votre serveur.

3. Téléchargement d'images avec Filestack

Maintenant, si vous préférez utiliser un service externe tel que Filestack, qui offre un hébergement de fichiers, un CDN et une gestion efficace des images, voici comment procéder.

Étape 1 : Installer Filestack

Tout d'abord, nous devons installer le package Filestack dans votre projet Next.js.

npm install filestack-js

Étape 2 : Configurer Filestack dans le frontend

Ensuite, configurons le widget Filestack dans un composant afin que les utilisateurs puissent sélectionner et télécharger des images. C'est simple, car Filestack fournit un widget prêt à l'emploi.

Voici un exemple de mise en œuvre :

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

Étape 3 : Obtenez votre clé API Filestack

Pour que Filestack fonctionne, vous devez créer un compte sur Filestack et générer votre Clé API. Remplacez YOUR_API_KEY dans le code ci-dessus par celui qui vous a été fourni.

Étape 4 : Afficher l'image téléchargée

Une fois que l'utilisateur télécharge une image, vous pouvez l'afficher à l'aide de l'URL générée par Filestack :

{imageUrl && }

4. Conclusion

Et c'est tout ! Vous disposez désormais de deux approches pour gérer les téléchargements d'images dans une application Next.js :

• Téléchargement direct sur votre backend.
• Téléchargez à l'aide de Filestack, qui vous offre une solution plus avancée et évolutive si vous ne souhaitez pas gérer vous-même le stockage de fichiers.