Lesson 1: プロバイダーを設定する

このレッスンでは、アプリケーション全体でweb3の機能を利用するための基盤となる「プロバイダー」を設定します。

OnchainKitProviderを使い、ウォレット接続やチェーン情報の管理を容易にします。

📦 `app/providers.tsx`の実装

まず、packages/frontend/src/app/providers.tsxというファイルを作成し、以下のコードを記述します。

// app/providers.tsx

'use client';

import { MiniKitProvider } from '@coinbase/onchainkit/minikit';
import { type ReactNode } from 'react';
import { baseSepolia } from 'wagmi/chains';

/**
 * Providers コンポーネント
 * アプリ全体のプロバイダー（MiniKitProvider）
 * - OnchainKit の設定（API Key / Chain / 外観）
 * - フレームの文脈や Wagmi のコネクタを内部で設定
 * @param props
 * @returns
 */
export function Providers(props: { children: ReactNode }) {
  return (
    <MiniKitProvider
      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
      chain={baseSepolia}
      config={{
        appearance: {
          mode: 'auto',
          theme: 'mini-app-theme',
          name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
          logo: process.env.NEXT_PUBLIC_ICON_URL,
        },
      }}
    >
      {props.children}
    </MiniKitProvider>
  );
}

次に、このプロバイダーがアプリケーション全体をラップするように、app/layout.tsxを修正します。

// app/layout.tsx

import '@coinbase/onchainkit/styles.css';
import type { Metadata, Viewport } from 'next';
import './../css/globals.css';
import './../css/theme.css';
import { Providers } from './providers';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
};

/**
 * メタデータを生成するメソッド
 * @returns
 */
export async function generateMetadata(): Promise<Metadata> {
  const URL = process.env.NEXT_PUBLIC_URL;
  return {
    title: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
    description:
      'This is a mini shooting game. Generated by `create-onchain --mini`, a Next.js template for MiniKit',
    other: {
      // Farcaster Frame 用のメタデータをヘッダに埋め込み
      'fc:frame': JSON.stringify({
        version: 'next',
        imageUrl: process.env.NEXT_PUBLIC_APP_HERO_IMAGE,
        button: {
          title: `Launch ${process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME}`,
          action: {
            type: 'launch_frame',
            name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
            url: URL,
            splashImageUrl: process.env.NEXT_PUBLIC_SPLASH_IMAGE,
            splashBackgroundColor: process.env.NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR,
          },
        },
      }),
    },
  };
}

/**
 * ルートレイアウトコンポーネント
 * @param param0
 * @returns
 */
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="bg-background">
        {/* MiniKitProvider 等でアプリ全体をラップ */}
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

📖 コード解説

`OnchainKitProvider`

@coinbase/onchainkitから提供される中心的なコンポーネントです。

アプリケーション全体をこれでラップすることにより、内部のコンポーネントでウォレット接続の状態やユーザー情報、チェーン情報などを簡単に取得できるようになります。

apiKey:
Section 1で取得したCoinbase Developer PlatformのAPIキーを渡します。環境変数NEXT_PUBLIC_CDP_API_KEYから読み込むように設定します。
chain:
アプリケーションが対話するデフォルトのブロックチェーンを指定します。今回はbaseSepoliaテストネットを使用します。

`QueryClientProvider`

@tanstack/react-queryから提供されるプロバイダーです。

OnchainKitは内部でreact-queryを使用して非同期の状態（例: ブロックチェーンからのデータ取得）を効率的に管理しています。このプロバイダーを設定することで、データのキャッシュや再取得などが自動的に最適化されます。

`layout.tsx`の修正

作成したProvidersコンポーネントをlayout.tsxでインポートし、children（アプリケーションの各ページコンポーネント）をラップします。

これにより、アプリケーションのどのページでもOnchainKitが提供する機能（Context）にアクセスできるようになります。

これで、アプリケーション全体でweb3機能を使うための準備が整いました。

次のレッスンでは、この基盤の上にメインページを構築していきます。

🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの#baseで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

質問が関連しているセクション番号とレッスン番号
何をしようとしていたか
エラー文をコピー&ペースト
エラー画面のスクリーンショット

📦 app/providers.tsxの実装​

📖 コード解説​

OnchainKitProvider​

QueryClientProvider​

layout.tsxの修正​

🙋‍♂️ 質問する​