Set Custom request headers based on the field value for page item in jss nextjs application

Question

In Sitecore Jss next js(13.4) application I want to set custom request headers for page item based on the check box value, every page item will have the check box in sitecore cms, If the check box value is true i have to add the custom request headers, excluding the 404 and 500 page items, How can I implement this through middleware.

I tried below in my component but it's not working.

useEffect(() => {
    if (props?.fields?.Checkbox?.value) {
      // If Checkbox is checked, set the header
      fetch('/api/set-header', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ path: router.asPath }),
      });
    }
  }, [props, router]);

///set-header.js
export default (req, res) => {
  const { path } = req.body;

  if (req.method === 'POST' && path) {
    res.setHeader('headerkey', 'value');
    res.status(200).json({ message: 'Header set' });
  } else {
    res.status(400).json({ message: 'Invalid request' });
  }
};