import { useRouter } from 'next/router';
import { useEffect } from 'react';

function ViewPage() {
  const router = useRouter();
  const { static_id, candidate_id, name_id } = router.query;

  useEffect(() => {
    // Do something with the retrieved params
    console.log(static_id, candidate_id, name_id);
  }, [static_id, candidate_id, name_id]);

  return (
    <div>
      {/*your little funny stuff you want to render */}
    </div>
  );
}

export default ViewPage;

useRouter is imported from 'next/router' to access the router object.

router.query contains the dynamic parameters from the URL.
(You can then access these parameters directly like router.query.static_id, router.query.candidate_id, and router.query.name_id)

Finally we use useEffect hook to perform any actions when these parameters change.

return (
    <div>
      <p>Static ID: {static_id}</p>
      <p>Candidate ID: {candidate_id}</p>
      <p>Name ID: {name_id}</p>
    </div>
  );

export async function getData() {
    const database = createServerDatabaseClient();

    const router = useRouter();
    const { static_id, candidate_id, name } = router.query;

    const selectedName= await getName(database, name_id);
    if (!selectedName) {
      console.error(`Name with id ${name_id} not found`);
      return { props: { filteredOption: null } };
    }
    const options = await getOptions(database, selectedName);   
    const filteredOption = 
//logic for filtering
    return { props: { filteredOption } };
  }