在 Fleek 上使用 Next.js 构建 WebRL 缩短器-js教程-PHP中文网

Building a WebRL shortener with Next.js on Fleek

传统的 URL 缩短程序依赖集中式服务，这使得它们容易受到审查、数据泄露和单点故障的影响。去中心化、Web3 驱动的 URL 缩短器通过在区块链上存储链接映射来解决这些问题，确保不变性、透明度和抗审查性。
在本指南中，我们将使用 Next.js、以太坊智能合约和 Fleek 的边缘优化托管构建完全去中心化的 URL 缩短服务。最后，您将拥有一个简化的 Next.js 应用程序，使用户能够无缝地缩短、存储和解析 URL。

为什么选择 Web3 URL 缩短工具？

主要优点：

去中心化：将缩短的 URL 存储在区块链上，以实现弹性和不变性。
审查制度的抵抗：没有任何一个权威机构可以任意删除链接。
透明度：用户可以验证缩短的 URL 是否映射到正确的目的地。

先决条件

确保您拥有：

前端技能：熟悉 React 或 Next.js。
Node.js 和 npm：安装在您的系统上。
Fleek 帐户和 CLI：在 Fleek 注册并安装 Fleek CLI。
Reown 项目：在 Reown 创建一个项目。
测试加密钱包：合约交互所需。
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

登录后复制

Wagmi 配置：

fleek login

登录后复制

将 {{REOWN-PROJECT-ID}} 和 {{REOWN-APP-NAME}} 替换为您在 Reown 中的详细信息。

第 2 步：构建前端

提供商设置：

下面，我将展示如何在 Next.js 应用程序中正确设置 web3 提供程序，以正确处理客户端渲染。

关键是将提供程序分为两部分，以安全地处理必须仅在浏览器中运行的 web3 功能。

创建 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}}

登录后复制

主用户界面（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

调整边缘运行时：

对于服务器端和动态路由，请确保您有：在文件中导出 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 来访问您的应用程序。