为什么Next.js的Image组件中需要执行typeof window判断？

这个判断是为了兼容Next.js的多渲染模式场景：
Next.js 除了客户端渲染外，还支持服务端渲染（SSR）、静态站点生成（SSG）、增量静态再生成（ISR）三种服务端执行的渲染模式。在这类模式下，组件代码会先在Node.js服务端环境执行预渲染逻辑，而Node环境中不存在window全局对象，如果直接调用window.btoa会抛出ReferenceError: window is not defined错误，直接导致渲染失败。

你删掉判断后代码仍能正常运行，是因为你当前页面用的是纯客户端渲染模式，代码只会在浏览器环境执行，不会触发服务端执行的逻辑。但如果后续你调整页面为服务端渲染/静态生成模式，代码就会直接崩溃，这个判断是为了让代码适配所有Next.js的渲染场景。

两段分支逻辑的作用分别是：

• 服务端环境：调用Node.js内置的Buffer API完成字符串转base64操作
• 客户端环境：调用浏览器原生的window.btoa API完成base64转换

官方示例需要覆盖所有用户的使用场景，所以默认加上了这个兼容逻辑。如果你使用的是Next.js 13+的App Router，组件默认是服务端组件，要是没加'use client'标记，删掉这个判断必然会触发报错，你当前没报错大概率是这个Image组件所在的组件已经标记了客户端组件。

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