Hur vi bygger streamingsleuth — Next.js, TMDB och en kaffekopp
Stacken bakom sajten, varför vi valde den, och vad vi skulle ändrat om vi började om.
Det här inlägget är för läsare som är nyfikna på hur streamingsleuth byggs. Stacken är medvetet liten. Här är vad vi använder och varför.
Frontend: Next.js 16 + React 19
Next.js är det dominerande React-ramverket 2026. Vi använder App Router (inte det gamla Pages Router) och Server Components där det går.
- Varför Next.js: Inbyggt routing, SSR/SSG, image-optimering, deploy på Vercel. Inget annat ramverk är så frictionless att börja med.
- Varför inte SvelteKit eller Remix: Båda är bra. Next är bara där vi hade mest erfarenhet.
Styling: Tailwind CSS
Inga CSS-in-JS, inga komponentbibliotek. Bara Tailwind-klasser. Brus i markup, ja, men oerhört snabbt att iterera på design.
Deploy: Vercel
Standardvalet för Next.js. Push till master = deploy. Inget vi behöver tänka på.
Data: TMDB API
The Movie Database är källan till nästan all data på sajten:
- Titlar (filmer + tv-serier)
- Betyg och röstantal
- Genrer
- Stillbilder och affischer
- Availability per land och tjänst
Den sista är guldet. TMDB:s watch/providers-endpoint listar exakt vilka
streamingtjänster en titel finns på i varje land. Utan det skulle hela
sajten vara meningslös.
State: React state + localStorage
Inget Redux, ingen Zustand, ingen TanStack Query. För det vi behöver räcker React Context plus useState.
Watchlist sparas i webbläsarens localStorage. Inget konto, ingen databas.
Vad finns inte
- Ingen användardatabas. Ingen registrering, inget login.
- Ingen analytics utöver Vercel Analytics. Inga tredje-parts-trackers.
- Ingen AI/ML. Inga rekommendationsalgoritmer. Mood-mappings är handgjorda. Discovery använder TMDB:s discover-endpoint direkt.
- Ingen CMS. Bloggen är MDX-filer i Git-repot. Guider är hårdkodade i
lib/guides.ts. Nyheter likadant.
MDX för bloggen
Det här inlägget skrevs som en .mdx-fil i
app/blogg/hur-vi-bygger-streamingsleuth-teknik/page.mdx. Next.js
file-based routing med pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"].
Det innebär att vi kan skriva i Markdown men också använda React-komponenter
inom innehållet (som <BlogPostHeader />-komponenten överst på den här
sidan).
Vad vi skulle ändrat
Om vi började om idag:
- Skulle vi använda TypeScript igen? Ja. Snabbare iteration än vi trodde, mycket säkrare refactoring.
- Skulle vi börjat med App Router? Också ja. Mycket cleaner än Pages Router för det här use case.
- Skulle vi byggt en databas-baserad backend? Nej. Frånvaron av databas är en av sajtens viktigaste designval. Det betyder ingen GDPR-byråkrati, inga användardata att skydda, inget account-recovery att bygga.
Stacken: full lista
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS
- TMDB API
- MDX för blogg
- Vercel för hosting + analytics
- Git + GitHub
Och en kaffekopp. Det är allt.