기본

1. Next.js 프론트엔드 프로젝트 부트스트래핑

NextJS 앱 라우터 (타입스크립트) + 테일윈드CSS + Shadcn UI

Next.js Pages/App Router는 풀스택 React 프레임워크입니다. 이 프레임워크는 유연하며 크고 작은 React 애플리케이션 구축을 지원합니다. 새로운 Next.js 프로젝트 생성을 시작하려면 터미널에서 다음 명령어를 실행하세요:

npx create-next-app@latest my-app --typescript --tailwind --eslint

터미널에서 다음과 같은 프롬프트가 표시됩니다:

프로젝트 이름은 무엇입니까?my-app
TypeScript를 사용하시겠습니까? 아니오 / 예
ESLint를 사용하시겠습니까? 아니오 / 예
Tailwind CSS를 사용하시겠습니까? 아니오 / 예
`src/` 디렉터리를사용하시겠습니까 ? 아니오 /예
앱 라우터를 사용하시겠습니까? (권장) 아니오 / 예
기본 임포트 별칭(@/*)을 사용자 정의하시겠습니까 ? 아니오 / 예
어떤 import 별칭을 구성하시겠습니까? @/*

각 프롬프트마다 다음 옵션을 선택합니다:

프로젝트 이름은 무엇입니까?my-app
TypeScript를 사용하시겠습니까? 예 # 현재 TypeScript가 최우선 선택입니다
ESLint를 사용하시겠습니까? 예 # 코드 검사를 위한 ESLint
Tailwind CSS를 사용하시겠습니까? 예 #  인터페이스 신속 작성을위한Tailwind CSS 
`src/` 디렉터리를사용하시겠습니까 ? 아니요 # src 디렉토리는 필요하지 않으므로 사용하지 않음
앱 라우터를 사용할까요? (권장) 예 #  최신 nextjs 기능을활용하기위해 앱 라우터 사용 
기본 임포트 별칭(@/*)을 커스터마이징할까요 ? 아니요 # 아니요, 기본값 사용

문제가 발생하면 Next.JS 문서를 방문하세요: https://nextjs.org/docs

cd 디렉터리에 (내 앱 또는 선택한 이름)을 실행하고 다음 명령어를 실행하여 Shadcn UI를 설치하십시오.

npx shadcn-ui@latest init

다음과 같은 설정 안내 메시지가 표시됩니다. 구성 요소.json:

어떤 스타일을 사용하시겠습니까? › 기본
어떤 색상을 사용하시겠습니까? 기본 색상으로 기본 색상으로 사용하시겠습니까? › 슬레이트
CSS 변수를 사용하시겠습니까? 사용하시겠습니까? 사용하시겠습니까? › 아니요 / 예

선호도에 따라 선택할 수 있지만, 이 부트캠프에서는 다음을 선택하게 됩니다:

어떤 스타일을 사용하시겠습니까? › 기본
어떤 색상을 사용하시겠습니까? 기본 색상으로 기본 색상으로 사용하시겠습니까? › 슬레이트
CSS 변수를 사용하시겠습니까? 사용하시겠습니까? 사용하시겠습니까? › 예

ShadcnUI 튜토리얼로 더 알아보기: https://ui.shadcn.com/docs/installation/next

Shadcn UI의 특별한 기능은 라이브러리가 생성하는 구성 요소 아래와 같이 프로젝트 내에 폴더를 직접 생성합니다:

└── components
    ├── ui
    │   ├── button.tsx
    │   ├── input.tsx
    │   ├── card.tsx
    │   └── form.tsx  
    └── authentication-menu.tsx

해당 컴포넌트를 사용하게 될 것입니다. ui 폴더를 만들어 직접 구축하세요 사용자 정의 컴포넌트예를 들어 위에서는 4개의 구성 요소를 사용합니다. 버튼.tsx, input.tsx, 카드.tsx 그리고 form.tsx 사용자 정의 컴포넌트를 생성하기 위해 인증 메뉴.tsx.

2. WalletConnect에서 프로젝트 생성

https://cloud.walletconnect.com/sign-in를 방문하세요.

계정을 생성하고 대시보드의 안내에 따라 프로젝트 ID를 설정하세요.

WalletConnect는 연결 요청을 추적하기 위해 귀하의 프로젝트 ID를 사용합니다.

와그미 + 레인보우킷 + 탄스택 리액트 쿼리

Wagmi는 인터페이스를 더 빠르게 구축하기 위한 React Hook 라이브러리입니다. 특히 Wagmi는 거래의 전체 라이프사이클을 관리할 수 있는 편리한 React Hooks도 제공합니다. 기본적으로 지갑 연결부터 거래 시작, 노드로부터 결과 반환 및 처리 대기, 오류 처리 또는 성공적인 거래 상태 확인까지를 포함합니다. 거래의 전체 라이프사이클을 잘 관리하면 사용자 경험을 향상시켜 사용자가 자신의 활동을 이해하는 데 도움이 됩니다.

Rainbowkit과 함께 wagmi 라이브러리를 설치하게 됩니다.

npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

다음으로, 당신은 providers.tsx 파일 앱 디렉토리

'use client';

import * as React from 'react';
import {
  RainbowKitProvider,
  getDefaultWallets,
  getDefaultConfig,
} from '@rainbow-me/rainbowkit';
import {
  trustWallet,
  ledgerWallet,
} from '@rainbow-me/rainbowkit/wallets';
import {
  klaytn, // import klaytn mainnet
  klaytnBaobab, // import klaytn testnet
} from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider, http } from 'wagmi';
// import according to docs

const { wallets } = getDefaultWallets();
// initialize and destructure wallets object

const config = getDefaultConfig({
  appName: 'MY_APP', // Name your app
  projectId: "WALLETCONNECT_PROJECT_ID", // Enter your WalletConnect Project ID here
  wallets: [
    ...wallets,
    {
      groupName: 'Other',
      wallets: [trustWallet, ledgerWallet],
    },
  ],
  chains: [
    klaytn,
    klaytnBaobab
  ],
  transports: {
    [klaytn.id]: http('https://rpc.ankr.com/klaytn'), // Select RPC provider Ankr instead of the default
    [klaytnBaobab.id]: http('https://rpc.ankr.com/klaytn_testnet'), // Select RPC provider Ankr instead of the default
  },
  ssr: true, // Because it is Nextjs's App router, you need to declare ssr as true
});

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

다음으로, 이 코드를 next.config.mjs 파일:

/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
  reactStrictMode: true,
  webpack: config => {
    config.externals.push('pino-pretty', 'lokijs', 'encoding');
    return config;
  },
};

export default nextConfig;

다음으로, 감싸세요 <Providers> 주변 아이들 당신의 레이아웃.tsx 이 파일로:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import '@rainbow-me/rainbowkit/styles.css';
import { Providers } from './providers';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Klaytn DApp Bootcamp Frontends",
  description: "Interactive frontend for Klaytn DApp bootcamp contracts",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

3. 지갑 연결 버튼

그런 다음 가져올 수 있습니다 <ConnectButton /> 앱으로

import { ConnectButton } from '@rainbow-me/rainbowkit';

export default function Home() {

  return (
    <div className="flex flex-col gap-8 items-center justify-center py-12 px-4 p-48:lg">
      <ConnectButton />
    </div>
  );
}