添加'use client'指令后Next.js Image标签引发页面崩溃求助

问题原因 #

当你给Feed组件添加'use client'后，它会被标记为客户端组件，而被它导入的Cell组件也会被自动当作客户端组件处理。但Cell中使用的next/image在这种隐式客户端组件的场景下，触发了webpack打包兼容问题，导致出现__webpack_require__.n未定义的错误。

修复步骤 #

1. 给Cell组件显式添加'use client'指令 #

明确声明Cell为客户端组件，让Next.js正确处理其依赖打包逻辑：
修改后的cell.tsx：

'use client';
import tempImg from "../../public/assets/image.png"
import Image from "next/image"

export default function Cell() {
  return (
    <>
      <div>Username</div>
      <Image 
        src={tempImg} 
        alt="temp img"
        width={100} // 根据实际需求设置宽度
        height={100} // 根据实际需求设置高度
      />
    </>
  );
}

2. 确保Image组件必填属性完整 #

在Next.js 13+的App Router中，使用本地图片的Image组件必须指定width和height，或者通过fill属性配合父容器定位实现自适应。如果需要自适应尺寸，可改用以下写法：

'use client';
import tempImg from "../../public/assets/image.png"
import Image from "next/image"

export default function Cell() {
  return (
    <>
      <div>Username</div>
      <div style={{ position: 'relative', width: '100px', height: '100px' }}>
        <Image 
          src={tempImg} 
          alt="temp img"
          fill
          style={{ objectFit: 'cover' }}
        />
      </div>
    </>
  );
}

3. 升级Next.js到最新稳定版 #

如果上述方法无效，旧版本Next.js可能存在客户端组件与next/image的兼容性bug，执行以下命令升级：

npm install next@latest

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