Fleek 上の Next.js を使用して WebRL 短縮ツールを構築する

従来の URL 短縮ツールは一元化されたサービスに依存しているため、検閲、データ侵害、単一障害点に対して脆弱です。分散型の Web3 主導の URL 短縮機能は、ブロックチェーン上にリンク マッピングを保存し、不変性、透明性、検閲耐性を確保することで、これらの問題に対処します。
このガイドでは、Next.js、Ethereum スマート コントラクト、および Fleek のエッジ最適化ホスティングを使用して、完全に分散化された URL 短縮サービスを構築します。最終的には、ユーザーが URL をシームレスに短縮、保存、解決できる、合理化された Next.js アプリが完成します。

---

Web3 URL 短縮を使用する理由

主な利点:

• 分散化: 回復力と不変性を確保するために、短縮 URL をブロックチェーンに保存します。
• 検閲への抵抗: いかなる単一の当局も恣意的にリンクを削除することはできません。
• 透明性: ユーザーは、短縮 URL が正しい宛先にマッピングされていることを確認できます。

---

前提条件

次のものが揃っていることを確認してください。

1. フロントエンド スキル: React または Next.js に精通していること
2. Node.js と npm: システムにインストールされます。
3. Fleek アカウントと CLI: Fleek にサインアップし、Fleek CLI をインストールします。
4. Reown プロジェクト: Reown で作成します。
5. テスト暗号ウォレット: 契約のやり取りに必要です。
6. Web3 の基礎: スマート コントラクトとブロックチェーンの基礎について理解します。

---

ステップ 1: プロジェクトのセットアップ

• Next.js プロジェクトを初期化します:

npx create-next-app@latest

• 次のようにプロンプ​​トに答えます:

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

• 依存関係をインストールします:

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

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

• @fleek-platform/next が v2 以降であることを確認してください。
• Fleek にログインします:

fleek login

• 画面上の指示に従います。
• ディレクトリの作成: src/ に、ディレクトリ lib および abi を作成します。
• 開発サーバーの実行:

npm run dev

---

スマートコントラクトのセットアップ

• 契約ソースコード:

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

上記の UrlShortener スマート コントラクトを使用すると、ユーザーは短縮 URL を作成および管理できます。固有の短いコードを長い URL にマッピングし、効率的な URL の保存と取得を可能にします。ユーザーは setURL 関数を使用してマッピングを設定し、getURL で元の URL を取得できます。コントラクトには基本的な検証が含まれており、新しい URL が短縮されたときにイベントを発行します。すでに契約をデプロイしており、アドレスは 0x2729D62B3cde6fd2263dF5e3c6509F87C6C05892

です。

• チェーン: Arbitrum Sepolia テストネット
• ABI ソース コード: URLShortener
• RPC URL: Alchemy または別のプロバイダーから取得します。
• Arbitrum Sepolia 蛇口: 蛇口

.env セットアップ:

プロジェクトのルートに .env を作成します:

npx create-next-app@latest

---

ABI と契約の構成

• ABI を追加:

以下を使用して src/abi/URLShortener.json を作成します。

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

• コントラクト構成ファイル:

src/lib/contract.js 内:

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

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

• ワグミ構成:

fleek login

{{REOWN-PROJECT-ID}} と {{REOWN-APP-NAME}} を Reown からの詳細情報に置き換えます。

---

ステップ 2: フロントエンドの構築

プロバイダーのセットアップ:

以下では、クライアント側のレンダリングを正しく処理するために Next.js アプリケーションで Web3 プロバイダーを適切に設定する方法を示します。

重要なのは、ブラウザ内でのみ実行する必要がある Web3 機能を安全に処理するために、プロバイダーを 2 つの部分に分割することです。

src/lib/providers.js を作成します:

npm run dev

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 を変更:

pages/_app.js 内:

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

メイン UI (pages/index.js):

このページでは、ウォレットの接続、長い URL と短いコードの入力、ブロックチェーンへの書き込みを処理します。上記で行ったのと同様の分割を行います。この分割の主な理由:

• Web3 コードにはブラウザ内にのみ存在する window.ethereum が必要です
• ssr: false は、Web3 コードのサーバー側レンダリングを防止します
• メイン ページ コンポーネントは、パフォーマンスを向上させるために引き続きサーバーでレンダリングできます
• 「ウィンドウが定義されていません」エラーを防止します
• ブラウザ専用コードとサーバー互換コードを明確に分離します

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

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

最後に、tailwind.config.js が以下と一致していることを確認します。

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

---

ステップ 3: Fleek へのデプロイ

• エッジ ランタイムの調整:

サーバー側ルートと動的ルートの場合は、ファイル内にexport const runtime = 'edge'があることを確認してください。

• Fleek でビルドする:

1.アプリケーションをビルドします:

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

これにより、.fleek ディレクトリが生成されます。

2.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.関数に名前を付けます (例: web3-url-shortener-next-js)。

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

デプロイメントが成功すると、Fleek はアプリケーションにアクセスするための URL を提供します。

---

結論

次のような分散型 URL 短縮ツールの構築とデプロイが完了しました。

• マッピングをオンチェーンに保存します。
• トラストレスで検閲耐性のあるリンク短縮を可能にします。
• エッジ展開と合理化された Web3 エクスペリエンスに Fleek を使用します。

この基盤は、より大きな Next.js アプリに拡張または統合できます。カスタム UI を試したり、分析を追跡したり、他のスマート コントラクトを統合したりして、Web3 URL 短縮機能を強化します。最終結果がどのようになるかをここで確認してください: https://shortener.on-fleek.app/

完全なコードを表示するには、Github リポジトリにアクセスできます: https://github.com/tobySolutions/shortener

これはもともと Fleek ブログで公開されたものです

以上がFleek 上の Next.js を使用して WebRL 短縮ツールを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。