如何实现无需Node运行Next.js webpack/next dev环境并支持热重载

问题根因 #

next dev启动时默认会执行服务端渲染逻辑，这部分代码运行在Node.js环境，不存在window等浏览器全局对象，直接调用就会抛出ReferenceError。你之前尝试的shim未生效是因为默认只作用于客户端编译阶段，服务端独立的webpack编译实例没有命中配置。

可行实现思路 #

思路1：服务端编译阶段注入模拟全局对象（无需修改业务代码） #

直接在next.config.js中针对服务端编译的webpack实例注入模拟的window、localStorage等对象，开发阶段服务端渲染时会直接使用模拟值，不会触发报错：

const webpack = require('webpack')

module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.plugins.push(
        new webpack.DefinePlugin({
          window: JSON.stringify({
            localStorage: {
              getItem: () => null,
              setItem: () => {},
              removeItem: () => {}
            },
            // 其他用到的浏览器全局属性可以在这里补充
          })
        })
      )
    }
    return config
  },
  // 保留你原有的重写、静态导出配置即可
  output: 'export'
}

该方案不影响热重载能力，开发阶段运行逻辑和生产静态导出后完全一致。

思路2：开发阶段禁用服务端渲染（完全对齐生产静态站点逻辑） #

如果你生产本身就是纯静态导出没有SSR需求，直接全局阻断服务端渲染逻辑即可，一劳永逸解决所有浏览器API调用报错问题：

1. 修改根目录的_app.js/_app.tsx文件：

import { useEffect, useState } from 'react'

export default function MyApp({ Component, pageProps }) {
  const [isClient, setIsClient] = useState(false)
  // 仅在客户端挂载完成后渲染页面内容
  useEffect(() => setIsClient(true), [])
  return isClient ? <Component {...pageProps} /> : null
}

2. 保留你原有的next.config.js静态导出、重写配置即可，开发阶段热重载完全正常，和生产运行逻辑无差异。

思路3：babel自动注入环境判断 #

如果不想修改框架配置，可配置babel插件自动为所有浏览器全局对象调用添加环境判断：

// .babelrc
{
  "plugins": [
    ["module:babel-plugin-transform-inline-environment-variables"],
    ["transform-define", {
      "typeof window": "process.browser ? 'object' : 'undefined'"
    }]
  ]
}

所有window相关的调用会自动被处理为typeof window !== 'undefined' ? window.xxx : 兜底值，服务端编译时不会触发报错。

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