$ npx create-next-app -e https://github.com/TCG-Price-Lookup/nextjs-tcg-starter
TCG価格アプリを
数分で公開
8つのTCGゲームのライブカード価格を搭載したプロダクション対応のNext.js 16スターターテンプレート。ダークモード、shadcn/ui、ISRキャッシュ、サーバーコンポーネント — すべて組み込み済み。ワンクリックでVercelにデプロイ。
含まれているもの
最低限のスキャフォールドではなく、完全に動作するTCG価格アプリケーション。
8ゲームを横断検索
オートコンプリート付きのフルテキストカード検索。ゲームでフィルタリング — ポケモン、MTG、遊戯王など。
カード詳細ページ
コンディション別の完全な価格内訳、eBay市場データ、グレーデッドカード価格を持つカードごとのページ。
ゲーム別閲覧ページ
ゲームでブラウズするための/games/pokemon、/games/mtgなどの専用ページ。
ISRキャッシュ
毎時再検証のIncremental Static Regeneration — APIクォータを使い切ることなく高速なページを実現。
ダークモード + shadcn/ui
箱から出してすぐに洗練されたダークモード。Tailwind 4を使用したshadcn/uiコンポーネントで構築。
APIキーはブラウザに届かない
すべてのデータ取得がサーバーコンポーネントで行われます。APIキーは常にサーバー上に留まります。
アーキテクチャ
サーバーファースト。APIキーはクライアントに届きません。
ブラウザ │ │ HTML（機密データなし） ▼ Next.js Server ←─── ISRキャッシュ (revalidate: 3600s) │ │ TCG_API_KEY（環境変数、サーバーのみ） ▼ TCG Price Lookup API │ │ JSONレスポンス ▼ Next.js Server │ │ レンダリング済みHTML ▼ ブラウザ（APIキーは表示されない）
ルート一覧
| ルート | ページ | レンダリング |
|---|---|---|
| / | 検索バーと注目カード付きホームページ | ISR |
| /card/[id] | カード詳細 — 価格、コンディション、グレーデッドデータ | ISR |
| /games/[game] | ゲーム別閲覧 — /games/pokemon、/games/mtgなど | ISR |
| /about | APIリンク付きのアバウトページ | Static |
クイックスタート
ゼロからデプロイ済みの価格アプリまで4ステップ。
APIキーを取得
tcgpricelookup.comで登録。無料プランは1日200リクエスト — 始めるには十分です。
ブートストラップ
create-next-appコマンドを実行。プロジェクトを自動でクローン・セットアップします。
環境変数を設定
.env.exampleを.env.localにコピーしてTCG_API_KEYを追加。
デプロイ
GitHubにプッシュしてVercelのワンクリックデプロイボタンを使うか、vercel --prodを実行。
# プロジェクトをブートストラップ $ npx create-next-app -e https://github.com/TCG-Price-Lookup/nextjs-tcg-starter my-tcg-app $ cd my-tcg-app # 環境を設定 $ cp .env.example .env.local # 追加: TCG_API_KEY=your_key_here # ローカルで実行 $ npm run dev
なぜスターターテンプレートを使うのか？
TCG価格アプリをゼロから構築するということは、API認証の配線、レートリミットの処理、ネストされたレスポンスオブジェクトの解析、ページネーション付き検索の実装、APIクォータを使い切らないためのISRキャッシュのセットアップ、カード名、マルチゲームフィルタリング、コンディションベースの価格設定に関する数十のエッジケースへの対処が必要です。それはビジネスロジックを1行も書く前に何日もかかるボイラープレートです。
Next.js TCGスターターはこれらすべてをすぐに処理します。すべてのAPI呼び出しはサーバーコンポーネントで実行されるため、キーはブラウザに届きません。毎時再検証のISRキャッシュにより、リクエストごとにAPIを叩くことなくページが高速になります。検索、カード詳細、閲覧ページはダークモードのshadcn/uiコンポーネントで既に構築されています。APIキーを追加してデプロイするだけです。
これはおもちゃのデモではなく、プロダクション対応の基盤です。チームはこれを使ってカードショップ、ポートフォリオトラッカー、価格比較ツール、コレクターコミュニティを構築しています。フォークし、ブランドをカスタマイズし、独自の機能を追加して公開してください。アーキテクチャは意図的にシンプルです: サーバーコンポーネント、クライアントサイドの状態管理なし、グローバルストアなし、マジックなし。
内部の仕組み
スターターがTCG Price Lookup SDKをどのように使用するかのウォークスルー。
検索ページ — app/page.tsx
ホームページはURLから?q=と?game=を読み取り、単一のサーバーサイドSDK呼び出しを実行します。クライアントサイドのフェッチなし、ローディングスピナーなし、ハイドレーションなし。
// Server component — APIキーはサーバーに留まる import { TcgLookupClient } from "@tcgpricelookup/sdk"; const tcg = new TcgLookupClient({ apiKey: process.env.TCG_API_KEY!, }); export default async function SearchPage({ searchParams }) { const { q, game } = await searchParams; const results = q ? await tcg.cards.search({ q, game, limit: 24 }) : null; return <ResultsGrid cards={results?.data} />; }
カード詳細 — app/card/[id]/page.tsx
1枚のカードの完全な価格データ（TCGPlayerの市場・最低・中間・最高価格、コンディション別内訳、eBay平均、グレーデッド価格（Traderプラン））を取得します。ISRは毎時再検証します。
export const revalidate = 3600; // 毎時に価格を再取得 export default async function CardPage({ params }) { const { id } = await params; const card = await tcg.cards.get(id); return ( <div> <h1>{card.name}</h1> <PriceTable prices={card.prices} /> <ConditionGrid raw={card.prices.raw} /> <GradedPrices graded={card.prices.graded} /> </div> ); }
ゲーム閲覧 — app/games/[game]/page.tsx
ゲーム別閲覧ページはISRキャッシュで24枚のカードを一度に表示します。/games/pokemon、/games/mtg、/games/yugioh、または8つの対応ゲームのいずれかにアクセスできます。
export const revalidate = 3600; export default async function GamePage({ params }) { const { game } = await params; const results = await tcg.cards.search({ game, limit: 24, }); return <CardGrid cards={results.data} game={game} />; }
デプロイオプション
Next.jsが動く場所ならどこでもデプロイできます。必要な環境変数はTCG_API_KEYだけです。
Vercel
ワンクリックデプロイボタン。自動ISRサポート、エッジ関数、プレビューデプロイ。推奨オプション。
vercel --prod Netlify
GitHubリポジトリを接続。環境変数にTCG_API_KEYを設定。プッシュで自動デプロイ。
netlify deploy --prod Docker
スタンドアロンコンテナをビルド。任意のVPS、AWS ECS、Google Cloud Run、または独自のインフラで実行。
docker build -t tcg-app . セルフホスト
任意のNode.jsサーバーでnext build && next startを実行。PM2、systemd、お好みのプロセスマネージャーで管理。
next start -p 3000 拡張方法
スターターはあくまで出発点です。最もよくある拡張を紹介します。
価格履歴チャートを追加
Traderプランの/historyエンドポイントとRechartsまたはChart.jsを使って、カード詳細ページに価格トレンドをレンダリング。7日・30日・90日・1年のチャートとパーセンテージ変化インジケーターを表示。
GET /v1/cards/{id}/history?period=30d ユーザーアカウント + ウォッチリストを追加
Supabase、PlanetScale、または任意のデータベースと組み合わせてユーザー認証、保存した検索、ウォッチリスト、ポートフォリオ追跡を追加。すべてのAPI呼び出しはサーバーサイドに留まり、データベースはユーザー設定とカードIDを保存するだけです。
アフィリエイトリンクで収益化
カード詳細ページはTCGPlayerとeBayからのリアルな市場価格を表示します。クリックスルー収益を生み出すアフィリエイトリンクを追加できます。各カードにはソースデータがあるため、販売中のカードに直接リンクできます。
シングルゲームアプリとしてフォーク
gameパラメーターをハードコードしてブランドをカスタマイズ。ニッチなポケモン価格トラッカー、MTG価格チェッカー、または遊戯王市場ツールとしてデプロイ。同じコードベースで絞り込んだ対象ユーザー向けに。
セット閲覧を追加
/v1/setsエンドポイントを使ってセットブラウザを構築。ゲームのすべてのセットを一覧表示し、カード数、リリース日を表示し、セット別カードグリッドにリンク。セットを完成させるコレクターに最適です。
コレクション評価を追加
バッチリクエスト（1回のリクエストで最大20枚）を使ってコレクション全体を評価。ユーザーがポートフォリオにカードを追加し、1回のAPI呼び出しですべての価格を取得し、損益追跡付きのコレクション総額を表示できます。
技術スタック
モダン、ミニマル、プロダクション品質。不要な依存関係なし。
| 技術 | バージョン | 目的 |
|---|---|---|
| Next.js | 16 | App Router、サーバーコンポーネント、ISRを持つReactフレームワーク |
| React | 19 | サーバーコンポーネントサポート付きUIライブラリ |
| Tailwind CSS | 4 | ダークモード対応のユーティリティファーストスタイリング |
| shadcn/ui | latest | アクセシブルでカスタマイズ可能なUIコンポーネント |
| @tcgpricelookup/sdk | latest | TCG Price Lookup API公式クライアント |
| TypeScript | 5.x | コードベース全体の型安全性 |
よくある質問
スターターを使うには有料プランが必要ですか？
Vercel以外にもデプロイできますか？
next startでのセルフホスト。Vercelのワンクリックデプロイが最速ですが、コードにVercel固有のものはありません。
APIキーはユーザーに公開されますか？
TCG_API_KEY環境変数はサーバー上でのみアクセス可能です — クライアントバンドル、ネットワークリクエスト、またはレンダリングされたHTMLには表示されません。NEXT_PUBLIC_の環境変数やクライアントサイドのSDK使用はありません。
商用製品に使用できますか？
ゲームや機能を追加するには？
gameパラメーターを渡すだけです。価格履歴、ウォッチリスト、ポートフォリオ追跡などの機能を追加するには、利用可能なエンドポイントのAPIドキュメントと完全なクライアントAPIのJavaScript SDKドキュメントを確認してください。
関連リソース
JavaScript SDKドキュメント
@tcgpricelookup/sdkの完全なAPIリファレンス — スターターが使用するSDKです。
APIドキュメント
エンドポイント、認証、レスポンス形式、エラーハンドリング、レートリミット。
Discordボット
Discordボットが欲しいですか？スラッシュコマンド、アラート、ポートフォリオ追跡付きのセルフホスト型。
料金プラン
開発用の無料プラン。eBay + グレーデッド向けのTrader。高トラフィック向けのBusiness。
対応ゲーム
ポケモン、MTG、遊戯王、Lorcana、ワンピース、SWU、FaB、日本語ポケモン。
ブログ
TCG API開発者向けのチュートリアル、ガイド、比較記事。