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

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

Next.js Hooks App

Створення проєкту 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

app/providers.tsx використовує спрощені пропси SolanaProvider. Встановіть кластер (за замовчуванням Devnet).

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

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

Це обгортає весь застосунок контекстом Solana, щоб усі дочірні компоненти могли отримати доступ до стану гаманця та хуків.

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

Випадне меню для підключення/відключення гаманців Wallet Standard через useConnectWallet / useDisconnectWallet.

Опції випадаючого меню гаманця

Випадаюче меню гаманця підключено

4. Переказ SOL

Використовуйте useSolTransfer для надсилання переказу SOL (лампортів) на будь-яку адресу.

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

Успішний переказ SOL

Конектори — це той самий набір Wallet Standard (Phantom/Solflare/Backpack/автовиявлення); після підключення перекази SOL використовують підключений підписувач.

5. Сторінка

app/page.tsx відображає компоненти підключення гаманця та переказу SOL (Suspense не потрібен):

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

Terminal

$ npm run dev

Відкрийте http://localhost:3000, підключіть гаманець Devnet і надішліть переказ SOL.

1. Створення провайдера Solana

app/providers.tsx використовує спрощені пропси SolanaProvider. Встановіть кластер (за замовчуванням Devnet).

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

Обгорніть ваш застосунок компонентом 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

Ресурси

Передумови

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

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

1. Створення провайдера Solana

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

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

4. Переказ SOL

5. Сторінка

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

1. Створення провайдера Solana

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

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

4. Переказ SOL

5. Сторінка

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

Зміст