Metamask + Next.js 적용해서 프론트 페이지 만들어보기

*튜토리얼을 진행한 repo
https://github.com/hyunkicho/reactMetamask

GitHub - hyunkicho/reactMetamask: basic template for react and metamask

* 학습 순서는 React 복습, Next.js 학습, Metamask + Next.js 적용으로 진행

1. React & Next.js

해당 공식 사이트에서 진행 - html, css, Javascript 정도만 알고 있으면 금방 익힐 수 있다.
https://nextjs.org/learn/react-foundations/building-ui-with-components

React Foundations: Building UI with Components | Next.js

 

- Chapter 7 까지는 react에 대한 설명 (정말 잘나와있음)
실습 코드
https://github.com/hyunkicho/reactMetamask/tree/main/react-sample
- Chapter 8 부터는 next 설명
실습 코드
https://github.com/hyunkicho/reactMetamask/tree/main/next-sample

reactMetamask/react-sample at main · hyunkicho/reactMetamask

 

2. 메타마스크 연동해보기아래 예제 학습

https://metamask.io/news/developers/how-to-implement-metamask-sdk-with-nextjs/

How to Implement MetaMask SDK with Nextjs | MetaMask News

3. rainbow wallet로 만들기 예제 (rainbow+wagmi+next)

https://www.rainbowkit.com/ko/docs/installation

설치 — RainbowKit

4. git hub pages에 배포하기

https://velog.io/@pj9211/Next.js-Github-Pages%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

Next.js Github Pages에 배포하기