Exploring the page structure of my Next.js project: events/[eventId]
Within the events directory, I have a layout that is shared between both the main events page and the individual event pages(events/[eventId]). The layout includes a simple video background. However, there seems to be an issue where sometimes when transitioning from the main event page to a specific event page (event/[id]), the URL parameters for the specific event page shows an element with src or poster attributes. This behavior is puzzling and I am seeking guidance on how to resolve it.
Any assistance or insights on fixing this situation would be highly appreciated!
Code snippet from events/layout.tsx:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<BackgroundVideo />
{children}
</>
);
}
Pertaining to the BackgroundVideo component:
"use client"
import { useEffect,useState } from "react";
const BackgroundVideo = () => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true)
},[])
return(
<div >
{
isClient &&
<video
autoPlay loop muted
poster="videoBgPoster.jpg"
>
<source src="videoBg.mp4"
type="video/mp4"/>
</video>
}
<div className="z-[-90] fixed bg-black bg-opacity-40 h-full w-full"></div>
</div>
);
}
export default BackgroundVideo;
Further details about events/[eventId]:
type Props = {
params: {
eventId: string,
},
searchParams: Record<string, string> | null | undefined
}
const Event = async ({ params, searchParams }: Props) => {
console.log("Params...: ", params)
}
The issue occurs intermittently with correct and incorrect id values being displayed in the URL parameters.
Console output:
Params...: { id: 'videoBgPoster.jpg' } Params...: { id: 'videoBg.mp4' }