基本

1. Next.jsフロントエンドプロジェクトのブートストラップ

Next.jsアプリルーター（TypeScript）＋ TailwindCSS ＋ 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/` ディレクトリを使用しますか  ？ いいえ /はい
App Routerを使用しますか？（推奨） いいえ / はい
デフォルトの  インポートエイリアス（@/*)をカスタマイズしますか ？ いいえ / はい
どのインポートエイリアスを設定しますか？ @/*

各プロンプトに対して、以下のオプションを選択します：

プロジェクト名は？my-app
TypeScriptを使用しますか？ Yes # 現在はTypeScriptが推奨
ESLintを使用しますか？ Yes # コードのリンティングにESLintを使用
Tailwind CSSを使用しますか？ Yes #  インターフェースを素早く記述するためのTailwind CSS 
`src/` ディレクトリを使用しますか  ？ いいえ # srcディレクトリは不要のため使用しません
App Routerを使用しますか？（推奨） はい #  最新のnext.js機能を活用するためApp Routerを使用します 
デフォルトの  インポートエイリアス(@/*)をカスタマイズしますか ？ いいえ # いいえ、デフォルトを使用します

問題が発生した場合は、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つのコンポーネントを使用します button.tsx, input.tsx, カード.tsx そして form.tsx カスタムコンポーネントを作成する 認証メニュー.tsx.

2. WalletConnect上でプロジェクトを作成する

https://cloud.walletconnect.com/sign-in をご覧ください。

アカウントを作成し、ダッシュボードの指示に従ってプロジェクトIDを設定してください。

WalletConnectは、接続リクエストを追跡するためにプロジェクトIDを使用します。

ワグミ + レインボーキット + タンスタック React クエリ

Wagmiは、インターフェースをより迅速に構築するためのReactフックライブラリです。特にWagmiは、取引のライフサイクル全体を管理するための便利なReactフックも提供します。具体的には、ウォレットの接続から取引の開始、ノードからの結果待ち、処理、エラー処理、または取引成功ステータスの確認までをカバーします。取引のライフサイクル全体を適切に管理することで、ユーザー体験が向上し、自身の活動を理解する助けとなります。

Rainbowkitと共通してwagmiライブラリをインストールします

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

次に、作成します プロバイダー.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>
  );
}