Next.jsとWeb3の統合

Next.jsを使ってWeb3対応のdApp（分散型アプリケーション）を構築することは、Ethereumブロックチェーンとの連携を効率的に行う手段です。Web3対応のアプリケーションを構築するためには、ウォレットの接続、ブロックチェーンとの通信、スマートコントラクトとの連携などが必要です。この記事では、これらを実現する具体的な手順を紹介します。

Web3のセットアップ

Next.jsプロジェクトでWeb3を活用するために、まず必要なパッケージをインストールします。以下のコマンドを実行し、wagmiとethers.jsをインストールします。

npm install wagmi ethers

Wagmiは、Ethereumウォレットとの接続やブロックチェーンの読み書き操作を簡単にするためのReact Hooksを提供するライブラリです。ethers.jsは、スマートコントラクトと通信するための基本的なライブラリです。

MetaMaskとの接続

次に、MetaMaskなどのWeb3ウォレットをNext.jsアプリに接続します。useConnectフックを使用して、ウォレットの接続を管理します。以下のように、ユーザーがウォレットを接続できるシンプルなボタンを実装します。

import { useConnect } from 'wagmi';
function ConnectWallet() {
  const { connect, connectors, isConnecting } = useConnect();
  return (
    <div>
      {connectors.map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect(connector)}
        >
          {isConnecting ? 'Connecting...' : `Connect to ${connector.name}`}
        </button>
      ))}
    </div>
  );
}
export default ConnectWallet;

このコードにより、ユーザーがボタンをクリックしてMetaMaskなどのウォレットを接続できるようになります。

スマートコントラクトとの連携

次に、スマートコントラクトとの連携方法を紹介します。wagmiライブラリのuseContractReadとuseContractWriteフックを使用して、Ethereumスマートコントラクトに対してデータの読み書きを行います。以下は、スマートコントラクトからデータを読み取る例です。

import { useContractRead } from 'wagmi';
import contractABI from './contractABI.json';
const contractConfig = {
  address: '0xYourContractAddress',
  abi: contractABI,
};
function ReadContract() {
  const { data, isError, isLoading } = useContractRead({
    ...contractConfig,
    functionName: 'getData',
  });
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;
  return <div>Data: {data}</div>;
}
export default ReadContract;

このコードにより、指定したスマートコントラクトのgetData関数を呼び出し、ブロックチェーンからデータを取得します。

UIの実装

Web3アプリのUIには、ユーザーが簡単にウォレットを接続したり、スマートコントラクトを操作できるように、適切なインターフェースを用意します。たとえば、RainbowKitのようなライブラリを使って、ウォレット接続用の美しいモーダルを簡単に追加することができます。

import { ConnectButton } from '@rainbow-me/rainbowkit';
function App() {
  return (
    <div>
      <h1>Welcome to My Web3 App</h1>
      <ConnectButton />
    </div>
  );
}
export default App;

このようなUI要素を使えば、ユーザーは簡単にウォレットを接続し、dAppの機能を利用できるようになります。

まとめ

Next.jsとWeb3を組み合わせることで、ウォレット接続やスマートコントラクトとの連携が容易に実現できます。WagmiライブラリやRainbowKitなどのツールを活用すれば、ユーザーにとって快適なWeb3体験を提供できます。次は、スマートコントラクトとさらに高度な連携を行い、ブロックチェーンを活用した強力なdAppを開発してみましょう。