Erstellen eines WebRL-Shorteners mit Next.js auf Fleek

Herkömmliche URL-Shortener sind auf zentralisierte Dienste angewiesen, was sie anfällig für Zensur, Datenschutzverletzungen und Single Points of Failure macht. Ein dezentraler, Web3-gesteuerter URL-Shortener behebt diese Probleme, indem er Linkzuordnungen in der Blockchain speichert und so Unveränderlichkeit, Transparenz und Zensurresistenz gewährleistet.
In diesem Leitfaden erstellen wir einen vollständig dezentralen URL-Verkürzungsdienst mit Next.js, Ethereum Smart Contracts und dem Edge-optimierten Hosting von Fleek. Am Ende verfügen Sie über eine optimierte Next.js-App, mit der Benutzer URLs nahtlos kürzen, speichern und auflösen können.

---

Warum ein Web3-URL-Shortener?

Hauptvorteile:

• Dezentralisierung:Speichern Sie verkürzte URLs auf einer Blockchain für Stabilität und Unveränderlichkeit.
• Zensurwiderstand:Keine einzelne Behörde kann Links willkürlich entfernen.
• Transparenz: Benutzer können überprüfen, ob verkürzte URLs dem richtigen Ziel zugeordnet werden.

---

Voraussetzungen

Stellen Sie sicher, dass Sie Folgendes haben:

1. Frontend-Kenntnisse: Vertrautheit mit React oder Next.js.
2. Node.js & npm: Auf Ihrem System installiert.
3. Fleek-Konto und CLI: Melden Sie sich bei Fleek an und installieren Sie die Fleek-CLI.
4. Reown-Projekt: Erstellen Sie eines bei Reown.
5. Krypto-Wallet testen: Erforderlich für Vertragsinteraktionen.
6. Web3-Grundlagen: Verständnis von Smart Contracts und Blockchain-Grundlagen.

---

Schritt 1: Projekteinrichtung

• Initialisieren Sie ein Next.js-Projekt:

npx create-next-app@latest

• Beantworten Sie die Fragen wie folgt:

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

• Abhängigkeiten installieren:

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

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

• Stellen Sie sicher, dass @fleek-platform/next v2 oder höher ist.
• Bei Fleek anmelden:

fleek login

• Folgen Sie den Anweisungen auf dem Bildschirm.
• Verzeichnisse erstellen: Erstellen Sie in src/ die Verzeichnisse lib und abi.
• Entwicklungsserver ausführen:

npm run dev

---

Intelligente Vertragseinrichtung

• Vertragsquellcode:

// 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];
    }
}

Mit dem oben genannten UrlShortener-Smart-Vertrag können Benutzer verkürzte URLs erstellen und verwalten. Es ordnet eindeutige Kurzcodes langen URLs zu und ermöglicht so ein effizientes Speichern und Abrufen von URLs. Benutzer können mit der Funktion setURL eine Zuordnung festlegen und mit getURL die Original-URL abrufen. Der Vertrag umfasst grundlegende Validierungen und gibt ein Ereignis aus, wenn eine neue URL gekürzt wird. Ich habe meinen Vertrag bereits bereitgestellt und die Adresse lautet: 0x2729D62B3cde6fd2263dF5e3c6509F87C6C05892

• Kette:Arbitrum Sepolia Testnet
• ABI-Quellcode: URLShortener
• RPC-URL:Von Alchemy oder einem anderen Anbieter beziehen.
• Arbitrum Sepolia Wasserhahn:Wasserhahn

.env-Setup:

Erstellen Sie eine .env im Projektstammverzeichnis:

npx create-next-app@latest

---

ABI und Vertrag konfigurieren

• ABI hinzufügen:

Erstellen Sie src/abi/URLShortener.json mit:

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

• Vertragskonfigurationsdatei:

In src/lib/contract.js:

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

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

• Wagmi-Konfiguration:

fleek login

Ersetzen Sie {{REOWN-PROJECT-ID}} und {{REOWN-APP-NAME}} durch Ihre Daten von Reown.

---

Schritt 2: Aufbau des Frontends

Anbieter-Setup:

Im Folgenden zeige ich, wie man Web3-Anbieter in einer Next.js-Anwendung richtig einrichtet, um das clientseitige Rendering korrekt durchzuführen.

Der Schlüssel liegt in der Aufteilung der Anbieter in zwei Teile, um die Web3-Funktionalität, die nur im Browser ausgeführt werden darf, sicher zu handhaben.

Erstellen Sie src/lib/providers.js:

npm run dev

Erstellen Sie 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];
    }
}

_app.js ändern:

In pages/_app.js:

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

Hauptbenutzeroberfläche (pages/index.js):

Auf dieser Seite wird die Verbindung einer Wallet, die Eingabe einer langen URL und eines Kurzcodes sowie das Schreiben in die Blockchain behandelt. Wir werden eine ähnliche Aufteilung vornehmen wie oben. Die Hauptgründe für diese Spaltung:

• Web3-Code benötigt window.ethereum, das nur im Browser vorhanden ist
• ssr: false verhindert das serverseitige Rendern von Web3-Code
• Die Hauptseitenkomponente kann für eine bessere Leistung weiterhin vom Server gerendert werden
• Verhindert „Fenster ist nicht definiert“-Fehler
• Trennt reinen Browsercode sauber von serverkompatiblem Code

In 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"
    }
  ]
}

Erstellen Sie 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);
}

Eine letzte Sache ist, sicherzustellen, dass Ihre tailwind.config.js mit dem Folgenden übereinstimmt:

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

---

Schritt 3: Bereitstellung auf Fleek

• Edge-Laufzeit anpassen:

Stellen Sie für serverseitige und dynamische Routen sicher, dass Sie Folgendes haben: export const runtime = 'edge' in den Dateien.

• Bauen mit Fleek:

1.Erstellen Sie die Anwendung:

"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>;
}

Dadurch wird ein .fleek-Verzeichnis generiert.

2.Erstellen Sie eine Fleek-Funktion:

// 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.Benennen Sie Ihre Funktion (z. B. web3-url-shortener-next-js).

4.Auf Fleek bereitstellen:

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;

Nach einer erfolgreichen Bereitstellung stellt Fleek eine URL für den Zugriff auf Ihre Anwendung bereit.

---

Abschluss

Sie haben erfolgreich einen dezentralen URL-Shortener erstellt und bereitgestellt, der:

• Speichert Zuordnungen in der Kette.
• Ermöglicht vertrauenswürdiges, zensurresistentes Linkkürzen.
• Verwendet Fleek für die Edge-Bereitstellung und ein optimiertes Web3-Erlebnis.

Diese Grundlage kann erweitert oder in größere Next.js-Apps integriert werden. Experimentieren Sie mit benutzerdefinierten Benutzeroberflächen, verfolgen Sie Analysen oder integrieren Sie andere Smart Contracts, um Ihren Web3-URL-Shortener zu verbessern. Sehen Sie hier, wie das Endergebnis aussehen sollte: https://shortener.on-fleek.app/

Sie können zum Github-Repo gehen, um den vollständigen Code anzuzeigen: https://github.com/tobySolutions/shortener

Dies wurde ursprünglich auf dem Fleek-Blog veröffentlicht

Das obige ist der detaillierte Inhalt vonErstellen eines WebRL-Shorteners mit Next.js auf Fleek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!