How to Integrate Teachable with V0

Log in to your Teachable school's admin panel at yourschool.teachable.com/admin. Navigate to Settings in the left sidebar, then click on the Integrations section. Scroll down until you find the API section, where you will see your API key. If you do not see an API key, you may need to generate one — look for a 'Generate API key' button. Copy this key and keep it secure. This is your TEACHABLE_API_KEY and it provides full API access to your school's data including courses, enrollments, and student information — treat it like a password. The Teachable API v1 base URL is https://developers.teachable.com/v1 and all requests require the apiKey header set to your API key. Note that the Teachable API is only available on certain Teachable plans — if you are on the basic plan, you may have limited API access. Check your current plan in Teachable Admin → Settings → Plan to confirm API access is available. The API provides endpoints for listing courses (/courses), getting course details (/courses/{id}), listing users (/users), checking enrollments (/courses/{id}/enrollments), and accessing reports. You will use the courses endpoint in your Next.js API route to power your course catalog.

Open V0 and describe the course catalog layout you want. Be specific about what data you want to display for each course — cover image, title, description, price, number of students enrolled, number of lessons, and a call-to-action button. V0 is excellent at generating responsive card grids with filtering and sorting UI. Think about the user experience: do you want a grid or a list view? Do you need category filters? Should free courses be visually distinguished from paid ones? Describe your brand colors or overall aesthetic so V0 generates styling that matches your site. The course cards should have an 'Enroll Now' button that you will later wire up to redirect to the Teachable course enrollment URL. Teachable course enrollment URLs follow the pattern https://yourschool.teachable.com/purchase?product_id={course_id} for paid courses, or https://yourschool.teachable.com/enroll/{course_id} for free courses. V0 does not know these patterns, so you will add the link logic after generation. Focus on the visual design in this step and connect it to real Teachable data in the next steps.

Now create the Next.js API route that fetches your Teachable course catalog server-side. This route calls the Teachable API v1 using your API key from the server environment. The key is never sent to the browser — all Teachable API communication happens between your Vercel serverless function and Teachable's servers. The Teachable API v1 uses a simple apiKey request header for authentication. Create an API route at app/api/teachable/courses/route.ts that fetches the list of published courses from https://developers.teachable.com/v1/courses, includes the course details like name, image_url, description, lecture_sections_count, heading, and the is_published flag, and returns the filtered list of published courses. You can also create a separate route for individual course details at app/api/teachable/courses/[id]/route.ts that fetches a single course with its full lecture listing. The course listings endpoint returns paginated data — handle pagination by accepting a page query parameter and passing it to Teachable's API, or fetch multiple pages and concatenate the results depending on how many courses you have. For a school with under 50 courses, a single request is usually sufficient. Return the courses as a clean JSON array from your API route, mapping only the fields your frontend needs.

1import { NextRequest, NextResponse } from 'next/server';
2
3const TEACHABLE_API_KEY = process.env.TEACHABLE_API_KEY;
4const TEACHABLE_API_BASE = 'https://developers.teachable.com/v1';
5
6export async function GET(request: NextRequest) {
7  if (!TEACHABLE_API_KEY) {
8    return NextResponse.json(
9      { error: 'Teachable API key not configured' },
10      { status: 500 }
11    );
12  }
13
14  try {
15    const { searchParams } = new URL(request.url);
16    const page = searchParams.get('page') || '1';
17
18    const res = await fetch(
19      `${TEACHABLE_API_BASE}/courses?page=${page}&per=30`,
20      {
21        headers: {
22          apiKey: TEACHABLE_API_KEY,
23          Accept: 'application/json',
24        },
25        next: { revalidate: 300 }, // Cache for 5 minutes
26      }
27    );
28
29    if (!res.ok) {
30      const error = await res.json().catch(() => ({}));
31      console.error('Teachable API error:', error);
32      return NextResponse.json(
33        { error: 'Failed to fetch courses from Teachable' },
34        { status: res.status }
35      );
36    }
37
38    const data = await res.json();
39    const courses = (data.courses || []).filter(
40      (course: { is_published: boolean }) => course.is_published
41    );
42
43    return NextResponse.json({
44      courses: courses.map((course: {
45        id: number;
46        name: string;
47        heading: string;
48        description: string;
49        image_url: string;
50        is_published: boolean;
51        lecture_sections: { lectures: unknown[] }[];
52        price?: number;
53      }) => ({
54        id: course.id,
55        name: course.name,
56        heading: course.heading || '',
57        description: course.description || '',
58        imageUrl: course.image_url || null,
59        lectureCount: course.lecture_sections?.reduce(
60          (acc: number, section: { lectures: unknown[] }) => acc + (section.lectures?.length || 0),
61          0
62        ) || 0,
63        price: course.price || 0,
64        isFree: !course.price || course.price === 0,
65        enrollUrl: `https://${process.env.TEACHABLE_SCHOOL_SUBDOMAIN}.teachable.com/p/${course.id}`,
66      })),
67      meta: data.meta || {},
68    });
69  } catch (error) {
70    console.error('Teachable API error:', error);
71    return NextResponse.json(
72      { error: 'Internal server error' },
73      { status: 500 }
74    );
75  }
76}

Teachable can notify your Next.js app via webhooks when key events happen — most importantly, when a student enrolls in a course or completes it. This lets you trigger actions like sending a welcome email, adding the student to a CRM, unlocking content in your app, or updating a custom student database. Create a webhook endpoint at app/api/teachable/webhook/route.ts. In your Teachable admin, go to Settings → Integrations → Webhooks and add your endpoint URL (https://your-vercel-app.vercel.app/api/teachable/webhook). Teachable will send POST requests to this URL with event data as JSON. The event data includes an event_type field (like enrollment.created or course_completion.created), the course ID, and the user's email and name. Teachable includes a signature header for webhook verification — check the Teachable API documentation for your specific webhook secret setup. In your webhook handler, verify the event type and process it accordingly. For enrollment notifications, you might store the enrollment in your own database, send a custom welcome email via Mailgun, or add the user to a Slack channel. Return a 200 status quickly and do any heavy processing asynchronously to prevent Teachable from timing out and retrying the webhook.

1import { NextRequest, NextResponse } from 'next/server';
2
3type TeachableWebhookPayload = {
4  event_type: string;
5  object_type: string;
6  id: number;
7  course?: {
8    id: number;
9    name: string;
10  };
11  user?: {
12    id: number;
13    name: string;
14    email: string;
15  };
16};
17
18export async function POST(request: NextRequest) {
19  try {
20    const payload: TeachableWebhookPayload = await request.json();
21    const { event_type, user, course } = payload;
22
23    console.log(`Teachable webhook received: ${event_type}`, {
24      userId: user?.id,
25      userEmail: user?.email,
26      courseId: course?.id,
27      courseName: course?.name,
28    });
29
30    switch (event_type) {
31      case 'enrollment.created':
32        // Handle new enrollment
33        // TODO: Add to database, send welcome email, etc.
34        console.log(`New enrollment: ${user?.email} enrolled in ${course?.name}`);
35        break;
36
37      case 'course_completion.created':
38        // Handle course completion
39        // TODO: Send completion email, issue certificate, etc.
40        console.log(`Course completed: ${user?.email} completed ${course?.name}`);
41        break;
42
43      case 'enrollment.payment_refunded':
44        // Handle refund
45        console.log(`Enrollment refunded: ${user?.email} for ${course?.name}`);
46        break;
47
48      default:
49        console.log(`Unhandled Teachable event: ${event_type}`);
50    }
51
52    return NextResponse.json({ received: true });
53  } catch (error) {
54    console.error('Teachable webhook error:', error);
55    // Still return 200 to prevent Teachable from retrying
56    return NextResponse.json({ received: true });
57  }
58}

Add your Teachable credentials to Vercel so your deployed app can connect to the Teachable API. Go to your Vercel project dashboard, click Settings in the top navigation, and select Environment Variables in the left sidebar. Add the following server-only environment variables: TEACHABLE_API_KEY set to your API key from Teachable Admin → Settings → Integrations → API (no NEXT_PUBLIC_ prefix — this key must stay server-side), and TEACHABLE_SCHOOL_SUBDOMAIN set to your Teachable school subdomain (the part before .teachable.com in your school URL, for example if your school is myschool.teachable.com, the subdomain is myschool). Set both variables for Production, Preview, and Development environments. After saving, go to the Deployments tab and redeploy your latest deployment to pick up the new variables. Once deployed, test the course catalog by visiting your /courses page — it should load your Teachable courses from the API. If the courses do not appear, check Vercel Function Logs under your project's Functions tab for error messages. After confirming the API route is working, register your webhook endpoint in Teachable Admin → Settings → Integrations → Webhooks by entering your full Vercel deployment URL followed by /api/teachable/webhook. For integrations requiring complex data synchronization between Teachable and additional tools, RapidDev's team can help architect a robust solution.

1# .env.local (for local development — never commit this file)
2TEACHABLE_API_KEY=your-teachable-api-key-here
3TEACHABLE_SCHOOL_SUBDOMAIN=yourschoolname