为何禁用JavaScript后Next.js示例应用无内容渲染？

核心原因：并非预渲染失效，而是样式依赖JavaScript加载 #

你遇到的空白并非Next.js预渲染功能失效，而是示例项目的样式方案依赖JavaScript注入，禁用JS后样式无法加载，导致页面内容（预渲染的HTML）因与背景色一致而“隐形”，并非真的空白。

验证方式 #

• 禁用浏览器JavaScript后访问示例项目
• 右键查看页面源代码（Ctrl+U或Cmd+U），你会看到预渲染的HTML内容（比如页面标题、文本等）确实存在
• 手动修改源代码里的文本样式（比如临时添加style="color: black"），就能看到原本的内容

为什么会这样？ #

Next.js的预渲染确实会在构建/请求时生成完整的HTML，但部分样式方案（如CSS-in-JS、动态样式注入）需要客户端JavaScript来加载或应用样式。官网的这个示例项目可能使用了这类样式方案，导致禁用JS后样式丢失，视觉上呈现空白。

如何确保禁用JS后能看到带样式的内容？ #

如果需要禁用JS后仍有正常样式，可使用Next.js支持的静态CSS方案：

• 使用全局CSS文件（styles/globals.css）并通过import引入
• 使用CSS Modules，这类样式会被编译为静态CSS，无需JS即可加载
• 避免依赖客户端JS的动态样式方案

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