How to Build a Live Cricket Score App with Next.js

Real-time sports apps are among the most satisfying things to build — and cricket, with its ball-by-ball drama, is particularly well-suited to live data. In this tutorial we will build a live scoreboard with Next.js 14 App Router and the Cricwix API.

What We Are Building

A Next.js app that shows all live cricket matches, auto-refreshes scores every 10 seconds, and links through to a full scorecard page for each match. We will use React Server Components for the initial render and client-side polling for updates.

Prerequisites

Node.js 18+
A Cricwix API key (free at cricwix.com)
Basic familiarity with Next.js App Router

Project Setup

bash

npx create-next-app@latest cricket-scores --typescript --tailwind
cd cricket-scores

Add your API key to .env.local:

bash

CRICWIX_API_KEY=your_key_here

Fetching Live Fixtures

Create a data fetching function in lib/cricket.ts:

typescript

export async function getLiveMatches() {
  const res = await fetch(
    'https://api.cricwix.com/ext/v1/fixtures?status=live',
    {
      headers: { 'x-api-key': process.env.CRICWIX_API_KEY! },
      next: { revalidate: 10 }, // ISR every 10 seconds
    }
  );
  if (!res.ok) throw new Error('Failed to fetch matches');
  return res.json();
}

Building the Scoreboard Component

tsx

// app/page.tsx
import { getLiveMatches } from '@/lib/cricket';

export default async function HomePage() {
  const { data: matches } = await getLiveMatches();

  return (
    <main className="max-w-3xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">Live Matches</h1>
      {matches.length === 0 && <p>No matches live right now.</p>}
      {matches.map((match: any) => (
        <div key={match.id} className="border rounded-lg p-4 mb-4">
          <p className="font-semibold">{match.teams.home} vs {match.teams.away}</p>
          <p className="text-sm text-gray-500">{match.venue} · {match.format}</p>
          <p className="mt-2 font-mono text-lg">{match.score?.summary}</p>
        </div>
      ))}
    </main>
  );
}

Adding Auto-Refresh

Next.js ISR with revalidate: 10 handles server-side freshness. For a true real-time feel on the client, add a lightweight polling wrapper:

tsx

'use client';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export function AutoRefresh({ interval = 10000 }: { interval?: number }) {
  const router = useRouter();
  useEffect(() => {
    const t = setInterval(() => router.refresh(), interval);
    return () => clearInterval(t);
  }, [interval, router]);
  return null;
}

Deploying to Vercel

Push to GitHub, connect to Vercel, add CRICWIX_API_KEY as an environment variable, and deploy. Vercel's Edge Network pairs perfectly with Cricwix's low-latency API for global users.

💡

Pro tip: Upgrade to the Cricwix Pro plan for 100,000 requests per day — more than enough for a production app with thousands of users.

Next Steps

Add a /match/[id] page using the /scores endpoint for full scorecards
Integrate /players to show player career stats on click
Add push notifications when a wicket falls using the ball-by-ball stream

// ready to build?

Start free today

100 free API calls per day. No credit card required.

Get your API key →