기존의 URL 단축기는 중앙 집중식 서비스에 의존하기 때문에 검열, 데이터 침해 및 단일 실패 지점에 취약합니다. 분산형 Web3 기반 URL 단축기는 블록체인에 링크 매핑을 저장하고 불변성, 투명성 및 검열 저항을 보장함으로써 이러한 문제를 해결합니다.
이 가이드에서는 Next.js, Ethereum 스마트 계약 및 Fleek의 엣지 최적화 호스팅을 사용하여 완전히 분산된 URL 단축 서비스를 구축하겠습니다. 결국 사용자가 URL을 원활하게 단축, 저장 및 확인할 수 있는 간소화된 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 login
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
입니다.프로젝트 루트에 .env를 만듭니다.
npx create-next-app@latest
다음을 사용하여 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의 세부정보로 바꾸세요.
공급자 설정:
아래에서는 클라이언트 측 렌더링을 올바르게 처리하기 위해 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}}
이 페이지에서는 지갑 연결, 긴 URL 및 단축 코드 입력, 블록체인 쓰기 등을 처리합니다. 위에서 했던 것과 비슷한 분할을 수행하겠습니다. 분할의 주요 이유:
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,
});
서버 측 및 동적 경로의 경우 파일 내에서 const 런타임 = 'edge' 내보내기가 있는지 확인하세요.
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.플릭 기능 만들기:
// 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 단축기를 성공적으로 구축하고 배포했습니다.
이 기반은 더 큰 Next.js 앱으로 확장되거나 통합될 수 있습니다. 사용자 정의 UI를 실험하고, 분석을 추적하고, 기타 스마트 계약을 통합하여 Web3 URL 단축기를 향상하세요. 여기에서 최종 결과가 어떻게 보일지 확인하세요: https://shortener.on-fleek.app/
Github 저장소로 이동하여 전체 코드를 볼 수 있습니다: https://github.com/tobySolutions/shortener
원래 Fleek 블로그에 게시된 내용입니다
위 내용은 Fleek에서 Next.js를 사용하여 WebRL 단축 프로그램 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
