在 Fleek 上使用 Next.js 建立 WebRL 縮短器

傳統的 URL 縮短程式依賴集中式服務，這使得它們容易受到審查、資料外洩和單點故障的影響。去中心化、Web3 驅動的 URL 縮短器透過在區塊鏈上儲存連結映射來解決這些問題，確保不變性、透明度和抗審查性。
在本指南中，我們將使用 Next.js、以太坊智能合約和 Fleek 的邊緣優化託管來建立完全去中心化的 URL 縮短服務。最後，您將擁有一個簡化的 Next.js 應用程序，使用戶能夠無縫地縮短、儲存和解析 URL。

為什麼選擇 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 專案：

• 回答以下提示：

• 安裝依賴項：

• 確保 @fleek-platform/next 是 v2 或更高版本。
• 登入 Fleek：

• 按照螢幕上的指示操作。
• 建立目錄： 在 src/ 中，建立目錄 lib 和 abi。
• 運行開發伺服器：

智能合約設定

• 合約原始碼：

上述 UrlShortener 智慧合約允許使用者建立和管理縮短的 URL。它將唯一的短代碼映射到長 URL，從而實現高效的 URL 儲存和檢索。使用者可以使用 setURL 函數設定映射並使用 getURL 檢索原始 URL。該合約包括基本驗證，並在新 URL 縮短時發出事件。我已經部署了我的合約，地址是：0x2729D62B3cde6fd2263dF5e3c6509F87C6C05892

• 鏈： Arbitrum Sepolia 測試網
• ABI 原始碼： URLShortener
• RPC URL： 從 Alchemy 或其他供應商取得。
• Arbitrum Sepolia 水龍頭： 水龍頭

.env 設定：

在專案根目錄建立一個.env：

配置ABI和合約

• 新增 ABI：

使用以下指令建立 src/abi/URLShortener.json：

• 合約設定檔：

在 src/lib/contract.js 中：

• Wagmi 配置：

將 {{REOWN-PROJECT-ID}} 和 {{REOWN-APP-NAME}} 替換為您在 Reown 中的詳細資訊。

第 2 步：建構前端

提供者設定：

下面，我將展示如何在 Next.js 應用程式中正確設定 web3 提供程序，以正確處理客戶端渲染。

關鍵是將提供者分為兩部分，以安全地處理必須僅在瀏覽器中執行的 web3 功能。

建立 src/lib/providers.js:

建立 src/lib/Web3Providers.jsx:

修改_app.js:

在pages/_app.js：

主用戶介面（pages/index.js）：

此頁面處理連接錢包、輸入長 URL 和短代碼以及寫入區塊鏈。我們將進行與上方類似的拆分。造成這種分裂的主要原因：

• Web3程式碼需要window.ethereum，它只存在於瀏覽器中
• ssr: false 阻止伺服器端渲染 web3 程式碼
• 主頁元件仍然可以透過伺服器渲染以獲得更好的效能
• 防止「視窗未定義」錯誤
• 將僅瀏覽器的程式碼與伺服器相容的程式碼完全分開

在pages/index.js:

建立 src/lib/URLShortenerApp.jsx:

最後一件事是確保您的 tailwind.config.js 與以下內容相符：

第 3 步：部署到 Fleek

• 調整邊緣運作時：

對於伺服器端和動態路由，請確保您有：在檔案中匯出 const runtime = 'edge'。

• 使用 Fleek 建造：

1.建置應用程式：

這會產生一個 .fleek 目錄。

2.建立 Fleek 函數：

3.為您的函數命名（例如，web3-url-shortener-next-js）。

4.部署到 Fleek：

成功部署後，Fleek 將提供一個 URL 來存取您的應用程式。

結論

您已經成功建置並部署了一個去中心化的 URL 縮短器：

• 在鏈上儲存映射。
• 實現無需信任、抗審查的連結縮短。
• 使用 Fleek 進行邊緣部署和簡化的 Web3 體驗。

這個基礎可以擴展或整合到更大的 Next.js 應用程式中。嘗試自訂 UI、追蹤分析或整合其他智慧合約來增強您的 Web3 URL 縮短器。在此處查看最終結果應如下所示：https://shortener.on-fleek.app/

您可以前往Github倉庫查看完整程式碼：https://github.com/tobySolutions/shortener

本文原發表於 ​​Fleek 部落格

以上是在 Fleek 上使用 Next.js 建立 WebRL 縮短器的詳細內容。更多資訊請關注PHP中文網其他相關文章！