Next.js项目中console.log仅显示在终端，浏览器控制台无输出求助

问题原因 #

在Next.js 13+的App Router体系下，默认生成的Page组件是服务器组件——这类组件的代码会在服务器端运行，所以console.log的输出只会出现在Node.js终端（也就是你的VS Code终端），不会同步到浏览器控制台。

快速解决 #

要让日志显示在浏览器里，只需要把组件标记为客户端组件，在组件最顶部加上'use client'指令即可：

'use client';

export const Page = ()=> {
  console.log('Hello, World');

  return (
    <div>
      Hello
    </div>
  )
}

export default Page;

修改后重新执行npm run dev，刷新浏览器就能在控制台看到日志了。

额外说明 #

• 服务器组件适合做数据获取、访问后端资源这类不需要浏览器参与的操作，代码完全在服务端运行，不会发送到客户端
• 客户端组件用于处理交互逻辑（比如点击事件、状态管理）、调用浏览器API，代码会在浏览器端执行，此时console.log自然会输出到浏览器控制台

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