Fix KinescopePlayer SSR crash on direct page load

The @kinescope/react-kinescope-player library accesses browser APIs
(window/document) during server-side rendering. In Next.js App Router,
client components are SSR-rendered on full page loads (direct URL,
refresh) but not on RSC navigations. This caused a 500 error for all
lessons with a kinescopeId when accessed directly.

Fix: defer rendering KinescopeReactPlayer until after mount with
useEffect + useState(false), so it only runs in the browser.
This commit is contained in:
2026-05-06 11:42:01 +00:00
parent 7888a7598b
commit 9a21c705b7
+12 -6
View File
@@ -1,5 +1,6 @@
"use client"; "use client";
import { useEffect, useState } from "react";
import KinescopeReactPlayer from "@kinescope/react-kinescope-player"; import KinescopeReactPlayer from "@kinescope/react-kinescope-player";
interface Props { interface Props {
@@ -8,14 +9,19 @@ interface Props {
} }
export function KinescopePlayer({ videoId, poster }: Props) { export function KinescopePlayer({ videoId, poster }: Props) {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return ( return (
<div className="w-full aspect-video" style={{ border: "2px solid var(--border)" }}> <div className="w-full aspect-video" style={{ border: "2px solid var(--border)" }}>
<KinescopeReactPlayer {mounted && (
videoId={videoId} <KinescopeReactPlayer
width="100%" videoId={videoId}
height="100%" width="100%"
poster={poster} height="100%"
/> poster={poster}
/>
)}
</div> </div>
); );
} }