NFT : Comprendre le concept à l’affichage sur un site web

Depuis quelques années, le mot NFT est devenu un incontournable du monde numérique. On en parle dans les médias, dans les galeries virtuelles et jusque dans les grandes entreprises. Pourtant, lorsqu’on creuse un peu, beaucoup peinent à comprendre ce qui se cache derrière ces trois lettres. Les NFT ne sont pas seulement des images vendues à prix d’or : ils représentent une évolution profonde du web, une nouvelle manière de posséder, d’échanger et d’interagir avec des contenus numériques.

Si vous êtes développeur web, graphiste, ou simplement curieux de comprendre comment ces jetons numériques fonctionnent, ce tutoriel est fait pour vous. Nous allons voir, étape par étape, ce qu’est un NFT, comment il est créé, comment il fonctionne sur la blockchain et surtout, comment il peut être affiché ou exploité sur un site web.

Car au-delà de la spéculation et du buzz, les NFT introduisent une véritable révolution technique : celle du web décentralisé, souvent appelé Web3. Ce nouveau paradigme relie directement la blockchain (où les données sont immuables et transparentes) au web traditionnel que nous utilisons tous les jours.

Qu’est-ce qu’un NFT ? Comprendre la base technique
Comment un NFT est créé : du mint aux métadonnées
Afficher un NFT sur un site web : récupération et intégration
Cas concret : afficher un NFT depuis IPFS
NFT et Web3 : interactions, sécurité et avenir du développement web

Avant de plonger dans la technique, commençons par le commencement : qu’est-ce qu’un NFT, et pourquoi cette notion est-elle si importante dans le monde du web moderne ?

Qu’est-ce qu’un NFT ? Comprendre la base technique

Le terme NFT signifie Non-Fungible Token, que l’on peut traduire par jeton non fongible. Pour comprendre ce que cela signifie, il faut d’abord saisir la différence entre ce qui est fongible et ce qui ne l’est pas.

Un bien fongible est un bien qui peut être échangé contre un autre de même valeur sans différence. Par exemple, une pièce de 1 euro est fongible : peu importe laquelle vous avez, elles ont toutes la même valeur.

Un bien non fongible, au contraire, est unique. Une œuvre d’art, un terrain, une photo personnelle… Ces éléments ont une identité propre. Vous ne pouvez pas échanger un tableau de Van Gogh contre un autre en disant que c’est pareil.

Un NFT fonctionne sur ce même principe : il s’agit d’un actif numérique unique, enregistré sur une blockchain, c’est-à-dire une base de données publique et décentralisée. Ce jeton représente la preuve de propriété d’un élément numérique : une image, une musique, une vidéo, un objet dans un jeu vidéo, ou même un billet d’entrée virtuel.

Les NFT et la blockchain : le duo inséparable

La blockchain est la technologie qui rend les NFT possibles. Il s’agit d’un registre distribué, partagé entre des milliers d’ordinateurs, qui enregistre chaque transaction de manière transparente et infalsifiable.
Chaque bloc contient un ensemble de transactions, et chaque nouveau bloc s’ajoute à la chaîne (d’où le terme blockchain).

Lorsqu’un NFT est créé (on dit souvent « minté »), les informations qui le décrivent sont inscrites dans un smart contract, c’est-à-dire un programme autonome qui fonctionne sur la blockchain.
Ce smart contract gère plusieurs choses :

Qui est le propriétaire du NFT.
Quelle est son adresse unique sur la blockchain.
Où trouver ses métadonnées (c’est-à-dire les informations qui le décrivent).

Ainsi, lorsqu’une personne achète ou vend un NFT, la transaction est enregistrée publiquement dans la blockchain. N’importe qui peut vérifier à tout moment qui possède tel ou tel NFT.

Les standards des NFT : ERC-721 et ERC-1155

Pour que tous les NFT puissent fonctionner de la même manière sur différentes plateformes, il faut des standards. Sur la blockchain Ethereum, qui est la plus utilisée pour les NFT, deux standards principaux existent :

ERC-721 : c’est le standard historique et le plus courant. Chaque NFT y est unique et possède un identifiant distinct.
ERC-1155 : il permet de gérer à la fois des jetons uniques (NFT) et des jetons multiples (fongibles). Il est souvent utilisé dans les jeux vidéo pour représenter à la fois des objets rares et des ressources courantes.

Ces standards définissent les fonctions que doit posséder un smart contract de NFT. Par exemple, ils précisent comment :

Obtenir l’adresse du propriétaire d’un NFT.
Transférer un NFT à quelqu’un d’autre.
Récupérer les métadonnées associées au NFT.

Sans ces standards, chaque projet NFT fonctionnerait différemment, rendant l’interopérabilité impossible. Grâce à eux, un NFT créé sur Ethereum peut être reconnu par un site comme OpenSea, Rarible ou tout autre marketplace compatible.

Les métadonnées : l’ADN du NFT

Un NFT n’est pas en lui-même une image ou une vidéo. En réalité, le NFT est une entrée dans la blockchain contenant un lien vers un fichier JSON (JavaScript Object Notation).
Ce fichier contient les métadonnées du NFT : son nom, sa description, et surtout, le lien vers le média associé (image, audio, etc.).

Prenons un exemple concret. Imaginons un NFT représentant une œuvre numérique appelée « Coucher de soleil sur Mars ». Le fichier JSON pourrait ressembler à ceci :

{
  "name": "Coucher de soleil sur Mars",
  "description": "Une œuvre numérique représentant un coucher de soleil sur la planète rouge.",
  "image": "https://ipfs.io/ipfs/Qm123456789abcdef",
  "attributes": [
    {"trait_type": "Couleur dominante", "value": "Rouge"},
    {"trait_type": "Format", "value": "JPEG"},
    {"trait_type": "Résolution", "value": "3000x2000"}
  ]
}

Dans cet exemple :

Le nom et la description permettent d’afficher des informations textuelles sur le NFT.
Le champ image contient un lien vers le fichier image, souvent stocké sur un service décentralisé comme IPFS(InterPlanetary File System).
Le tableau attributes permet d’ajouter des caractéristiques personnalisées, utiles notamment pour les collections de NFT (par exemple : rareté, couleur, version, etc.).

C’est ce fichier JSON que votre site web devra récupérer et interpréter pour afficher le NFT à l’écran. Nous verrons comment faire cela dans la suite du tutoriel.

La notion de propriété numérique

Posséder un NFT, c’est posséder un jeton de propriété numérique. Attention, cela ne signifie pas toujours que vous possédez les droits d’auteur sur l’œuvre associée.
Ce que vous possédez, c’est la preuve publique et traçable que ce jeton (et les métadonnées qu’il représente) vous appartient.

Prenons un parallèle simple : acheter un NFT revient à acheter un certificat d’authenticité numérique. L’image associée peut être vue par tout le monde, mais vous êtes la seule personne dont l’adresse figure sur la blockchain comme propriétaire de ce certificat.

Cette distinction est essentielle pour comprendre le rôle des NFT dans le web : ils ne cherchent pas à rendre un fichier inaccessible, mais à prouver qui en est le propriétaire légitime.

L’importance des NFT pour le développement web

Vous vous demandez peut-être : quel rapport entre tout cela et le développement web ? La réponse est simple : les NFT ont besoin du web pour exister visuellement.

Les sites web servent d’interface entre la blockchain et les utilisateurs. Lorsqu’un internaute consulte une page affichant un NFT, le site :

Interroge la blockchain pour savoir qui possède le jeton.
Récupère le lien des métadonnées.
Télécharge et affiche l’image ou les informations correspondantes.

Sans cette passerelle, un NFT resterait une donnée abstraite stockée dans une blockchain. C’est donc grâce au développement web que les NFT deviennent visibles, consultables et interactifs.

Les développeurs web jouent ainsi un rôle clé dans le Web3 : ils conçoivent les interfaces qui permettent d’explorer, d’acheter, de vendre et d’interagir avec les NFT.
Des bibliothèques comme Web3.js, Ethers.js ou des API comme Alchemy, Moralis et OpenSea API facilitent cette communication entre le web classique et la blockchain.

Exemple concret : visualiser un NFT sur une page web

Pour illustrer cette interaction, prenons un exemple très simple.
Imaginons que vous vouliez afficher un NFT spécifique sur votre site. Vous connaissez son token ID (identifiant unique) et l’adresse du smart contract qui l’a généré.

Vous pouvez, via une bibliothèque JavaScript, interroger le contrat pour récupérer l’URL du fichier JSON associé. Une fois cette URL obtenue, vous chargez les métadonnées (nom, description, image) et les affichez dans votre interface, comme vous le feriez pour n’importe quel contenu web.

C’est ce que nous verrons plus en détail dans la suite du tutoriel : comment connecter votre site à la blockchain, récupérer les informations d’un NFT, et les afficher dynamiquement à l’écran.

NFT et interopérabilité : un web plus ouvert

L’un des grands atouts des NFT est leur interopérabilité.
Contrairement à une base de données classique hébergée sur un serveur privé, la blockchain est publique. Cela signifie que tous les sites peuvent accéder aux informations d’un NFT, tant qu’ils savent lire les données du smart contract.

Ainsi, un même NFT peut être affiché :

sur une marketplace (comme OpenSea),
sur un site personnel (comme une galerie d’artiste),
ou même dans un jeu vidéo, si ce dernier reconnaît le contrat du NFT.

C’est ce qui rend les NFT si puissants : ils permettent de dissocier le contenu (média) de la preuve de propriété (jeton), et d’afficher cette information n’importe où sur le web.

Un concept simple mais une révolution profonde

Derrière leur apparente simplicité, les NFT redéfinissent plusieurs concepts fondamentaux du web :

La notion de propriété numérique.
La transparence des échanges en ligne.
La désintermédiation (plus besoin de tiers de confiance).
Et surtout, la possibilité d’un web plus ouvert et interconnecté.

En tant que développeur web, comprendre le fonctionnement des NFT, c’est anticiper le futur du web. Car demain, il ne s’agira plus seulement d’afficher des images ou des textes sur des pages, mais de connecter ces pages à des objets numériques uniques, traçables et interopérables.

Comment un NFT est créé : du mint aux métadonnées

Maintenant que vous comprenez ce qu’est un NFT et comment il s’inscrit dans l’écosystème du web, passons à la partie la plus fascinante : sa création technique.

Créer un NFT, c’est ce que l’on appelle le mint (du verbe anglais to mint, qui signifie « frapper une monnaie »). Ce terme n’a pas été choisi au hasard : tout comme une pièce de monnaie est frappée avec un numéro unique, le NFT est généré sur la blockchain avec une identité propre et traçable.

Le mint : l’acte de naissance d’un NFT

Lorsqu’un NFT est « minté », cela signifie qu’un nouveau jeton non fongible est inscrit dans la blockchain. Cet enregistrement crée une preuve d’existence et de propriété unique. Concrètement, le mint réalise trois opérations essentielles :

Il génère un identifiant unique (token ID) pour le NFT.
Il associe cet identifiant à une adresse de propriétaire (celle du créateur ou de l’acheteur).
Il relie cet identifiant à un URI (Uniform Resource Identifier), c’est-à-dire une URL pointant vers les métadonnées du NFT.

Ces trois éléments — ID, propriétaire et URI — sont enregistrés dans la blockchain via un smart contract. Ce contrat agit comme une base de données publique, mais totalement décentralisée.

Les smart contracts : le cœur technique des NFT

Un smart contract est un petit programme stocké sur la blockchain, qui s’exécute automatiquement lorsque certaines conditions sont remplies. Il ne peut pas être modifié une fois publié, ce qui garantit la transparence et la sécurité des transactions.

Les NFT reposent principalement sur le standard ERC-721, qui définit un ensemble de fonctions obligatoires pour tout contrat de ce type. Voici un aperçu simplifié d’un smart contract ERC-721 écrit en Solidity, le langage de programmation d’Ethereum.

Exemple concret d’un smart contract ERC-721

Voici un exemple de contrat très simple, destiné à illustrer les principes de base :

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

// Importation du standard ERC-721 depuis la bibliothèque OpenZeppelin
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract SimpleNFT is ERC721URIStorage, Ownable {
    uint256 private _nextTokenId = 1;

    constructor() ERC721("MonPremierNFT", "MPN") {}

    function mintNFT(address to, string memory tokenURI) public onlyOwner {
        uint256 tokenId = _nextTokenId;
        _nextTokenId++;

        _mint(to, tokenId);
        _setTokenURI(tokenId, tokenURI);
    }
}

ERC721URIStorage est une extension du standard ERC-721. Elle permet d’associer chaque NFT à une URI qui pointe vers ses métadonnées (souvent un fichier JSON).
Ownable rend certaines fonctions accessibles uniquement au propriétaire du contrat, ici celui qui l’a déployé.
Le constructeur ERC721("MonPremierNFT", "MPN") définit le nom et le symbole de la collection de NFT.
La fonction mintNFT() crée un nouveau NFT :
- Elle assigne un tokenId unique.
- Elle indique à qui appartient le NFT (to).
- Elle relie ce NFT à une URI contenant les métadonnées.

Le champ tokenURI est crucial : c’est ce lien qui permettra à votre site web de retrouver l’image et les informations du NFT.
Sans lui, le NFT existerait bien sur la blockchain, mais il serait vide de sens — une coquille sans identité.

Le lien entre le smart contract et les métadonnées

Revenons au concept d’URI (Uniform Resource Identifier). Ce lien est souvent un URL vers un fichier JSON hébergé sur une plateforme décentralisée comme IPFS (InterPlanetary File System).

Pourquoi ne pas stocker directement l’image ou le texte dans la blockchain ?
Tout simplement parce que le stockage sur la blockchain coûte très cher. Chaque octet écrit sur Ethereum a un coût en gas, c’est-à-dire en énergie et en frais de transaction.

C’est pourquoi seules les informations essentielles (comme le lien vers les métadonnées) sont enregistrées sur la blockchain, tandis que le contenu lui-même est stocké ailleurs.

Le schéma est donc le suivant :

Le NFT (jeton) est créé sur la blockchain via le smart contract.
Le contrat stocke une URI.
Cette URI pointe vers un fichier JSON contenant toutes les informations descriptives.
Ce fichier JSON contient lui-même un lien vers le média (image, vidéo, son…).

Exemple de métadonnées JSON d’un NFT

Voici un exemple complet d’un fichier JSON lié à un NFT créé avec notre smart contract :

{
  "name": "Mon Premier NFT",
  "description": "Un NFT créé pour découvrir comment fonctionne le mint et l'affichage sur le web.",
  "image": "https://ipfs.io/ipfs/QmABCDEF123456789",
  "external_url": "https://mon-site.com/mon-premier-nft",
  "attributes": [
    {"trait_type": "Édition", "value": "1/1"},
    {"trait_type": "Créateur", "value": "Alban"},
    {"trait_type": "Date de création", "value": "2025-10-15"}
  ]
}

Dans ce fichier :

name et description servent à afficher le titre et le résumé du NFT.
image pointe vers une ressource stockée sur IPFS.
external_url peut renvoyer vers votre site web (utile pour rediriger les visiteurs vers votre portfolio).
attributes est un tableau facultatif qui permet d’ajouter des caractéristiques personnalisées (comme la rareté ou l’édition).

Ce fichier sera hébergé sur IPFS (ou sur un serveur classique), et son lien complet (https://ipfs.io/ipfs/QmABCDEF123456789) sera placé dans le smart contract comme tokenURI.

IPFS : un stockage décentralisé pour les NFT

IPFS, pour InterPlanetary File System, est un protocole de stockage pair à pair.
Plutôt que d’utiliser une adresse de type https://mon-site.com/fichier.jpg, IPFS utilise un identifiant basé sur le hash du contenu.
Cela signifie que deux fichiers identiques auront toujours le même identifiant, et qu’un fichier ne peut pas être modifié sans changer d’adresse.

L’avantage d’IPFS pour les NFT est immense :

Le contenu reste disponible même si le serveur du créateur disparaît.
L’intégrité des fichiers est garantie par leur empreinte cryptographique.
La décentralisation correspond à la philosophie du web3.

De nombreux projets utilisent IPFS pour stocker les images, vidéos, ou métadonnées de leurs NFT. Cela assure que le lien entre le NFT et son contenu reste valide à long terme.

Comment déployer un smart contract NFT

Pour publier votre propre collection de NFT, il faut déployer votre smart contract sur une blockchain. Les étapes générales sont les suivantes :

Écrire le contrat en Solidity.
Compiler le code avec un outil comme Hardhat ou Remix IDE.
Se connecter à un portefeuille crypto (comme MetaMask).
Déployer le contrat sur la blockchain (par exemple Ethereum, Polygon ou Binance Smart Chain).
Appeler la fonction mintNFT() pour créer votre premier jeton.

Une fois le NFT minté, il apparaîtra sur les explorateurs comme Etherscan ou Polygonscan, où vous pourrez vérifier toutes les transactions et métadonnées liées.

Exemple : mint d’un NFT sur le réseau de test Polygon

Pour éviter les frais réels, vous pouvez vous entraîner sur un réseau de test comme Mumbai (Polygon Testnet).

Imaginons que vous déployiez votre contrat sur ce réseau via Remix. Une fois le contrat en ligne, vous appelez la fonction :

mintNFT("0x1234...abcd", "https://ipfs.io/ipfs/QmABCDEF123456789")

Le premier paramètre (0x1234...abcd) correspond à votre adresse Ethereum.
Le second est l’URL des métadonnées JSON.

Quelques secondes plus tard, votre NFT est créé.
Il possède désormais :

un token ID (ex. : 1)
un propriétaire (vous)
un tokenURI pointant vers les métadonnées.

C’est exactement le même mécanisme utilisé sur le réseau principal, mais sans frais.

Relier le NFT à votre site web

Une fois votre NFT créé, il peut être affiché sur n’importe quel site web.
Pour cela, il faut que le site puisse :

Lire l’adresse du smart contract et le token ID.
Interroger la fonction tokenURI() du contrat.
Charger le fichier JSON correspondant.
Afficher les données (nom, description, image, etc.).

Ces étapes peuvent être réalisées en JavaScript avec des bibliothèques comme Ethers.js ou Web3.js, que nous explorerons dans la prochaine partie. Elles permettent à votre site de communiquer directement avec la blockchain et d’afficher les NFT sans serveur intermédiaire.

Les bonnes pratiques du mint

Avant de passer à la mise en œuvre sur le web, il est important de connaître quelques bonnes pratiques de création de NFT :

Toujours héberger les métadonnées sur IPFS plutôt que sur un serveur centralisé. Cela garantit la pérennité du contenu.
Définir clairement la propriété et les droits d’usage : un NFT représente un titre de propriété, pas nécessairement le droit de reproduction.
Limiter les coûts de gas : privilégiez des blockchains moins chères (Polygon, Arbitrum, Avalanche).
Prévoir une fonction baseURI() dans votre contrat si vous voulez mint plusieurs NFT à partir d’une même collection.

Ces principes garantissent des NFT durables, lisibles et compatibles avec les principales plateformes.

Vers la prochaine étape : afficher un NFT sur un site web

Nous avons maintenant tous les éléments nécessaires pour comprendre le lien entre la blockchain et le web. Un NFT n’est rien d’autre qu’un ensemble de données reliées :

un smart contract qui contient les informations essentielles,
un fichier JSON qui décrit le contenu,
et un média hébergé en ligne.

Afficher un NFT sur un site web : récupération et intégration

Nous avons vu comment un NFT est créé sur la blockchain et relié à des métadonnées via un smart contract. Mais pour qu’il devienne visible et interactif pour les internautes, il faut franchir une étape essentielle : l’affichage sur un site web.

Le web, dans ce contexte, joue le rôle d’une interface de lecture de la blockchain.
Il permet d’extraire les informations d’un NFT, d’en afficher les détails, et même d’interagir avec les portefeuilles des utilisateurs.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Comprendre le lien entre la blockchain et votre site web

Une blockchain comme Ethereum est un réseau décentralisé : les données qu’elle contient ne sont pas accessibles via une simple requête HTTP. Pour communiquer avec elle, il faut passer par un nœud blockchain ou par une API intermédiaire (comme Alchemy ou Infura). Ces outils permettent d’interroger les smart contracts et de récupérer les informations qu’ils stockent.

C’est là qu’interviennent des bibliothèques JavaScript comme Web3.js et Ethers.js.
Elles permettent à votre site web, exécuté dans un navigateur, de se connecter directement à la blockchain, d’appeler les fonctions d’un smart contract, et de lire les données d’un NFT.

Ethers.js : une bibliothèque moderne pour le web3

Ethers.js est aujourd’hui l’une des bibliothèques les plus utilisées pour le développement web3. Elle est légère, simple à utiliser et parfaitement compatible avec les navigateurs modernes.

Pour ce tutoriel, nous allons l’utiliser pour interroger un smart contract ERC-721 et afficher les informations d’un NFT.

Préparer votre environnement

Avant de commencer à coder, il faut quelques éléments :

Un site web fonctionnel (vous pouvez utiliser un simple fichier HTML).
L’adresse du smart contract qui a généré le NFT.
L’identifiant du NFT (token ID).
L’ABI du contrat, c’est-à-dire sa description au format JSON (obtenue sur Etherscan ou Polygonscan).

L’ABI (Application Binary Interface) permet à Ethers.js de savoir comment interagir avec le contrat : quelles fonctions il contient, quels types de données il accepte, et ce qu’il renvoie.

Exemple de page web pour afficher un NFT

Voici un exemple simple d’intégration d’un NFT sur une page HTML.
Ce code peut être exécuté tel quel dans votre navigateur.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Affichage d’un NFT sur le web</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; background: #f6f6f6; padding: 40px; }
    .nft-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 300px; margin: auto; }
    .nft-card img { width: 100%; border-radius: 10px; }
    h2 { margin-top: 15px; }
  </style>
</head>
<body>

  <div class="nft-card" id="nft">
    <p>Chargement du NFT...</p>
  </div>

  <script>
    async function afficherNFT() {
      // Étape 1 : connexion à un fournisseur de données (ici Alchemy)
      const provider = new ethers.JsonRpcProvider("https://polygon-mainnet.g.alchemy.com/v2/demo");

      // Étape 2 : définition du contrat
      const contractAddress = "0x1234...ABCD"; // Remplacez par l'adresse réelle
      const contractABI = [
        "function tokenURI(uint256 tokenId) public view returns (string memory)"
      ];
      const contract = new ethers.Contract(contractAddress, contractABI, provider);

      // Étape 3 : récupération de l’URI du NFT
      const tokenId = 1; // Remplacez par votre token ID
      const tokenURI = await contract.tokenURI(tokenId);

      // Étape 4 : récupération des métadonnées JSON
      const response = await fetch(tokenURI);
      const metadata = await response.json();

      // Étape 5 : affichage dans la page
      document.getElementById("nft").innerHTML = `
        <img src="${metadata.image}" alt="${metadata.name}">
        <h2>${metadata.name}</h2>
        <p>${metadata.description}</p>
      `;
    }

    afficherNFT().catch(console.error);
  </script>

</body>
</html>

Connexion à un fournisseur de données blockchain
La ligne :const provider = new ethers.JsonRpcProvider("https://polygon-mainnet.g.alchemy.com/v2/demo"); permet d’accéder à la blockchain Polygon via un nœud géré par Alchemy.
Vous pouvez remplacer cette URL par celle d’un autre service (Infura, QuickNode, etc.).
Création de l’objet contrat
Ethers.js a besoin de l’adresse du smart contract (contractAddress) et de son ABI (contractABI).
Ici, nous n’avons besoin que d’une seule fonction : tokenURI(tokenId).
Récupération de l’URI du NFT
Cette fonction retourne un lien (souvent IPFS) vers les métadonnées JSON.
Lecture du JSON
Nous utilisons fetch() pour récupérer le fichier JSON, puis nous le transformons en objet JavaScript avec response.json().
Affichage dans la page HTML
Enfin, nous injectons le contenu du NFT (image, nom, description) directement dans la page.

Cas concret : afficher un NFT depuis IPFS

Imaginons que la fonction tokenURI() renvoie cette URL :

ipfs://QmABCDEF1234567890

Les navigateurs ne peuvent pas directement lire un lien commençant par ipfs://.
Il faut donc le transformer pour passer par une passerelle IPFS :

const gatewayURL = tokenURI.replace("ipfs://", "https://ipfs.io/ipfs/");

Ce lien devient alors lisible par le navigateur et utilisable dans votre code.
C’est une étape importante pour que vos utilisateurs puissent afficher les NFT hébergés sur IPFS sans configuration spéciale.

Connecter un portefeuille MetaMask à votre site

L’une des forces du Web3 est de permettre à l’utilisateur de se connecter avec son portefeuille crypto. Grâce à MetaMask, vous pouvez identifier vos visiteurs par leur adresse publique Ethereum et même leur permettre d’interagir avec les NFT.

Voici un petit exemple pour ajouter une connexion MetaMask :

<button id="connectBtn">Se connecter avec MetaMask</button>

<script>
  const connectBtn = document.getElementById("connectBtn");

  connectBtn.addEventListener("click", async () => {
    if (window.ethereum) {
      try {
        const comptes = await window.ethereum.request({ method: "eth_requestAccounts" });
        const adresse = comptes[0];
        connectBtn.innerText = "Connecté : " + adresse.slice(0, 6) + "...";
      } catch (err) {
        alert("Connexion refusée");
      }
    } else {
      alert("Veuillez installer MetaMask");
    }
  });
</script>

Une fois connecté, l’utilisateur pourra interagir avec votre smart contract : vérifier la propriété d’un NFT, transférer un jeton, ou en acheter un.

Afficher plusieurs NFT : créer une galerie dynamique

Il est également possible d’afficher une collection complète de NFT sur votre site.
Pour cela, vous pouvez utiliser une boucle pour parcourir les tokenId de votre contrat :

async function afficherGalerie() {
  const nftContainer = document.getElementById("nft");
  nftContainer.innerHTML = "";

  for (let id = 1; id <= 5; id++) {
    const tokenURI = await contract.tokenURI(id);
    const url = tokenURI.replace("ipfs://", "https://ipfs.io/ipfs/");
    const response = await fetch(url);
    const metadata = await response.json();

    nftContainer.innerHTML += `
      <div class="nft-card">
        <img src="${metadata.image}" alt="${metadata.name}">
        <h2>${metadata.name}</h2>
        <p>${metadata.description}</p>
      </div>
    `;
  }
}

Avec ce simple script, vous obtenez une galerie NFT capable d’afficher automatiquement plusieurs jetons depuis la blockchain.

Afficher les NFT d’un utilisateur connecté

Une autre possibilité consiste à afficher uniquement les NFT appartenant à l’adresse connectée via MetaMask.
Pour cela, il faut :

Obtenir l’adresse de l’utilisateur.
Vérifier quels NFT lui appartiennent via la fonction ownerOf(tokenId) du contrat.

Exemple :

const owner = await contract.ownerOf(id);
if (owner.toLowerCase() === adresse.toLowerCase()) {
  // Ce NFT appartient à l'utilisateur connecté
}

Vous pouvez ainsi personnaliser la page pour afficher uniquement les NFT détenus par le visiteur, un peu comme un profil Web3.

L’importance du développement front-end dans le Web3

Ce que nous venons de voir illustre un point crucial :
sans le développement web, les NFT resteraient invisibles pour la majorité des utilisateurs.

Le rôle du développeur est de rendre la blockchain accessible, lisible et interactive.
Les sites web sont les vitrines du Web3 : ils permettent de visualiser la propriété numérique, de créer des interfaces de vente, et de rendre ces actifs intelligibles pour tous.

C’est une évolution naturelle du métier : le développeur web d’aujourd’hui devient peu à peu un architecte d’interactions décentralisées, reliant les API, la blockchain et l’expérience utilisateur.

Aller plus loin : API et frameworks Web3

Si vous souhaitez construire un site plus robuste autour des NFT, vous pouvez explorer :

Next.js + Ethers.js : pour créer des applications Web3 modernes et réactives.
Alchemy SDK : pour récupérer les NFT d’un utilisateur sans interroger directement la blockchain.
Moralis : pour gérer les comptes, les NFT, et les transactions côté serveur avec une API simplifiée.

Ces outils permettent de gagner du temps et d’intégrer les NFT dans des sites dynamiques sans écrire tout le code de connexion manuellement.

Protéger et optimiser l’affichage des NFT

Quelques recommandations avant de conclure cette section :

Mettez en cache les métadonnées pour éviter de surcharger la blockchain.
Utilisez un CDN (Content Delivery Network) si vous affichez de nombreuses images NFT.
Préparez un affichage de secours (par exemple une miniature générique) au cas où un fichier IPFS serait temporairement indisponible.
Optimisez votre référencement SEO en ajoutant des balises <meta> pertinentes avec le mot clé « NFT » dans vos titres et descriptions.

Nous avons franchi une étape importante : relier le monde de la blockchain à celui du web. Vous savez désormais comment :

interroger un smart contract,
récupérer les métadonnées d’un NFT,
et les afficher sur une page web.

Cette étape transforme le NFT en un objet vivant du web, capable d’être vu, partagé et même manipulé directement par les internautes.

NFT et Web3 : interactions, sécurité et avenir du développement web

Après avoir découvert ce qu’est un NFT, comment il est stocké sur la blockchain, et comment l’afficher sur un site web, il est temps d’aller plus loin. Le développement web ne se limite plus à créer des interfaces statiques : il devient un pont entre l’utilisateur et la blockchain.

Cette dernière partie va vous montrer comment un site web peut interagir directement avec des NFT, comment sécuriser ces interactions, et pourquoi ces technologies redéfinissent peu à peu le métier de développeur web.

Les interactions entre un site web et un NFT

Lorsque vous affichez un NFT sur une page web, vous ne faites qu’en lire les données.
Mais il est aussi possible d’agir sur la blockchain à travers votre site, en écrivant dans un smart contract.

Ces interactions se font en deux catégories :

Lecture (read) : consulter des informations (propriétaire, image, métadonnées…).
Écriture (write) : exécuter une action (transférer un NFT, en créer un nouveau, le mettre en vente…).

Les fonctions d’écriture nécessitent une signature cryptographique via un portefeuille comme MetaMask. Cela garantit que seule la personne détenant la clé privée du NFT peut effectuer une action sur celui-ci.

Exemple : transférer un NFT depuis un site web

Prenons un exemple concret pour comprendre.
Supposons que vous avez déjà un NFT et que vous souhaitez le transférer à un ami directement depuis votre site.

Voici comment cela peut être fait :

async function transfererNFT() {
  if (!window.ethereum) {
    alert("Veuillez installer MetaMask");
    return;
  }

  // Connexion au portefeuille utilisateur
  await window.ethereum.request({ method: "eth_requestAccounts" });
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();

  // Définition du contrat
  const contractAddress = "0x1234...ABCD"; // Adresse de votre contrat NFT
  const contractABI = [
    "function safeTransferFrom(address from, address to, uint256 tokenId) external"
  ];
  const contract = new ethers.Contract(contractAddress, contractABI, signer);

  // Informations du transfert
  const from = await signer.getAddress();
  const to = "0x9876...EFGH"; // Adresse du destinataire
  const tokenId = 1;

  // Exécution de la transaction
  const tx = await contract.safeTransferFrom(from, to, tokenId);
  console.log("Transaction envoyée :", tx.hash);
  await tx.wait();
  alert("NFT transféré avec succès !");
}

Explication :
Le code se connecte à MetaMask, récupère l’adresse de l’utilisateur, puis appelle la fonction safeTransferFrom() du contrat ERC-721.
Cette fonction demande une signature (MetaMask ouvre une fenêtre de confirmation).
Une fois la transaction validée, elle est enregistrée sur la blockchain et le NFT change officiellement de propriétaire.

Connecter un portefeuille complet à votre site web

Nous avons déjà vu comment initier une connexion avec MetaMask. Mais il est aussi possible d’intégrer une connexion automatique au chargement de la page, pour améliorer l’expérience utilisateur.

Voici une version plus complète du script :

async function connecterPortefeuille() {
  if (window.ethereum) {
    const provider = new ethers.BrowserProvider(window.ethereum);
    try {
      const comptes = await window.ethereum.request({ method: "eth_requestAccounts" });
      const adresse = comptes[0];
      console.log("Connecté :", adresse);
      return { provider, adresse };
    } catch (err) {
      console.error("Connexion refusée", err);
      return null;
    }
  } else {
    alert("MetaMask est requis pour continuer");
    return null;
  }
}

Ce type de fonction peut être intégré à votre système d’authentification Web3.
À la place d’un e-mail et d’un mot de passe, l’utilisateur s’identifie grâce à son adresse blockchain.
C’est la base du Web3 Auth, une approche décentralisée de la connexion utilisateur.

Sécurité : bonnes pratiques pour les sites liés aux NFT

Lorsque vous interagissez avec la blockchain, la sécurité devient un enjeu crucial.
Une simple erreur dans votre code JavaScript peut permettre à un pirate de voler des données, de détourner un NFT ou de signer une transaction non désirée.

Voici quelques principes fondamentaux :

Ne jamais stocker de clé privée côté client

Votre site ne doit jamais demander ni enregistrer la clé privée d’un utilisateur.
C’est MetaMask (ou un autre portefeuille sécurisé) qui doit gérer cela.

Utiliser des fournisseurs fiables

Ne vous connectez pas directement à un nœud inconnu.
Utilisez des fournisseurs réputés comme Alchemy, Infura, QuickNode ou Ankr.

Vérifier les contrats avant de les appeler

Avant d’intégrer un contrat à votre site, consultez-le sur Etherscan pour vous assurer qu’il est vérifié et qu’il ne contient pas de code malveillant.

Gérer les erreurs de transaction

Toutes les transactions blockchain peuvent échouer.
Ajoutez des try...catch dans votre code et informez clairement l’utilisateur en cas d’erreur.

Afficher les transactions publiquement

Lorsque vous réalisez une opération (comme un transfert), affichez toujours le lien vers la transaction sur un explorateur blockchain.
Cela rassure l’utilisateur et permet de vérifier que tout s’est bien déroulé.

Les outils et frameworks modernes du Web3

De nombreux outils ont vu le jour pour faciliter l’intégration des NFT dans le développement web.
Voici quelques exemples qui méritent votre attention :

Next.js et React

Ces frameworks JavaScript sont parfaits pour créer des interfaces dynamiques.
Ils permettent d’afficher des NFT en temps réel, d’intégrer des connexions MetaMask, et de créer des expériences immersives.

Wagmi et RainbowKit

Deux bibliothèques très utilisées dans le Web3 moderne.
Elles simplifient la gestion des portefeuilles et la communication avec les smart contracts.
En quelques lignes de code, vous pouvez afficher une galerie NFT complète, connectée à la blockchain.

Thirdweb

Un outil tout-en-un pour les développeurs web.
Il permet de créer, héberger et afficher des NFT sans écrire de smart contract complexe.
Idéal pour ceux qui veulent se concentrer sur le design et l’expérience utilisateur.

Alchemy NFT API

Cette API permet de récupérer les NFT d’un utilisateur, leur image, leurs métadonnées et leur historique, sans écrire de code blockchain.
C’est une excellente option si vous souhaitez afficher des NFT sur un site classique, sans intégrer directement Ethers.js.

NFT et expérience utilisateur : penser l’interface

Un NFT n’est pas qu’un fichier ou un contrat : c’est un objet numérique vivant.
Son intégration sur un site web doit être fluide et agréable.

Pour offrir une bonne expérience utilisateur :

Affichez un aperçu clair du NFT (image, nom, rareté, créateur).
Ajoutez des interactions simples : bouton “Acheter”, “Transférer”, “Afficher sur OpenSea”.
Indiquez le réseau utilisé (Ethereum, Polygon, Solana…).
Proposez des messages explicites lors des transactions : “En attente de confirmation…”, “Transaction réussie !”, etc.

Ces détails inspirent confiance et donnent envie à l’utilisateur de découvrir le Web3 sans crainte.

NFT, propriété numérique et avenir du développement web

Le monde des NFT est encore jeune, mais il a déjà transformé la manière dont on conçoit la propriété numérique.
Aujourd’hui, un NFT peut représenter une œuvre d’art, un billet de concert, un objet dans un jeu vidéo, ou même un diplôme certifié.

Pour les développeurs web, cela ouvre un champ immense :

Création de galeries interactives pour artistes numériques.
Développement de places de marché décentralisées.
Conception de systèmes d’authentification NFT (accès réservé aux détenteurs d’un jeton).
Mise en place de campagnes marketing Web3 (badges, récompenses, collectibles…).

Ces projets exigent de maîtriser à la fois le front-end classique (HTML, CSS, JS) et les outils blockchain. Le développeur web devient alors un développeur Web3, capable de faire dialoguer la blockchain avec le navigateur.

Les limites et les défis du Web3

Malgré son potentiel, le Web3 n’est pas exempt de défis :

Les transactions peuvent être lentes et coûteuses (frais de gaz).
Le stockage décentralisé (IPFS, Arweave) n’est pas toujours stable.
L’interface utilisateur reste souvent complexe pour le grand public.
Les arnaques et contrats non vérifiés sont encore fréquents.

Mais comme toute innovation, ces difficultés sont temporaires.
Les technologies évoluent, les blockchains deviennent plus rapides, et les outils se simplifient.
Dans les prochaines années, le Web3 deviendra aussi accessible que le Web2 l’est aujourd’hui.

Les NFT ne sont pas une simple mode. Ils représentent une évolution logique d’Internet : celle où le contenu numérique devient possédable, traçable et échangeable.

Pour les développeurs web, c’est une opportunité unique d’élargir leurs compétences et de participer à la construction du Web de demain.

Vous avez maintenant toutes les clés pour comprendre techniquement ce qu’est un NFT, comment il est relié à la blockchain, et comment l’afficher ou l’utiliser sur un site web. De la théorie à la pratique, vous avez découvert comment :

lire et afficher un NFT à partir de ses métadonnées,
connecter un portefeuille crypto,
interagir avec un smart contract,
et sécuriser vos échanges avec la blockchain.

Le rôle du développeur web n’est plus seulement de créer des pages, mais de tisser le lien entre le monde du numérique et celui de la propriété décentralisée.
Apprendre à manipuler les NFT, c’est apprendre à bâtir un Web plus libre, où les utilisateurs possèdent réellement leurs créations.

Ce n’est pas un futur lointain : c’est le présent du Web3, et il n’attend plus que vous pour être codé.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr