fix: added Suspense boundary to guest page to prevent Next.js useSearchParams errors

This commit is contained in:
Carlos (Almeira) 2026-07-03 19:07:19 -05:00
parent 209a0eff25
commit d0523e7c02

62
src/app/guest/page.tsx Normal file
View File

@ -0,0 +1,62 @@
'use client';
import '@livekit/components-styles';
import {
LiveKitRoom,
VideoConference,
RoomAudioRenderer,
} from '@livekit/components-react';
import { useEffect, useState, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
function GuestRoom() {
const searchParams = useSearchParams();
const room = searchParams.get('room');
const [token, setToken] = useState('');
useEffect(() => {
if (!room) return;
(async () => {
try {
const resp = await fetch(`/api/livekit/token?room=${room}&identity=guest-${Math.floor(Math.random() * 1000)}`);
const data = await resp.json();
setToken(data.token);
} catch (e) {
console.error(e);
}
})();
}, [room]);
if (!room) {
return <div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Falta el parámetro de la sala (?room=...)</div>;
}
if (token === '') {
return <div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Conectando...</div>;
}
return (
<div className="min-h-screen bg-black">
<LiveKitRoom
video={true}
audio={true}
token={token}
serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL || "wss://live.almeira.com.co"}
data-lk-theme="default"
style={{ height: '100vh' }}
>
<VideoConference />
<RoomAudioRenderer />
</LiveKitRoom>
</div>
);
}
export default function GuestPage() {
return (
<Suspense fallback={<div className="min-h-screen bg-slate-950 flex items-center justify-center text-white">Cargando...</div>}>
<GuestRoom />
</Suspense>
);
}