Currently I'm using NextJs as my frontend. I have a dynamic page with the URL http://localhost:3000/Places/[id] where [id] takes the id number from my CMS and returns its respective data. I have a common navbar component for all my pages, but just for this page I want to change the styling of the navbar. To achieve this I'm using useState and useEffect to check the URL and change style accordingly:

Code:

const [isplace, setIsPlace] = useState(false);
  useEffect(function onFirstMount() {
      const url= window.location.href;

  if(url == "https://localhost:3000/Places"){
    setIsPlace(true)
  }else{
    setIsPlace(false)
  }
    

  }, []);
  return (
    <div className="fullNav" style={{opacity:isplace?"0.5":"1"}}> 

This piece of code works for pages that are not dynamic and have a hard URL value like http://localhost:3000/home. So how do I only change my styling for the dynamic pages?