Next.js와 @solana/react-hooks를 사용한 Solana 지갑 통합

Next.js(App Router)에서 @solana/client와 @solana/react-hooks를 사용하여 최소한의 Solana 지갑 통합을 설정하세요. 지갑 연결 드롭다운과 SOL 전송 컴포넌트를 생성합니다.

Next.js Hooks App

리소스

사전 요구 사항

Node 20+
npm

Next.js 프로젝트 생성

Terminal

$ npx create-next-app@latest my-app
$ cd my-app

메시지가 표시되면 모든 기본값을 수락하세요(스타터에는 이 튜토리얼에서 간단한 유틸리티 스타일로 사용하는 Tailwind가 포함되어 있습니다).

Solana 종속성 설치

Terminal

$ npm install @solana/client@latest @solana/react-hooks@latest @solana/kit@latest

@latest를 사용하여 최신 상태를 유지하세요. 패키지 매니저에서 피어 경고가 표시되면 현재 테스트된 세트(@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0)로 고정하고 새 릴리스가 나올 때 업그레이드할 수 있습니다.

1. Solana Provider 생성

app/providers.tsx는 간소화된 SolanaProvider props를 사용합니다. 클러스터를 설정하세요(기본값은 Devnet입니다).

2. Layout 업데이트

Providers 컴포넌트로 애플리케이션을 래핑하세요. app/layout.tsx를 업데이트하여 가져오고 사용하세요:

이렇게 하면 전체 앱이 Solana 컨텍스트로 래핑되어 모든 하위 컴포넌트가 지갑 상태와 훅에 액세스할 수 있습니다.

3. 지갑 연결 버튼

useConnectWallet / useDisconnectWallet를 통해 Wallet Standard 지갑을 연결/연결 해제하는 드롭다운입니다.

지갑 드롭다운 옵션

지갑 드롭다운 연결됨

4. SOL 전송

useSolTransfer를 사용하여 모든 주소로 SOL 전송(램포트)을 보냅니다.

SOL 전송 양식 작성됨

SOL 전송 성공

커넥터는 동일한 지갑 표준 세트(Phantom/Solflare/Backpack/자동 검색)입니다. 연결되면 SOL 전송은 연결된 서명자를 사용합니다.

5. 페이지

app/page.tsx는 지갑 연결 및 SOL 전송 컴포넌트를 렌더링합니다(Suspense 불필요):

6. 애플리케이션 실행

Terminal

$ npm run dev

http://localhost:3000을 열고 Devnet 지갑을 연결한 다음 SOL 전송을 보냅니다.

1. Solana Provider 생성

app/providers.tsx는 간소화된 SolanaProvider props를 사용합니다. 클러스터를 설정하세요(기본값은 Devnet입니다).

2. Layout 업데이트

Providers 컴포넌트로 애플리케이션을 래핑하세요. app/layout.tsx를 업데이트하여 가져오고 사용하세요:

이렇게 하면 전체 앱이 Solana 컨텍스트로 래핑되어 모든 하위 컴포넌트가 지갑 상태와 훅에 액세스할 수 있습니다.

3. 지갑 연결 버튼

useConnectWallet / useDisconnectWallet를 통해 Wallet Standard 지갑을 연결/연결 해제하는 드롭다운입니다.

지갑 드롭다운 옵션

지갑 드롭다운 연결됨

4. SOL 전송

useSolTransfer를 사용하여 모든 주소로 SOL 전송(램포트)을 보냅니다.

SOL 전송 양식 작성됨

SOL 전송 성공

커넥터는 동일한 지갑 표준 세트(Phantom/Solflare/Backpack/자동 검색)입니다. 연결되면 SOL 전송은 연결된 서명자를 사용합니다.

5. 페이지

app/page.tsx는 지갑 연결 및 SOL 전송 컴포넌트를 렌더링합니다(Suspense 불필요):

6. 애플리케이션 실행

Terminal

$ npm run dev

http://localhost:3000을 열고 Devnet 지갑을 연결한 다음 SOL 전송을 보냅니다.

providers.tsx

"use client";

import type { SolanaClientConfig } from "@solana/client";
import { SolanaProvider } from "@solana/react-hooks";

const defaultConfig: SolanaClientConfig = {
  cluster: "devnet",
  rpc: "https://api.devnet.solana.com",
  websocket: "wss://api.devnet.solana.com"
};

export default function Providers({ children }: { children: React.ReactNode }) {
  return <SolanaProvider config={defaultConfig}>{children}</SolanaProvider>;
}

Next.js + Solana React Hooks

리소스

사전 요구 사항

Next.js 프로젝트 생성

Solana 종속성 설치

1. Solana Provider 생성

2. Layout 업데이트

3. 지갑 연결 버튼

4. SOL 전송

5. 페이지

6. 애플리케이션 실행

1. Solana Provider 생성

2. Layout 업데이트

3. 지갑 연결 버튼

4. SOL 전송

5. 페이지

6. 애플리케이션 실행

목차