À la découverte d'une tech - Épisode 5 - Le composant Image de Next JS
Вставка
- Опубліковано 28 вер 2024
- ➡️ Problèmes lors du tuto ? Bug ? Erreur ? contacter nous sur le discord: / discord
➡️ Fichiers sources: github.com/lam...
🔗 Formations et Tutoriels :
➡️ Site web: laminutedecode.io
🚀 Me suivre sur les réseaux sociaux :
➡️ INSTAGRAM: / laminutedecode
➡️ TIKTOK: / laminutedecode
➡️ TWITCH: / laminutedecode
➡️ GITHUB: github.com/lam...
✈️ Keys:
#clerk #programmation #developpeur #apprendreacoder #apprendreàcoder #programmer #frenchdeveloper #developpeurweb #programming #jeuxvideo #twitchfr #twitch #html #css #javascript #framework #frontend #backend #backenddeveloper #frontenddeveloper #frontenddev #formation #logiciel #ingenieur #webdesigners #coder #bootstrap #materialize #bulma #greensock #php #mysql #sql #vuejs #react #jquery #apprendreledev #coding #nextjs #kinde
Super petit passage en revue comme d’hab. Il faut noter que ce composant ne fonctionne qu’avec un serveur Node (optims faites côté serveur).
Il me semble qu’on a plus besoin de “stopper” une app au changement du next.config, d’ailleurs, on le voit qu’il reload tout seul ds ton terminal.
Ce composant, c’est un vrai game-changer, c’était tellement lourd de se farcir les srcset et tout le boilerplate d’optimisation avant !
Mais je m’interroge sur ce composant car il me semble qu’il est payant après un certains nombres de traitement d’image non ? Qui peut être très problématique pour des sites qui doivent afficher de nombreuses images ? Je tiens à ouvrir un débat pour comprendre ce sujet qui est très obscure selon moi ! Il y a une méthode très peu mis en avant pour désactiver le traitement de l’image et s’assurer de ne pas réaliser ce processus de traitement
Bonjour ,
Votre question est intéressante.
La balise image est un composant inclus par défaut dans le framework Next.js et est donc gratuite à utiliser en soi, quelle que soit la quantité d’images que vous avez sur votre site. Cependant, ce qui peut entraîner des coûts, c’est l’infrastructure sous-jacente nécessaire pour servir et optimiser ces images.
Par exemple si vous utilisez un CDN comme Vercel (qui est souvent utilisé avec Next.js), AWS, Cloudflare, ou d’autres services pour héberger et servir vos images, des coûts peuvent être associés au volume de données transférées et au nombre de requêtes.
Si vous utilisez une solution d’optimisation d’images externe ou si vous activez certaines fonctionnalités avancées sur votre hébergeur, cela peut également entraîner des coûts supplémentaires.
En gros ce qui va avoir un coût va être le storage que vous allez choisir et le gestionnaires de base de donnée que vous voulez inclure mais en soit la balise image est gratuite peut importe le nombre d’image importer en local par exemple .
En espérant avoir répondue au mieux à votre question
Bien à vous
Jonathan