How to Integrate Lynda LinkedIn Learning with V0

Open V0 at v0.dev and describe the learning portal interface you want to build. For a LinkedIn Learning integration, the UI options range from a simple embedded course player (a single iframe in a card) to a full learning management dashboard with progress tracking, course catalogs, and team activity views. For iframe-based integrations, the key component is a CourseCard that accepts a course title, duration, skill level, description, and an embedUrl property. The embedUrl is the LinkedIn Learning embed URL for that course — it follows the pattern https://www.linkedin.com/learning/embed/{course-slug} and is included in the share embed code from each course page. The card renders the iframe inside a modal or expandable panel to avoid overwhelming the page with multiple video players. For a curated catalog approach, ask V0 to generate a grid of course cards that load from your API route (which reads from a database where you've stored course metadata). This gives you full control over which courses appear and lets you add custom metadata like internal skill tags, required vs. optional labels, and role-based filtering that LinkedIn Learning itself doesn't provide in its standard interface. After generating your UI in V0, push to GitHub via V0's Git panel before setting up the backend routes.

Since LinkedIn Learning does not offer a public content API, you'll store your curated course catalog in your own database and serve it through a Next.js API route. This approach gives you complete control over which courses to feature, how to categorize them, and what metadata to attach (like internal skill mappings, role requirements, or team-specific recommendations). Set up a courses table in your database with columns for id, title, instructor, duration_minutes, skill_level, description, linkedin_url, embed_url, thumbnail_url, skill_tags, and is_featured. Populate this table manually by browsing LinkedIn Learning and copying the relevant course URLs and metadata. The embed URL follows the pattern https://www.linkedin.com/learning/embed/{course-slug}?u={organization_id} for enterprise accounts (the u parameter ties the embed to your organization's license), or https://www.linkedin.com/learning/embed/{course-slug} for personal premium access. Create an API route at app/api/learning/courses/route.ts that queries your database and returns the course catalog as JSON. Add query parameter support for filtering by skill_level and searching by title. If you're using Supabase, the query is straightforward using the Supabase JavaScript client with .eq('skill_level', level) and .ilike('title', '%{search}%') filters. For tracking completions, create a user_completions table linking user IDs to course IDs with a completed_at timestamp. Add a POST endpoint at /api/learning/mark-complete that records when a user marks a course complete.

1// app/api/learning/courses/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8);
9
10export async function GET(request: NextRequest) {
11  const { searchParams } = new URL(request.url);
12  const skillLevel = searchParams.get('level');
13  const search = searchParams.get('q');
14  const track = searchParams.get('track');
15
16  let query = supabase
17    .from('courses')
18    .select('id, title, instructor, duration_minutes, skill_level, description, embed_url, thumbnail_url, skill_tags, track')
19    .order('is_featured', { ascending: false })
20    .order('title');
21
22  if (skillLevel && skillLevel !== 'all') {
23    query = query.eq('skill_level', skillLevel);
24  }
25
26  if (track) {
27    query = query.eq('track', track);
28  }
29
30  if (search) {
31    query = query.ilike('title', `%${search}%`);
32  }
33
34  const { data, error } = await query;
35
36  if (error) {
37    return NextResponse.json({ error: error.message }, { status: 500 });
38  }
39
40  return NextResponse.json({ courses: data ?? [] });
41}

If your organization has a LinkedIn Learning enterprise subscription, you can use the LinkedIn Learning API to fetch real completion data, search the official course catalog, and track organizational learning activity. This is an enterprise-only feature — contact your LinkedIn account manager to enable API access on your enterprise agreement. LinkedIn Learning API access uses standard LinkedIn OAuth2 through your LinkedIn app at linkedin.com/developers. You need the r_learning_classifications and r_lms_learner_history scopes (available only to enterprise accounts). The authorization flow is a standard OAuth2 authorization code flow — users authorize your app, you receive an authorization code, exchange it for access and refresh tokens, and store them in your database per user. Once authenticated, the LinkedIn Learning API endpoint at https://api.linkedin.com/v2/learningAssets returns course metadata including title, description, duration, skills, and difficulty level. The learnerActivityReport endpoint returns completion status and time spent for authenticated learners in your organization. These API calls happen in your Next.js API routes using the user's stored access token in the Authorization: Bearer header. For most V0-built apps, the database-backed catalog approach from the previous step is sufficient. The LinkedIn Learning API is primarily valuable when you need real-time completion syncing across a large organization or integration with your existing HR/LMS systems.

1// app/api/learning/mark-complete/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8);
9
10export async function POST(request: NextRequest) {
11  let body: { courseId: string; userId: string };
12
13  try {
14    body = await request.json();
15  } catch {
16    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
17  }
18
19  const { courseId, userId } = body;
20
21  if (!courseId || !userId) {
22    return NextResponse.json(
23      { error: 'courseId and userId are required' },
24      { status: 400 }
25    );
26  }
27
28  const { error } = await supabase
29    .from('user_completions')
30    .upsert(
31      { course_id: courseId, user_id: userId, completed_at: new Date().toISOString() },
32      { onConflict: 'course_id,user_id' }
33    );
34
35  if (error) {
36    return NextResponse.json({ error: error.message }, { status: 500 });
37  }
38
39  return NextResponse.json({ success: true, completedAt: new Date().toISOString() });
40}

Push your code to GitHub and configure your environment variables in Vercel. For the database-backed approach using Supabase, add NEXT_PUBLIC_SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY to Vercel. The SUPABASE_SERVICE_ROLE_KEY must not have the NEXT_PUBLIC_ prefix — it's a server-side secret that bypasses Supabase's row-level security and must only be used in API routes. The NEXT_PUBLIC_SUPABASE_URL is safe to expose as it's just the project URL. For the LinkedIn Learning enterprise API (if applicable), add LINKEDIN_CLIENT_ID, LINKEDIN_CLIENT_SECRET to Vercel, along with any stored access and refresh tokens if using a shared service account rather than per-user OAuth. After adding variables, click Redeploy in Vercel's Deployments tab. Test the deployed app by loading the course catalog (verify database-backed courses appear), clicking View Course (verify the iframe player loads), and marking a course complete (verify the database records the completion). If the iframe player shows a 'Sign in to LinkedIn' prompt, the embed URL may require the organization's LinkedIn ID parameter or the viewer needs an active LinkedIn Premium subscription.