Next.js 13.x使用Ethers时Provider未定义？为何12正常13异常？

核心原因 #

Next.js 13默认启用App Router，其中组件默认是服务器组件——服务器端执行代码时没有浏览器环境，既不存在window对象，ethers.providers也无法在服务器端初始化。而Next.js 12默认使用Pages Router，组件默认是客户端组件，代码会在浏览器端运行，自然不会触发这个错误。

解决方案 #

1. 标记组件为客户端组件 #

在包含signMessage函数的文件顶部添加'use client'指令，强制代码在浏览器端执行：

'use client';
import { ethers } from "ethers";

export const signMessage = () => {
  // 先检查window是否存在，避免服务器端渲染报错
  if (typeof window === 'undefined') return;
  
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const signer = provider.getSigner();

  try {
    signer.signMessage("Hey hey").then((result) => {
      console.log(result);
    });
  } catch (error) {
    console.log(error);
  }
};

2. 适配Ethers.js版本（若使用v6） #

如果你安装的是Ethers.js v6，API有变更：ethers.providers.Web3Provider被替换为ethers.BrowserProvider，且getSigner变为异步方法，需要调整代码：

'use client';
import { ethers } from "ethers";

export const signMessage = async () => {
  if (typeof window === 'undefined') return;
  
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();

  try {
    const result = await signer.signMessage("Hey hey");
    console.log(result);
  } catch (error) {
    console.log(error);
  }
};

3. 加固浏览器环境判断 #

即使标记为客户端组件，通过typeof window !== 'undefined'的判断，能确保只有在浏览器环境下才执行Web3相关逻辑，进一步避免潜在的服务器端渲染报错。

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