MetamaskとNext.js(react)の開発環境構築

Next.jsとは

Next.jsは、Reactフレームワークの一種であり、サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）をサポートするためのツールキットです。Next.jsは、Reactコンポーネントベースの開発を簡素化し、パフォーマンスの最適化やSEO対策など、ウェブアプリケーションの開発に必要な機能を提供します。

Next.jsは、Reactのエコシステムを活用しながら、サーバーサイドでのレンダリングやデータの事前取得などを行うことができます。また、静的サイト生成を利用することで、事前にHTMLファイルを生成し、CDNにキャッシュすることができます。これにより、ユーザーがウェブサイトにアクセスした際に、サーバー側で動的にコンテンツを生成する必要がなくなり、高速なページロードを実現することができます。

Next.jsは、開発者にとって使いやすいAPIやルーティングシステム、データフェッチングのためのHooksなど、様々な機能を提供しています。また、Next.jsは、Vercelというサーバーレスプラットフォームとも連携しており、簡単にデプロイやホスティングを行うことができます。

Next.jsは、ウェブアプリケーションの開発において、パフォーマンスやSEO対策、開発効率の向上などを実現するための強力なツールとして利用されています

環境構築

OS	Mac OS 13
ミドルウェア	Node 19

もし、MacにNodeがインストールされていない場合はhomebrewからインストールお願いします。

開発環境の構築

Githubレポジトリ

Gihubに公開されているメタマスクのレポジトリです。今回は私がメタマスクのレポジトリからForkしたレポジトリを使います。

https://github.com/MetaMask/Nextjs-Starter/
https://github.com/yoshis2/Nextjs-Starter　← こちらを使います

ダウンロードするディレクトリへ

インストール先のディレクトリ作成と移動

cd ~/
mkdir Develop
cd Develop

プログラミングコードダウンロードとインストール

git clone https://github.com/yoshis2/Nextjs-Starter
cd Nextjs-Starter
npm install

メタマスク接続用プログラミング起動

npm run dev

以下のURLにアクセスするとページが表示されます

http://localhost:3000

メタマスクの操作

以下のプログラミングコードで全ての操作がされているのでこちらを解説します。

/Nextjs-Starter/components/Wallet.tsx

ウォレット接続

ボタンの部分をタップすると以下の処理が走ります

上記コードで処理が走りこちらのコードに飛んで実際にはこちらでウォレットとの接続処理が実行されています。

トークンの数量表示

表示されるアドレスとETHの量を表示させるコードです。アドレスをそのまま表示してるのはブログ用のテストアカウントなのでお金を入れていません。

トークンの追加

トークンの追加のAdd Tokenボタンを押すとこちらのコードが呼び出されて処理が走ります。

USDTの追加がされますのでウォレットを確認して下さい

実際にこちらのコードで追加処理がされます。

まとめ

next.jsは現在モダンな開発環境です。私自身はサーバーサイドのエンジニアなので使いずらいですが様々なWeb3のプログラミングで出てくるので勉強することをおすすめします。