Publikováno 20. února 2026

Anglický web s LMS platformou: co obnáší postavit kurzy od nuly

Next.js, Clerk, Stripe a vlastní přehrávač — a rozhodnutí o ochraně obsahu, které jsem udělal vědomě.

U nového anglického webu nestačilo jen přeložit texty z češtiny. Cílem nebyla kopie původního webu, ale samostatná platforma: veřejný web, blog, nabídka kurzů, přihlášení, platby, členská sekce, přehrávač lekcí a k tomu příprava anglických videí.

V tomto článku se zaměřuju hlavně na technické provedení.

Základ aplikace

Web je postavený na Next.js 15 s App Routerem a Reactem 19. Strukturu jsem rozdělil na dvě hlavní části.

Veřejná část obsahuje úvodní stránku, blog, kurzy, kontakt a právní stránky. Členská sekce se zakoupenými kurzy, přehrávání lekcí a nastavení účtu.

Přihlášení běží přes Clerk. Middleware hlídá všechny stránky pod /dashboard/*. Když se tam dostane nepřihlášený uživatel, pošle ho na přihlášení a zapamatuje si původní adresu, aby se po přihlášení vrátil tam, kam měl namířeno.

Kurzy, platby a přístup

Data jsou v PostgreSQL přes Drizzle ORM. Schéma řeší kurzy, moduly, lekce, recenze, zákazníky, nákupy a průběh sledování lekcí. Supabase slouží jako databázové prostředí.

Platby jsem napojil přes Stripe Checkout. Při nákupu se ke Stripe session uloží informace o kurzu a zákazníkovi. Po zaplacení přijde webhook a vytvoří přístup ke kurzu.

Tady vzniká drobný, ale důležitý problém. Uživatel se ze Stripe vrátí na web během jedné až dvou sekund, webhook může dorazit později. Kdyby stránka rozhodovala hned, zaplacený zákazník by uviděl „nemáte přístup“.

Řešil jsem to na straně přehrávače: stránka po návratu z platby krátce opakuje kontrolu přístupu a teprve potom rozhodne. Zdrojem pravdy zůstává webhook, ne návratová adresa — z parametrů v URL se přístup neuděluje, protože je má uživatel pod kontrolou. Když webhook nedorazí vůbec, kontrola po chvíli skončí a zákazník dostane informaci, že platba se ještě zpracovává, místo tvrzení, že nic nekoupil.

Video přehrávač

Video část stojí na YouTube IFrame API a youtube-nocookie.com. Nešlo ale jen o vložení iframe. Vlastní přehrávač řeší:

ovládací prvky,
pokračování z poslední pozice,
rychlost přehrávání,
fullscreen,
klávesové zkratky,
stav online/offline,
ukládání průběhu přibližně každých 10 sekund.

Jakmile jsem u videí potřeboval sledovat progres, přepínat lekce a pustit obsah jen přihlášeným studentům, z obyčejného embed kódu se stala důležitá část aplikace.

Za zmínku stojí, co tahle volba znamená pro ochranu obsahu. YouTube iframe má video ID v kódu stránky, takže placený obsah nechrání paywall, ale neuvedenost videa. Kdo si ID vytáhne, může odkaz poslat dál.

Je to vědomý kompromis. Hostování se signovanými adresami a DRM, například přes Mux nebo Cloudflare Stream, řeší přesně tohle, ale při objemu tohoto kurzu by stálo víc než očekávaná ztráta z případného sdílení. Přehrávač je zároveň izolovaná komponenta se stabilním rozhraním, takže výměna zdroje videa je lokální změna, ne přepis členské sekce. Až se poměr obrátí, je to připravené.

Blog bez externí redakce

Blog je postavený nad soubory. Články jsou markdown soubory s metadaty v hlavičce. Server je načte, vytáhne z nich název, datum a další údaje, obsah zobrazí přes react-markdown a vyhledávání staví přes Fuse.js.

Tohle řešení je jednoduché a pro tenhle typ webu praktické. Není potřeba externí CMS, obsah je ve verzování a nasazuje se spolu s aplikací.

Angličtina jako hlavní jazyk, ne přepínač

Nešlo o klasické vícejazyčné řešení s přepínačem. Anglická verze je hlavní jazyk aplikace: html lang="en", Clerk v angličtině, Stripe v angličtině a anglické texty v rozhraní.

U blogu šlo hlavně o obsahovou migraci. Český článek se uloží jako záloha, anglická verze jde na jeho místo, přeloží se titulky, slugy, kategorie, tagy i interní odkazy. Potom se znovu vytvoří vyhledávací index.

Nejtěžší nebyl web, ale videa

Nejpracnější částí byla příprava anglických videí. Dubbing není jen přeložit text. Bylo potřeba řešit terminologii, načasování, kvalitu hlasu a návaznost na pohyb ve videu.

Anglický web nakonec není jen přeložená stránka. Je to vlastní produkt s obsahem, platbami, kurzem, přehrávačem a provozními detaily, které musí držet pohromadě.