Spoof client user agent in Next.js

Question

I have a route that redirects iPhones, but no great way to test it:

export const getServerSideProps = async ({ req }) => {
  const isIphone = req.headers['user-agent'].match(/iPhone/i);

  if (isIphone) {
    return {
      redirect: {
        ...
      }
    }
  }

  return {
    props: {}
  };
}

Is there some way one can spoof the user agent head client side? It seems that changing the navigator.userAgent property does not suffice for whatever fetch function next.js is using under the hood.

Answer 1

1. Is this a question about browser tasing? If So - Safari > Develop > Enter Responsive Design Mode > Dropdown
2. Use an iPhone emulator.

Hopefully you are not accessing using any intermediaries who add headers.