Next.js 13.4.2站点在Android7及以下WebView中空白且报语法错误

报错Uncaught SyntaxError: Unexpected token ...的核心原因是：Android 7及以下系统的WebView内核（对应Chrome 51-55版本）不支持ES6的扩展运算符（...），而Next.js 13.4.2开发环境的打包代码中包含未转译的ES6+语法，导致WebView无法解析代码，最终出现空白屏。

1. 优先测试生产环境构建 #

开发环境的Next.js会保留大量未转译的调试代码（如错误覆盖层、热更新客户端），未做兼容性降级。先构建并部署生产版本的站点：

npm run build && npm start
# 或使用yarn
yarn build && yarn start

生产构建会自动完成代码转译、压缩和兼容性处理，大概率能解决语法不兼容问题。

2. 配置Next.js强制转译依赖（若生产环境仍有问题） #

如果生产环境依旧出现语法错误，在项目根目录的next.config.js中添加transpilePackages配置，强制转译Next.js的内部依赖：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@next/react-dev-overlay', 'next/dist/client'],
  // 保留其他已有配置
}

module.exports = nextConfig

该配置会让Webpack对指定包进行Babel转译，确保输出兼容低版本浏览器的代码。

3. 调整React Native WebView的兼容配置 #

在React Native的WebView组件中添加以下属性，提升兼容性：

import WebView from 'react-native-webview';

// 组件内使用
<WebView
  source={{ uri: '你的Next.js站点地址' }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowUniversalAccessFromFileURLs={true}
  allowFileAccess={true}
/>

这些配置确保WebView启用必要的JS功能和存储支持，避免额外加载异常。

4. 开发环境临时兼容方案（仅用于调试） #

如果需要在开发环境调试，可配置Babel降级语法：

1. 安装依赖：

npm install @babel/preset-env --save-dev
# 或使用yarn
yarn add @babel/preset-env --dev

2. 在项目根目录创建.babelrc文件：

{
  "presets": [
    "next/babel",
    [
      "@babel/preset-env",
      {
        "targets": {
          "android": "7"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

此配置会让Babel在开发环境将代码转译为兼容Android 7的版本，但会降低开发构建速度，建议仅临时使用。

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