Construire un raccourcisseur WebRL avec Next.js sur Fleek

Les raccourcisseurs d'URL traditionnels s'appuient sur des services centralisés, ce qui les rend vulnérables à la censure, aux violations de données et aux points de défaillance uniques. Un raccourcisseur d'URL décentralisé basé sur Web3 résout ces problèmes en stockant les mappages de liens sur la blockchain, garantissant ainsi l'immuabilité, la transparence et la résistance à la censure.
Dans ce guide, nous allons créer un service de raccourcissement d'URL entièrement décentralisé à l'aide de Next.js, des contrats intelligents Ethereum et de l'hébergement optimisé en périphérie de Fleek. À la fin, vous disposerez d'une application Next.js simplifiée qui permet aux utilisateurs de raccourcir, stocker et résoudre les URL de manière transparente.

---

Pourquoi un raccourcisseur d'URL Web3 ?

Avantages clés :

• Décentralisation : Stockez les URL raccourcies sur une blockchain pour plus de résilience et d'immuabilité.
• Résistance à la censure : Aucune autorité seule ne peut supprimer arbitrairement des liens.
• Transparence : Les utilisateurs peuvent vérifier que les URL raccourcies correspondent à la bonne destination.

---

Conditions préalables

Assurez-vous d'avoir :

1. Compétences Frontend : Familiarité avec React ou Next.js.
2. Node.js & npm : installés sur votre système.
3. Compte Fleek et CLI : inscrivez-vous sur Fleek et installez la CLI Fleek.
4. Projet Reown : Créez-en un chez Reown.
5. Test Crypto Wallet : requis pour les interactions contractuelles.
6. Bases du Web3 : Compréhension des contrats intelligents et des principes fondamentaux de la blockchain.

---

Étape 1 : Configuration du projet

• Initialiser un projet Next.js :

npx create-next-app@latest

• Répondez aux invites comme suit :

Project name? web3-url-shortener
Use TypeScript? No
Use ESLint? No
Use Tailwind CSS? Yes
Use `src/` directory? Yes
Use App Router? No
Use Turbopack? No
Customize import alias? No

• Installer les dépendances :

npm install wagmi ethers @tanstack/react-query @rainbow-me/rainbowkit

# fleek-next adapter
npm install @fleek-platform/next

• Assurez-vous que @fleek-platform/next est v2 ou supérieur.
• Connexion à Fleek :

fleek login

• Suivez les instructions à l'écran.
• Créer des répertoires : Dans src/, créez les répertoires lib et abi.
• Exécuter le serveur de développement :

npm run dev

---

Configuration du contrat intelligent

• Code source du contrat :

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

contract UrlShortener {
    // Maps a short code (e.g. "abc123") to a full URL
    mapping(string => string) private shortToLong;

    event URLShortened(string indexed shortCode, string longUrl);

    /**
     * @notice Create a shortened URL by mapping a short code to a long URL.
     * @param shortCode The short code (unique identifier)
     * @param longUrl The long URL to map to
     */
    function setURL(string calldata shortCode, string calldata longUrl) external {
        require(bytes(shortCode).length > 0, "Short code cannot be empty");
        require(bytes(longUrl).length > 0, "Long URL cannot be empty");
        // In a production scenario, you'd probably want some uniqueness checks,
        // or handle collisions differently. For now we allow overwriting.

        shortToLong[shortCode] = longUrl;
        emit URLShortened(shortCode, longUrl);
    }

    /**
     * @notice Retrieve the long URL for a given short code.
     * @param shortCode The short code to look up
     * @return longUrl The long URL that the short code points to
     */
    function getURL(string calldata shortCode) external view returns (string memory) {
        return shortToLong[shortCode];
    }
}

Le contrat intelligent UrlShortener ci-dessus permet aux utilisateurs de créer et de gérer des URL raccourcies. Il mappe les codes courts uniques aux URL longues, permettant un stockage et une récupération efficaces des URL. Les utilisateurs peuvent définir un mappage à l'aide de la fonction setURL et récupérer l'URL d'origine avec getURL. Le contrat comprend des validations de base et émet un événement lorsqu'une nouvelle URL est raccourcie. J'ai déjà déployé mon contrat et l'adresse est : 0x2729D62B3cde6fd2263dF5e3c6509F87C6C05892

• Chaîne :Arbitrum Sepolia Testnet
• Code source ABI : URLShortener
• URL RPC : Obtenir auprès d'Alchemy ou d'un autre fournisseur.
• Robinet Arbitrum Sepolia :Robinet

Configuration .env :

Créez un .env à la racine du projet :

npx create-next-app@latest

---

Configuration de l'ABI et du contrat

• Ajouter ABI :

Créez src/abi/URLShortener.json avec :

Project name? web3-url-shortener
Use TypeScript? No
Use ESLint? No
Use Tailwind CSS? Yes
Use `src/` directory? Yes
Use App Router? No
Use Turbopack? No
Customize import alias? No

• Fichier de configuration du contrat :

Dans src/lib/contract.js :

npm install wagmi ethers @tanstack/react-query @rainbow-me/rainbowkit

# fleek-next adapter
npm install @fleek-platform/next

• Configuration Wagmi :

fleek login

Remplacez {{REOWN-PROJECT-ID}} et {{REOWN-APP-NAME}} par vos coordonnées de Reown.

---

Étape 2 : Construire le frontend

Configuration des fournisseurs :

Ci-dessous, je montre comment configurer correctement les fournisseurs web3 dans une application Next.js pour gérer correctement le rendu côté client.

La clé est de diviser les fournisseurs en deux parties pour gérer en toute sécurité les fonctionnalités Web3 qui doivent s'exécuter uniquement dans le navigateur.

Créez src/lib/providers.js :

npm run dev

Créez src/lib/Web3Providers.jsx :

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

contract UrlShortener {
    // Maps a short code (e.g. "abc123") to a full URL
    mapping(string => string) private shortToLong;

    event URLShortened(string indexed shortCode, string longUrl);

    /**
     * @notice Create a shortened URL by mapping a short code to a long URL.
     * @param shortCode The short code (unique identifier)
     * @param longUrl The long URL to map to
     */
    function setURL(string calldata shortCode, string calldata longUrl) external {
        require(bytes(shortCode).length > 0, "Short code cannot be empty");
        require(bytes(longUrl).length > 0, "Long URL cannot be empty");
        // In a production scenario, you'd probably want some uniqueness checks,
        // or handle collisions differently. For now we allow overwriting.

        shortToLong[shortCode] = longUrl;
        emit URLShortened(shortCode, longUrl);
    }

    /**
     * @notice Retrieve the long URL for a given short code.
     * @param shortCode The short code to look up
     * @return longUrl The long URL that the short code points to
     */
    function getURL(string calldata shortCode) external view returns (string memory) {
        return shortToLong[shortCode];
    }
}

Modifier _app.js :

Dans pages/_app.js :

NEXT_PUBLIC_CONTRACT_ADDRESS=0x2729D62B3cde6fd2263dF5e3c6509F87C6C05892
NEXT_PUBLIC_RPC_URL={{YOUR-ARBITRUM-SEPOLIA-RPC-URL}}

Interface utilisateur principale (pages/index.js) :

Cette page gère la connexion d'un portefeuille, la saisie d'une URL longue et d'un code court, ainsi que l'écriture dans la blockchain. Nous ferons une répartition similaire à ce que nous avons fait ci-dessus. Les principales raisons de cette scission :

• Le code Web3 nécessite window.ethereum qui n'existe que dans le navigateur
• ssr : false empêche le rendu côté serveur du code web3
• Le composant de la page principale peut toujours être rendu par le serveur pour de meilleures performances
• Empêche les erreurs « la fenêtre n'est pas définie »
• Sépare proprement le code réservé au navigateur du code compatible avec le serveur

Dans pages/index.js :

{
  "abi": [
    {
      "anonymous": false,
      "inputs": [
        { "indexed": true, "internalType": "string", "name": "shortCode", "type": "string" },
        { "indexed": false, "internalType": "string", "name": "longUrl", "type": "string" }
      ],
      "name": "URLShortened",
      "type": "event"
    },
    {
      "inputs": [{ "internalType": "string", "name": "shortCode", "type": "string" }],
      "name": "getURL",
      "outputs": [{ "internalType": "string", "name": "", "type": "string" }],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [
        { "internalType": "string", "name": "shortCode", "type": "string" },
        { "internalType": "string", "name": "longUrl", "type": "string" }
      ],
      "name": "setURL",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    }
  ]
}

Créez src/lib/URLShortenerApp.jsx :

import { ethers } from "ethers";
import urlShortenerJson from "../abi/URLShortener.json";

export function getSignerContract(signer) {
  if (!signer) {
    console.error("No signer provided to getSignerContract");
    throw new Error("No signer available");
  }

  const address = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS;
  if (!address) {
    throw new Error("Contract address not configured");
  }

  return new ethers.Contract(address, urlShortenerJson.abi, signer);
}

Une dernière chose est de vous assurer que votre tailwind.config.js correspond à ce qui suit :

import { http} from "wagmi";
import { arbitrumSepolia } from "wagmi/chains";
import { getDefaultConfig } from "@rainbow-me/rainbowkit";

const projectId = {{REOWN-PROJECT-ID}};

export const config = getDefaultConfig({
  appName: {{REOWN-APP-NAME}},
  projectId: projectId,
  chains: [arbitrumSepolia],
  transports: {
    [arbitrumSepolia.id]: http(),
  },
  ssr: false,
});

---

Étape 3 : Déploiement sur Fleek

• Ajuster la durée d'exécution d'Edge :

Pour les routes côté serveur et dynamiques, assurez-vous d'avoir : export const runtime = 'edge' dans les fichiers.

• Construire avec Fleek :

1.Créez l'application :

"use client";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

const Web3Providers = dynamic(() => import("./Web3Providers"), {
  ssr: false,
});

export default function Providers({ children }) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <>{children}</>;
  }

  return <Web3Providers>{children}</Web3Providers>;
}

Cela génère un répertoire .fleek.

2.Créer une fonction Fleek :

// Web3Providers.jsx
"use client";

import { WagmiProvider } from "wagmi";
import "@rainbow-me/rainbowkit/styles.css";
import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "../lib/wagmi";

export default function Web3Providers({ children }) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
        refetchOnWindowFocus: false,
      },
    },
  });

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider
          theme={darkTheme({
            accentColor: "#0E76FD",
            accentColorForeground: "white",
            borderRadius: "large",
            fontStack: "system",
            overlayBlur: "small",
          })}
        >
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

3.Nommez votre fonction (par exemple, web3-url-shortener-next-js).

4.Déployer sur Fleek :

import "../styles/globals.css";
import "@rainbow-me/rainbowkit/styles.css";

import Providers from "../lib/providers";

function App({ Component, pageProps }) {
  return (
    <Providers>
      <Component {...pageProps} />
    </Providers>
  );
}

export default App;

Après un déploiement réussi, Fleek fournira une URL pour accéder à votre application.

---

Conclusion

Vous avez créé et déployé avec succès un raccourcisseur d'URL décentralisé qui :

• Stocke les mappages en chaîne.
• Permet un raccourcissement de liens sans confiance et résistant à la censure.
• Utilise Fleek pour un déploiement périphérique et une expérience Web3 rationalisée.

Cette fondation peut être étendue ou intégrée dans des applications Next.js plus grandes. Expérimentez avec une interface utilisateur personnalisée, suivez les analyses ou intégrez d'autres contrats intelligents pour améliorer votre raccourcisseur d'URL Web3. Voyez à quoi devrait ressembler le résultat final ici : https://shortener.on-fleek.app/

Vous pouvez accéder au dépôt Github pour voir le code complet : https://github.com/tobySolutions/shortener

Ceci a été initialement publié sur le blog Fleek

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!