如何调试仅在iOS设备上无法加载的React+Next.js网站？

以下是针对该场景的可落地排查步骤：

• 优先确认语法兼容配置，iOS端所有浏览器都是基于WebKit内核开发，对ES新语法的支持阈值远低于桌面端浏览器，首先在项目根目录新增.browserslistrc文件，补充iOS兼容规则：

> 0.5%
last 2 iOS versions
last 2 Safari versions
not dead
iOS >= 14

配置完成后重新打包部署，确认问题是否解决。

• 如果修改兼容配置后问题仍然存在，检查项目中用到的第三方依赖是否包含未转译的高级语法，在next.config.js中添加transpilePackages配置，把涉及的第三方包加入转译列表，示例配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['xxx-package', 'yyy-utils'],
}
module.exports = nextConfig

• 排查NGINX服务端配置问题，部分低版本iOS对开启HTTP2的LetsEncrypt证书站点存在兼容性bug，可以临时注释NGINX配置中listen 443 ssl http2;的http2字段，重启NGINX后测试访问效果。
• 排查是否使用了iOS端不支持的Web API，比如BigInt、structuredClone、String.prototype.at等API在iOS 14及以下版本无原生支持，若必须使用需引入对应的polyfill包做兼容。

内容的提问来源于stack exchange，提问作者Ahnaf Ahmed