Skip to content

next

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

next

README.md

Codex SDK + Next.js Example

A comprehensive Next.js application demonstrating how to integrate the Codex SDK in a modern React environment. This example showcases real-time crypto data visualization, network exploration, and token analysis.

Features

  • 🌐 Network Explorer: Browse and explore different blockchain networks
  • 🪙 Token Discovery: Search and analyze tokens across networks
  • 📊 Real-time Charts: Live price data and trading metrics
  • 🔄 WebSocket Integration: Real-time updates using Codex subscriptions
  • 📱 Responsive Design: Mobile-first, modern UI components
  • ⚡ Server-Side Rendering: Fast initial page loads with SSR
  • 🎨 Modern UI: Built with Tailwind CSS and Radix UI components

Quick Start

Prerequisites

Setup

  1. Set your API key:

    export NEXT_PUBLIC_CODEX_API_KEY="your_api_key_here"

  2. Install dependencies (from the root directory):

    pnpm install

  3. Start the development server:

    cd examples/next
pnpm run dev

  4. Open your browser: Navigate to http://localhost:3000

Environment Variables

Create a .env.local file in this directory:

# Required: Your Codex API key
NEXT_PUBLIC_CODEX_API_KEY=your_api_key_here

# Optional: Custom API endpoints
NEXT_PUBLIC_CODEX_API_URL=https://graph.codex.io/graphql
NEXT_PUBLIC_CODEX_WS_URL=wss://graph.codex.io/graphql

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── page.tsx           # Home page with network list
│   ├── networks/          # Network exploration
│   │   └── [networkId]/   # Dynamic network pages
│   └── layout.tsx         # Root layout
├── components/            # React components
│   ├── NetworkList.tsx    # Network browsing component
│   ├── TokenChart.tsx     # Token price visualization
│   ├── GlitchText.tsx     # Animated text effects
│   └── ui/               # Reusable UI components
└── lib/
    └── utils.ts          # Utility functions

Key Components

NetworkList Component

Displays available blockchain networks with real-time data:

// Fetches networks using the Codex SDK
const networks = await sdk.queries.getNetworks({});

TokenChart Component

Renders interactive price charts for tokens:

// Real-time price updates via WebSocket
sdk.subscriptions.onPriceUpdated(params, {
  next: (data) => updateChart(data),
});

Dynamic Routing

  • / - Network overview
  • /networks/[networkId] - Network details
  • /networks/[networkId]/tokens/[tokenId] - Token analysis

SDK Integration Patterns

Server-Side Data Fetching

// app/page.tsx
export default async function HomePage() {
  const sdk = new Codex(process.env.NEXT_PUBLIC_CODEX_API_KEY!);
  const networks = await sdk.queries.getNetworks({});

  return <NetworkList networks={networks} />;
}

Client-Side Real-time Updates

// components/TokenChart.tsx
useEffect(() => {
  const cleanup = sdk.subscriptions.onPriceUpdated(
    { address, networkId },
    {
      next: (data) => setPriceData(data),
      error: (err) => console.error(err),
    },
  );

  return cleanup;
}, [address, networkId]);

Error Handling

try {
  const token = await sdk.queries.token({ input: { address, networkId } });
  setTokenData(token);
} catch (error) {
  setError("Failed to fetch token data");
}

Available Scripts

Command Description
pnpm run dev Start development server
pnpm run build Build for production
pnpm run start Start production server
pnpm run lint Run ESLint

Troubleshooting

"API key not found"

  • Ensure NEXT_PUBLIC_CODEX_API_KEY is set in your environment
  • Check that the environment variable starts with NEXT_PUBLIC_

"WebSocket connection failed"

  • Verify your network allows WebSocket connections
  • Check that the WebSocket URL is correct
  • Ensure your API key has subscription permissions

"Build fails"

# Clear Next.js cache
rm -rf .next
pnpm run build

Learn More

Codex SDK

Next.js

UI Components