lesson-1_フロントエンドをセットアップしよう
🍽 フロントエンドを作成しよう
このセクションでは、スマートコントラクトと連携するフロントエンドを構築します。
今回はtypescript
+ React
+ Next.js
を使ってフロントエンド開発を進めていきます。
typescript
: プログラミング言語React.js
: ライブラリNext.js
:React.js
のフレームワーク
それぞれの概要についてはこちらに説明を載せていますので、 初めて触れる方はご参照ください 💁
🛠️ フロントエンドのセットアップをしよう
AVAX-AMM/packages
ディレクトリに移動し、以下のコードを実行して下さい。
yarn create next-app client --ts
ここではcreate-next-app
というパッケージを利用してclient
という名前のプロジェクトを作成しました。
--ts
はtypescript
を使用することの指定しています。
client
ディレクトリにはNext.js
を使ったプロジェクト開発に最低限必要なものがあらかじめ作成されます。
この段階で、フォルダ構造は下記のようになっているはずです。
AVAX-AMM
├── .gitignore
├── package.json
├── packages/
+│ ├── client/
│ └── contract/
└── tsconfig.json
client
ディレクトリ内に生成されたpackage.json
の設定を確認します。contractディレクトリのpackage.json
と同様に、"private": true
となっていることを確認し、設定されていない場合は記述しておきます。
それでは、開発に必要なパッケージをインストールしましょう。先ほど生成されたclient
ディレクトリに移動し、以下のコマンドを実行してください。
yarn add ethers@5.7.1 @metamask/providers@9.1.0 react-icons