Fleek에서 Next.js를 사용하여 WebRL 단축 프로그램 구축-JS 튜토리얼-php.cn

Building a WebRL shortener with Next.js on Fleek

기존의 URL 단축기는 중앙 집중식 서비스에 의존하기 때문에 검열, 데이터 침해 및 단일 실패 지점에 취약합니다. 분산형 Web3 기반 URL 단축기는 블록체인에 링크 매핑을 저장하고 불변성, 투명성 및 검열 저항을 보장함으로써 이러한 문제를 해결합니다.
이 가이드에서는 Next.js, Ethereum 스마트 계약 및 Fleek의 엣지 최적화 호스팅을 사용하여 완전히 분산된 URL 단축 서비스를 구축하겠습니다. 결국 사용자가 URL을 원활하게 단축, 저장 및 확인할 수 있는 간소화된 Next.js 앱을 갖게 됩니다.

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 Seplia 수도꼭지: 수도꼭지

.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 기능을 안전하게 처리하기 위해 공급자를 두 부분으로 나누는 것입니다.

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에 배포

Edge 런타임 조정:

서버 측 및 동적 경로의 경우 파일 내에서 const 런타임 = '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.플릭 기능 만들기:

// 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!