Membina pemendek WebRL dengan Next.js pada Fleek

Pemendek URL tradisional bergantung pada perkhidmatan terpusat, menjadikan mereka terdedah kepada penapisan, pelanggaran data dan satu titik kegagalan. Pemendek URL terdesentralisasi, didorong oleh Web3 menangani isu ini dengan menyimpan pemetaan pautan pada rantaian blok, memastikan kebolehubahan, ketelusan dan rintangan penapisan.
Dalam panduan ini, kami akan membina perkhidmatan memendekkan URL terdesentralisasi sepenuhnya menggunakan Next.js, kontrak pintar Ethereum dan pengehosan Fleek yang dioptimumkan. Pada akhirnya, anda akan mempunyai apl Next.js yang diperkemas yang membolehkan pengguna memendekkan, menyimpan dan menyelesaikan URL dengan lancar.

---

Mengapa Pemendek URL Web3?

Faedah Utama:

• Desentralisasi: Simpan URL yang dipendekkan pada blokchain untuk daya tahan dan kebolehubah.
• Ketahanan Penapisan: Tiada pihak berkuasa boleh sewenang-wenangnya mengalih keluar pautan.
• Ketelusan: Pengguna boleh mengesahkan bahawa URL yang dipendekkan dipetakan ke destinasi yang betul.

---

Prasyarat

Pastikan anda mempunyai:

1. Kemahiran Depan: Kebiasaan dengan React atau Next.js.
2. Node.js & npm: Dipasang pada sistem anda.
3. Akaun Fleek & CLI: Daftar di Fleek dan pasang CLI Fleek.
4. Projek Reown: Buat satu di Reown.
5. Uji Dompet Kripto: Diperlukan untuk interaksi kontrak.
6. Asas Web3: Memahami kontrak pintar dan asas blokchain.

---

Langkah 1: Persediaan Projek

• Mulakan Projek Next.js:

npx create-next-app@latest

• Jawab gesaan seperti berikut:

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

• Pasang Ketergantungan:

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

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

• Pastikan @fleek-platform/next ialah v2 atau ke atas.
• Log masuk ke Fleek:

fleek login

• Ikuti arahan pada skrin.
• Buat Direktori: Dalam src/, buat direktori lib dan abi.
• Jalankan Pelayan Pembangunan:

npm run dev

---

Persediaan Kontrak Pintar

• Kod sumber kontrak:

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

Kontrak pintar UrlShortener di atas membolehkan pengguna membuat dan mengurus URL yang dipendekkan. Ia memetakan kod pendek yang unik kepada URL yang panjang, membolehkan penyimpanan dan pengambilan URL yang cekap. Pengguna boleh menetapkan pemetaan menggunakan fungsi setURL dan mendapatkan semula URL asal dengan getURL. Kontrak termasuk pengesahan asas dan mengeluarkan peristiwa apabila URL baharu dipendekkan. Saya telah menggunakan kontrak saya dan alamatnya ialah: 0x2729D62B3cde6fd2263dF5e3c6509F87C6C05892

• Rantai: Arbitrum Sepolia Testnet
• Kod Sumber ABI: URLShortener
• URL RPC: Dapatkan daripada Alchemy atau pembekal lain.
• Arbitrum Sepolia Faucet: Faucet

Persediaan .env:

Buat .env dalam akar projek:

npx create-next-app@latest

---

Mengkonfigurasi ABI dan Kontrak

• Tambah ABI:

Buat src/abi/URLShortener.json dengan:

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

• Fail Konfigurasi Kontrak:

Dalam src/lib/contract.js:

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

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

• Konfigurasi Wagmi:

fleek login

Ganti {{REOWN-PROJECT-ID}} dan {{REOWN-APP-NAME}} dengan butiran anda daripada Reown.

---

Langkah 2: Membina Frontend

Persediaan Pembekal:

Di bawah, saya menunjukkan cara untuk menyediakan penyedia web3 dengan betul dalam aplikasi Next.js untuk mengendalikan pemaparan sisi klien dengan betul.

Kuncinya ialah membahagikan penyedia kepada dua bahagian untuk mengendalikan fungsi web3 dengan selamat yang mesti dijalankan hanya dalam penyemak imbas.

Buat src/lib/providers.js:

npm run dev

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

Ubah suai _app.js:

Dalam halaman/_app.js:

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

UI utama (halaman/index.js):

Halaman ini mengendalikan penyambungan dompet, memasukkan URL yang panjang dan kod pendek, dan menulis ke rantaian blok. Kami akan melakukan pembahagian yang serupa dengan apa yang kami lakukan di atas. Sebab utama perpecahan ini:

• Kod Web3 memerlukan window.ethereum yang hanya wujud dalam penyemak imbas
• ssr: false menghalang pemaparan sebelah pelayan kod web3
• Komponen halaman utama masih boleh diberikan pelayan untuk prestasi yang lebih baik
• Menghalang ralat "tetingkap tidak ditakrifkan"
• Memisahkan kod penyemak imbas sahaja daripada kod serasi pelayan

Dalam halaman/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"
    }
  ]
}

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

Satu perkara terakhir ialah memastikan bahawa tailwind.config.js anda sepadan dengan perkara di bawah:

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

---

Langkah 3: Menggunakan Fleek

• Laraskan Masa Jalanan Tepi:

Untuk laluan sebelah pelayan dan dinamik, pastikan anda mempunyai: export const runtime = 'edge' dalam fail.

• Bina dengan Fleek:

1.Bina Aplikasi:

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

Ini menjana direktori .fleek.

2.Buat Fungsi 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.Namakan fungsi anda (cth., web3-url-shortener-next-js).

4.Kerahkan ke 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;

Selepas penggunaan berjaya, Fleek akan menyediakan URL untuk mengakses aplikasi anda.

---

Kesimpulan

Anda telah berjaya membina dan menggunakan pemendek URL terdesentralisasi yang:

• Menyimpan pemetaan pada rantaian.
• Mendayakan pemendekkan pautan tanpa amanah dan tahan penapisan.
• Menggunakan Fleek untuk penggunaan kelebihan dan pengalaman Web3 yang diperkemas.

Asas ini boleh dipanjangkan atau disepadukan ke dalam Aplikasi Next.js yang lebih besar. Eksperimen dengan UI tersuai, analisis jejak atau integrasikan kontrak pintar lain untuk meningkatkan pemendek URL Web3 anda. Lihat rupa keputusan akhir di sini: https://shortener.on-fleek.app/

Anda boleh pergi ke repo Github untuk melihat kod penuh: https://github.com/tobySolutions/shortener

Ini pada asalnya diterbitkan di blog Fleek

Atas ialah kandungan terperinci Membina pemendek WebRL dengan Next.js pada Fleek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!