Next.js와 @solana/kit을 사용한 Solana 지갑 통합

Next.js(App Router)에서 @solana/kit, kit 플러그인, @solana/react를 사용하여 최소한의 Solana 지갑 통합을 설정합니다. 지갑 연결 드롭다운과 SOL 전송 컴포넌트를 만들게 됩니다.

Next.js Kit App

Next.js 프로젝트 생성

Terminal

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

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

스캐폴드 수정 사항 두 가지

기본 create-next-app 출력은 이 튜토리얼을 위해 두 가지 작은 변경이 필요합니다:

tsconfig.json에서 "target": "ES2020"(또는 이후 버전)으로 설정하세요. 전송 금액은 ES2020이 필요한 1_000_000_000n과 같은 bigint 리터럴을 사용합니다.
app/globals.css에서 생성된 @media (prefers-color-scheme: dark) 블록과 body 배경 규칙을 제거하세요. 이 UI는 라이트 모드 전용이며, 다크 모드 기본값이 bg-white 유틸리티를 재정의하여 다크 모드에서 페이지를 읽기 어렵게 만들 수 있습니다.

Solana 의존성 설치

Terminal

$ npm install @solana/kit @solana/kit-plugin-rpc @solana/kit-plugin-wallet @solana/react @solana-program/system

이 튜토리얼은 Kit 7+, 0.13+ 버전의 @solana/kit-plugin-* 패키지(@solana/kit-plugin-wallet의 경우 0.14+), 그리고 @solana/react 7+를 대상으로 합니다.

1. Solana Provider 생성

app/providers.tsx는 모듈 스코프에서 클라이언트를 하나 생성하고 ClientProvider로 제공합니다. walletSigner 플러그인은 연결된 지갑을 수수료 지불자 및 신원으로 설정합니다. 컴포넌트가 useClient를 타입 지정할 수 있도록 클라이언트 타입을 내보내세요.

2. 레이아웃 업데이트

Providers 컴포넌트로 애플리케이션을 감싸세요. app/layout.tsx를 업데이트하여 가져오기(import) 및 사용:

이렇게 하면 전체 앱이 Solana 컨텍스트로 감싸져 모든 하위 컴포넌트에서 클라이언트와 지갑 훅에 접근할 수 있습니다.

3. 지갑 연결 버튼

Wallet Standard 지갑을 연결/해제하는 드롭다운입니다. useWallets는 브라우저에서 감지된 지갑 목록을 반환하고, useConnect / useDisconnect는 ActionResult를 반환합니다. 이 컴포넌트는 dispatch, isRunning, error 필드를 사용합니다. 모든 지갑 훅은 첫 번째 인수로 클라이언트를 받으므로, 먼저 useClient<AppClient>()로 클라이언트를 가져오세요.

지갑 드롭다운 옵션

지갑 드롭다운 연결됨

4. SOL 전송

@solana-program/system으로 전송 명령어를 생성하고 client.sendTransaction을 통해 전송합니다. 연결된 지갑이 서명하고 수수료를 지불합니다.

SOL 전송 양식 작성됨

SOL 전송 성공

지갑은 Wallet Standard 감지를 통해 제공됩니다. 연결되면 SOL 전송 시 연결된 서명자가 수수료 지불자로 사용됩니다.

5. 페이지

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

6. 애플리케이션 실행

Terminal

$ npm run dev

http://localhost:3000을 열고, Devnet 지갑을 연결한 후 SOL을 전송해 보세요.

1. Solana Provider 생성

2. 레이아웃 업데이트

Providers 컴포넌트로 애플리케이션을 감싸세요. app/layout.tsx를 업데이트하여 가져오기(import) 및 사용:

이렇게 하면 전체 앱이 Solana 컨텍스트로 감싸져 모든 하위 컴포넌트에서 클라이언트와 지갑 훅에 접근할 수 있습니다.

3. 지갑 연결 버튼

지갑 드롭다운 옵션

지갑 드롭다운 연결됨

4. SOL 전송

@solana-program/system으로 전송 명령어를 생성하고 client.sendTransaction을 통해 전송합니다. 연결된 지갑이 서명하고 수수료를 지불합니다.

SOL 전송 양식 작성됨

SOL 전송 성공

지갑은 Wallet Standard 감지를 통해 제공됩니다. 연결되면 SOL 전송 시 연결된 서명자가 수수료 지불자로 사용됩니다.

5. 페이지

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

6. 애플리케이션 실행

Terminal

$ npm run dev

http://localhost:3000을 열고, Devnet 지갑을 연결한 후 SOL을 전송해 보세요.

providers.tsx

"use client";

import { createClient } from "@solana/kit";
import { solanaRpc } from "@solana/kit-plugin-rpc";
import { walletSigner } from "@solana/kit-plugin-wallet";
import { ClientProvider } from "@solana/react";

const rpcUrl =
  process.env.NEXT_PUBLIC_SOLANA_RPC_URL ?? "https://api.devnet.solana.com";

export const client = createClient()
  .use(walletSigner({ chain: "solana:devnet" }))
  .use(solanaRpc({ rpcUrl }));

export type AppClient = Awaited<typeof client>;

export default function Providers({ children }: { children: React.ReactNode }) {
  return <ClientProvider client={client}>{children}</ClientProvider>;
}

Next.js + Kit

리소스

사전 요구 사항

Next.js 프로젝트 생성

Solana 의존성 설치

1. Solana Provider 생성

2. 레이아웃 업데이트

3. 지갑 연결 버튼

4. SOL 전송

5. 페이지

6. 애플리케이션 실행

1. Solana Provider 생성

2. 레이아웃 업데이트

3. 지갑 연결 버튼

4. SOL 전송

5. 페이지

6. 애플리케이션 실행

목차