有没有办法在不使用节点的情况下使用 webpack（或`next dev`）运行 Next.js 站点？

Question

问题

为了澄清这个问题，如果我运行next dev，我有这个代码：

window.localStorage.getItem('myCat')

我会收到如下错误：

ReferenceError: window is not defined

我想运行 一些 种实时重新加载的开发环境。

在 prod 中解决，但在 dev 中没有解决

this problem 的可行生产解决方案是：

1. 避免getStaticProps/getStaticPaths
2. next build && next export
3. 使用nginx重写规则将/some/route重写为->/some/[dynamic].html
4. Next.js 为我们处理剩下的事情，即使我们完全静态地为网站提供服务（动态路由 @ 运行时，耶！）

总结

这个问题只是该问题的开发版本：我们如何才能获得实时重新加载 + 静态 Next.js 站点？我知道这并没有得到官方的支持......但是自从我们让它在 prod 中工作后，我认为具有更多 webpack 知识的人可能能够在这里为我指明正确的方向。

我尝试过的

我想我可以结合使用这些工具：

• custom webpack config for next：用于下面的多个事物
  • shim the window object（假设我们仍在运行节点，但我也尝试过 window-shim）
• a custom next.js dev server，但这似乎没有任何可以帮助我的选项...看起来我可以像他们的示例中那样进行一些 URL 重写，但我可以使用我上面提到的 next.config.js webpack 配置@ 987654327@太

Answer 1

Next.js 在服务器上运行，所以它需要节点。

它在服务器上预渲染页面。当您尝试在服务器上运行的代码中访问window API 时，您会收到错误消息。

解决方案是仅在客户端运行客户端代码。你可以使用 React 的 useEffect 钩子。或者（作为一种快速解决方法）只需检查 window 是否已定义。

如果这段代码应该渲染，你可以在服务器上渲染 null 或一些占位符，在客户端渲染实际内容。

这是一篇很好的文章：https://www.joshwcomeau.com/react/the-perils-of-rehydration/