Ship a TCG Price App
in Minutes

What You Get

A complete, working TCG price application — not a barebones scaffold.

Architecture

Server-first. The API key never touches the client.

Browser
   │
   │  HTML (no sensitive data)
   ▼
Next.js Server  ←─── ISR cache (revalidate: 3600s)
   │
   │  TCG_API_KEY (env var, server only)
   ▼
TCG Price Lookup API
   │
   │  JSON response
   ▼
Next.js Server
   │
   │  Rendered HTML
   ▼
Browser  (API key never visible)

Routes

Quick Start

Four steps from zero to a deployed price app.

# Bootstrap the project
$ npx create-next-app -e https://github.com/TCG-Price-Lookup/nextjs-tcg-starter my-tcg-app
$ cd my-tcg-app

# Set up environment
$ cp .env.example .env.local
# Add: TCG_API_KEY=your_key_here

# Run locally
$ npm run dev

Why Use a Starter Template?

What's Inside

A walkthrough of how the starter uses the TCG Price Lookup SDK.

Search page — app/page.tsx

The homepage reads ?q= and ?game= from the URL and runs a single server-side SDK call. No client-side fetching, no loading spinners, no hydration.

// Server component — API key stays on the server
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} />;
}

Card detail — app/card/[id]/page.tsx

Fetches full pricing data for a single card — TCGPlayer market, low, mid, high, per-condition breakdowns, eBay averages, and graded values (Trader plan). ISR revalidates every hour.

export const revalidate = 3600; // Re-fetch prices every hour

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>
  );
}

Game browse — app/games/[game]/page.tsx

Per-game browse pages show 24 cards at a time with ISR caching. Navigate to /games/pokemon, /games/mtg, /games/yugioh, or any of the 8 supported games.

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} />;
}

Deployment Options

Deploy anywhere that runs Next.js. The only env var you need is TCG_API_KEY.

How to Extend

The starter is a starting point, not a cage. Here are the most common extensions.

Tech Stack

Modern, minimal, production-grade. No unnecessary dependencies.

Frequently Asked Questions

Related Resources