Интеграция кошелька 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+ и @solana/react 7+. Если ваш пакетный менеджер выдаёт предупреждения о зависимостях от пакета @solana-program/*, указывающего на более старую версию Kit, переопределите их — пакеты совместимы с Kit 7.

1. Create Solana Provider

app/providers.tsx создаёт один клиент на уровне модуля и публикует его через ClientProvider. Плагин walletSigner делает подключённый кошелёк плательщиком комиссий и удостоверением личности; экспортируйте тип клиента, чтобы компоненты могли типизировать useClient.

2. Update Layout

Оберните ваше приложение компонентом Providers. Обновите app/layout.tsx, чтобы импортировать и использовать его:

Это оборачивает всё приложение в контекст Solana, чтобы все дочерние компоненты могли получить доступ к клиенту и хукам кошелька.

3. Кнопка подключения кошелька

Выпадающее меню для подключения/отключения кошельков стандарта Wallet Standard. useWallets возвращает кошельки, обнаруженные в браузере; useConnect / useDisconnect возвращают ActionResult — этот компонент использует его поля dispatch, isRunning и error.

Варианты выпадающего меню кошелька

Кошелёк подключён через выпадающее меню

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. Create Solana Provider

2. Update 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. Create Solana Provider

2. Update Layout

3. Кнопка подключения кошелька

4. Перевод SOL

5. Страница

6. Запуск приложения

1. Create Solana Provider

2. Update Layout

3. Кнопка подключения кошелька

4. Перевод SOL

5. Страница

6. Запуск приложения

Содержание