本記事では、Next.js で EVM ベースの dApps を構築する際に役立つ npm ライブラリを紹介します。NFT の Mint、トークンの Claim、スマートコントラクトとの通信、ウォレット連携など、実用的な機能に直結するライブラリを中心に取り上げます。
※EVM や web3 以外の技術スタックはこちらに記載
対象読者
- EVM の dApps を開発するエンジニア・PdM
- EVM のビルダーやハッカソン参加者
- MVP 開発を最短で進めたい Web3 スタートアップ関係者
dApps における Web ライブラリの役割
dApps における Web ライブラリは、主に以下の役割を担います。
dApps における web ライブラリの役割とは、主にウォレット接続の管理やスマートコントラクトとの CRUD です。特にトークン（FT・NFT）の操作。
- ウォレット接続・署名の管理
- スマートコントラクトとの通信（ちなみに（AO では Process、Solana では Program,Sui では Module と呼称）
- トークン（FT・NFT）の Mint、Claim、表示
- 分散ストレージからのデータ取得
viem
Ethereum および EVM チェーンとの基本的な通信を行うためのモダンな TypeScript ライブラリ。
URL: viem
用途: トランザクション作成・送信、コントラクト呼び出し、ブロックチェーンデータ取得
利点: 型安全性、軽量、ethers.js より高速、モダンな API 設計
選定理由: EVM dApps 開発の次世代標準ライブラリ
TypeScript Interface for Ethereum that provides low-level stateless primitives for interacting with Ethereum.
npm i viem
wagmi
React アプリケーションでの Ethereum ウォレット接続を管理するための標準ライブラリ。
URL: wagmi
用途: ウォレット接続、署名処理、セッション管理、React Hooks 提供
利点: 主要ウォレット（MetaMask、WalletConnect 等）を統一的に管理、React Query ベース
選定理由: ユーザー認証とトランザクション署名の標準実装
npm i wagmi
@wagmi/connectors
各種 Ethereum ウォレットとの接続を管理するコネクターライブラリ。
URL: @wagmi/connectors
用途: MetaMask、WalletConnect、Coinbase Wallet 等の個別対応
利点: 各ウォレットの特性に最適化、モジュラー設計
選定理由: 必要なウォレットのみを選択的に実装可能
npm i @wagmi/connectors
@tanstack/react-query
wagmi と組み合わせて使用するデータフェッチングライブラリ。
URL: @tanstack/react-query
用途: ブロックチェーンデータのキャッシュ、同期、状態管理
利点: 自動再取得、キャッシュ最適化、エラーハンドリング
選定理由: wagmi の内部で使用されており、dApps の UX 向上に必須
npm i @tanstack/react-query
abitype
Ethereum ABI（Application Binary Interface）の型安全性を提供するライブラリ。
URL: abitype
用途: コントラクト関数の型定義、ABI からの TypeScript 型生成
利点: コンパイル時の型チェック、開発効率向上
選定理由: 低レベル API が必要な特殊用途に限定して利用
npm i abitype