How to Integrate Khan Academy API with V0

Before writing any API code, use V0 to generate the UI components for your learning portal. Khan Academy's content structure (domain → subject → topic → content item) naturally maps to breadcrumb navigation with a content grid, so describe this structure explicitly in your V0 prompt. The key UI components you'll need are: a topic navigation breadcrumb showing the current path in the Khan Academy hierarchy, a content grid displaying videos and exercises as cards, and an individual content view that either embeds a YouTube video (Khan Academy videos are hosted on YouTube) or an exercise iframe. V0 generates these components well when you specify the data shape in TypeScript interfaces upfront. For the content cards, Khan Academy provides thumbnail URLs for videos and icon URLs for exercises. Include these in your component design. Each card should show: title, content type badge (Video/Exercise/Article), duration for videos, difficulty for exercises, and a primary action button. Consider also generating a search interface — Khan Academy's topic title search is valuable for users who know what they're looking for. A search input at the top of the page that filters displayed content by title provides immediate value before you implement the full topic tree navigation.

Create a Next.js API route at `app/api/khan-academy/route.ts` that proxies requests to Khan Academy's REST API. The Khan Academy API v1 base URL is `https://www.khanacademy.org/api/v1/` and its key endpoints are: - `GET /topictree` — the full topic tree (very large, ~10MB, cache aggressively) - `GET /topic/{topic_slug}` — topic details and child list by slug (e.g., `algebra`, `geometry`) - `GET /topic/{topic_slug}/exercises` — exercises under a topic - `GET /topic/{topic_slug}/videos` — videos under a topic - `GET /exercises/{exercise_name}` — specific exercise details - `GET /videos/{youtube_id}` — specific video details The API route should accept a `resource` query parameter to select which endpoint to call, plus additional parameters like `slug` for topic-specific requests. This keeps your API surface manageable without creating dozens of separate routes. Khan Academy's API does not require authentication for public content, but it does apply rate limiting. Proxying through your API route also lets you add server-side caching — the topic tree rarely changes, so caching it for hours is safe. Use Next.js's built-in fetch caching with `next: { revalidate: 3600 }` for topic data. The topic slug system is the key to navigating Khan Academy content. Top-level subject slugs include: `math`, `science`, `computing`, `humanities`, `test-prep`, `college-careers-more`. Each has sub-topic slugs you can discover by fetching the parent topic.

1// app/api/khan-academy/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const KA_BASE = 'https://www.khanacademy.org/api/v1';
5
6async function fetchKA(path: string, cacheSeconds = 3600) {
7  const res = await fetch(`${KA_BASE}${path}`, {
8    headers: { Accept: 'application/json' },
9    next: { revalidate: cacheSeconds },
10  });
11  if (!res.ok) throw new Error(`Khan Academy API error: ${res.status} ${res.statusText}`);
12  return res.json();
13}
14
15export async function GET(request: NextRequest) {
16  const { searchParams } = new URL(request.url);
17  const resource = searchParams.get('resource');
18  const slug = searchParams.get('slug');
19
20  try {
21    switch (resource) {
22      case 'topic': {
23        if (!slug) return NextResponse.json({ error: 'slug required' }, { status: 400 });
24        const data = await fetchKA(`/topic/${slug}`);
25        // Return normalized subset to reduce payload size
26        return NextResponse.json({
27          id: data.id,
28          title: data.translated_title || data.title,
29          description: data.translated_description || data.description,
30          slug: data.node_slug,
31          children: (data.children || []).map((c: any) => ({
32            id: c.id,
33            title: c.translated_title || c.title,
34            slug: c.node_slug,
35            kind: c.kind,
36            thumbnail: c.image_url || null,
37            duration: c.duration || null,
38            ka_url: c.ka_url || null,
39          })),
40        });
41      }
42      case 'videos': {
43        if (!slug) return NextResponse.json({ error: 'slug required' }, { status: 400 });
44        const data = await fetchKA(`/topic/${slug}/videos`);
45        return NextResponse.json(data);
46      }
47      case 'exercises': {
48        if (!slug) return NextResponse.json({ error: 'slug required' }, { status: 400 });
49        const data = await fetchKA(`/topic/${slug}/exercises`);
50        return NextResponse.json(data);
51      }
52      default:
53        return NextResponse.json({ error: 'Invalid resource. Use: topic, videos, exercises' }, { status: 400 });
54    }
55  } catch (err: any) {
56    return NextResponse.json({ error: err.message }, { status: 500 });
57  }
58}

Khan Academy's public content API does not require any API key for reading topics, videos, and exercises. However, if you plan to track user progress or access learner data, you'll need OAuth credentials from Khan Academy's developer program. For a public content browsing app, you only need one environment variable: `NEXT_PUBLIC_APP_URL` set to your Vercel deployment URL (e.g., `https://your-app.vercel.app`). This is used for absolute URL construction in server components when calling your own API routes. If you plan to implement user progress tracking via Khan Academy's user API (which requires OAuth 1.0a with user authorization), add `KHAN_ACADEMY_CONSUMER_KEY` and `KHAN_ACADEMY_CONSUMER_SECRET` as server-only environment variables. Apply for API access at khanacademy.org/api/auth2 — note that Khan Academy's developer program approval can take several weeks. Navigate to your Vercel project → Settings → Environment Variables to add these values. For a content-only integration, you may not need any Vercel environment variables at all — just deploy and the API route will work with the public Khan Academy API without any credentials. Vercel's edge caching will also cache your API route responses at the CDN level when you use fetch with `next: { revalidate }`. This means repeated requests to the same Khan Academy topic slug will be served from Vercel's edge cache rather than hitting Khan Academy's servers every time.

Update the V0-generated components to fetch content from your `/api/khan-academy` route. Start with a specific subject slug (like `algebra`) to verify the integration works end-to-end before building the full navigation. For a React Server Component approach, fetch the topic data directly in the server component and pass it as props to client components. This gives you server-side rendering of the content list with no client-side loading spinner on initial page load. Use Next.js's `generateStaticParams` for popular subject pages to pre-render them at build time. For the client-side navigation (clicking into sub-topics), use a client component that maintains the current slug in state and calls `/api/khan-academy?resource=topic&slug={currentSlug}` via `fetch`. Update the breadcrumb trail as users navigate deeper into the topic hierarchy by pushing slug history into an array. For embedding videos, extract the YouTube video ID from Khan Academy's `youtube_id` field and use `https://www.youtube.com/embed/{youtube_id}` in an iframe. Khan Academy video thumbnails are available at `https://img.youtube.com/vi/{youtube_id}/mqdefault.jpg`. For exercises, the Khan Academy exercise URL format is `https://www.khanacademy.org/e/{exercise_name}` which can be embedded in an iframe for in-page practice. Cache the fetched topic data in React state as users navigate so that going back to a previously visited topic doesn't re-fetch — a simple `Map<slug, topicData>` cache in a React context or Zustand store works well for this.

1// Example: Client component with topic navigation
2'use client';
3import { useState, useEffect } from 'react';
4
5interface KAItem {
6  id: string;
7  title: string;
8  slug: string;
9  kind: 'Topic' | 'Video' | 'Exercise' | 'Article';
10  thumbnail: string | null;
11  ka_url: string | null;
12}
13
14export function TopicBrowser({ initialSlug = 'algebra' }: { initialSlug?: string }) {
15  const [slugHistory, setSlugHistory] = useState<string[]>([initialSlug]);
16  const [items, setItems] = useState<KAItem[]>([]);
17  const [loading, setLoading] = useState(true);
18
19  const currentSlug = slugHistory[slugHistory.length - 1];
20
21  useEffect(() => {
22    setLoading(true);
23    fetch(`/api/khan-academy?resource=topic&slug=${currentSlug}`)
24      .then(r => r.json())
25      .then(data => { setItems(data.children || []); setLoading(false); })
26      .catch(() => setLoading(false));
27  }, [currentSlug]);
28
29  const navigateTo = (slug: string) => setSlugHistory(h => [...h, slug]);
30  const goBack = () => setSlugHistory(h => h.slice(0, -1));
31
32  return (
33    <div>
34      {slugHistory.length > 1 && (
35        <button onClick={goBack} className="mb-4 text-blue-600 hover:underline">
36          ← Back to {slugHistory[slugHistory.length - 2]}
37        </button>
38      )}
39      {loading ? <p>Loading...</p> : (
40        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
41          {items.map(item => (
42            <div key={item.id} className="border rounded-lg p-4 cursor-pointer hover:border-blue-500"
43              onClick={() => item.kind === 'Topic' ? navigateTo(item.slug) : window.open(item.ka_url || '#', '_blank')}>
44              {item.thumbnail && <img src={item.thumbnail} alt={item.title} className="w-full rounded mb-2" />}
45              <span className="text-xs font-medium text-blue-600">{item.kind}</span>
46              <h3 className="font-semibold text-sm mt-1">{item.title}</h3>
47            </div>
48          ))}
49        </div>
50      )}
51    </div>
52  );
53}