Интеграция 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. Запуск приложения

Содержание