Интеграция кошелька Solana с Next.js и @solana/react-hooks

Настройте минимальную интеграцию кошелька Solana в Next.js (App Router) с помощью @solana/client и @solana/react-hooks. Вы создадите выпадающее меню для подключения кошелька и компонент для перевода 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, чтобы всегда быть в курсе обновлений. Если ваш менеджер пакетов показывает предупреждения о peer-зависимостях, вы можете зафиксировать текущий протестированный набор (@solana/client@1.1.0 @solana/react-hooks@1.1.0 @solana/kit@5.0.0) и обновить его, когда выйдут новые релизы.

1. Создайте Solana Provider

app/providers.tsx использует упрощённые пропсы SolanaProvider. Установите кластер (по умолчанию Devnet).

2. Обновите макет

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

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

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

Выпадающее меню для подключения/отключения кошельков Wallet Standard через useConnectWallet / useDisconnectWallet.

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

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

4. Перевод SOL

Используйте useSolTransfer, чтобы отправить перевод SOL (лампорты) на любой адрес.

Форма перевода SOL заполнена

Перевод SOL успешно выполнен

Коннекторы — это тот же набор Wallet Standard (Phantom/Solflare/Backpack/auto-discovery); после подключения переводы SOL используют подключенного подписанта.

5. Страница

app/page.tsx отображает компоненты подключения кошелька и перевода SOL (Suspense не требуется):

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

Terminal

$ npm run dev

Откройте http://localhost:3000, подключите кошелек Devnet и отправьте перевод SOL.

1. Создайте Solana Provider

app/providers.tsx использует упрощённые пропсы SolanaProvider. Установите кластер (по умолчанию Devnet).

2. Обновите макет

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

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

Выпадающее меню для подключения/отключения кошельков Wallet Standard через useConnectWallet / useDisconnectWallet.

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

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

4. Перевод SOL

Используйте useSolTransfer, чтобы отправить перевод SOL (лампорты) на любой адрес.

Форма перевода SOL заполнена

Перевод 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. Обновите макет

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

4. Перевод SOL

5. Страница

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

1. Создайте Solana Provider

2. Обновите макет

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

4. Перевод SOL

5. Страница

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

Содержание