Інтеграція гаманця Solana з Next.js та @solana/kit

Налаштуйте мінімальну інтеграцію гаманця Solana у Next.js (App Router) за допомогою @solana/kit, плагінів kit та @solana/react. Ви створите випадаючий список для підключення гаманця та компонент для переказу SOL.

Next.js Kit App

Ресурси

Передумови

Node 20+
npm

Створення проєкту Next.js

Terminal

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

Коли з'явиться запит, прийміть усі значення за замовчуванням (стартовий шаблон включає Tailwind, який у цьому посібнику використовується для простих утилітарних стилів).

Два налаштування шаблону

Стандартний результат create-next-app потребує двох невеликих змін для цього посібника:

У tsconfig.json встановіть "target": "ES2020" (або пізніше). Суми переказів використовують літерали bigint, наприклад 1_000_000_000n, що вимагає ES2020.
У app/globals.css видаліть згенерований блок @media (prefers-color-scheme: dark) та правило фону body. Цей інтерфейс лише світлий; темні налаштування за замовчуванням інакше перекривають утиліту bg-white і роблять сторінку нечитабельною у темному режимі.

Встановлення залежностей Solana

Terminal

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

Цей посібник орієнтований на Kit 7+, пакети @solana/kit-plugin-* версії 0.13+ (0.14+ для @solana/kit-plugin-wallet) та @solana/react 7+.

1. Створення Solana Provider

app/providers.tsx створює один клієнт на рівні модуля і публікує його через ClientProvider. Плагін walletSigner робить підключений гаманець платником комісії та ідентифікатором; експортуйте тип клієнта, щоб компоненти могли типізувати useClient.

2. Оновлення Layout

Огорніть застосунок компонентом Providers. Оновіть app/layout.tsx, щоб імпортувати та використовувати його:

Це огортає весь застосунок контекстом 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. Оновлення Layout

Огорніть застосунок компонентом Providers. Оновіть app/layout.tsx, щоб імпортувати та використовувати його:

3. Кнопка підключення гаманця

Варіанти випадаючого списку гаманця

Підключений гаманець у випадаючому списку

4. Переказ SOL

Заповнена форма переказу SOL

Успішний переказ 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. Оновлення Layout

3. Кнопка підключення гаманця

4. Переказ SOL

5. Сторінка

6. Запуск застосунку

1. Створення Solana Provider

2. Оновлення Layout

3. Кнопка підключення гаманця

4. Переказ SOL

5. Сторінка

6. Запуск застосунку

Зміст