Next.js安装Fluent UI React后执行npm run dev随即退出

针对你遇到的Next.js 13.5.4项目集成Fluent UI后，在GitHub Codespaces执行npm run dev编译阶段直接退出的问题，结合场景给出以下针对性方案：

1. 强制Next.js监听所有网络接口 #

GitHub Codespaces是远程环境，Next.js默认绑定localhost可能导致进程无法对外提供服务而直接退出。两种解决方式：

• 修改next.config.js，添加监听配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    serverHost: '0.0.0.0',
    // 保留你原有的其他配置
  }
  module.exports = nextConfig
  

• 或者直接在启动命令中指定host：

  npm run dev -- -H 0.0.0.0
  

2. 移除Fluent UI版本冲突 #

你同时安装了Fluent UI v8（@fluentui/react）和v9（@fluentui/react-components），两个版本的样式、依赖逻辑存在冲突，大概率会导致编译后进程崩溃：

• 选择其中一个版本保留，卸载另一个：
  保留v9则卸载v8：

  npm uninstall @fluentui/react
  

  保留v8则卸载v9：

  npm uninstall @fluentui/react-components
  

• 清理缓存后重装依赖：

  npm cache clean --force
  npm install
  

3. 检查App Router兼容性问题 #

Next.js 13的App Router（/app目录）对第三方组件有特定要求，尝试以下操作：

• 临时创建Page Router页面（/pages/index.tsx）测试基础运行：

  // pages/index.tsx
  import React from 'react';
  // 根据你保留的版本选择导入
  import { Button } from '@fluentui/react-components'; // v9
  // import { DefaultButton } from '@fluentui/react'; // v8
  
  export default function Home() {
    return (
      <div style={{ padding: '20px' }}>
        <Button>测试按钮</Button>
      </div>
    );
  }
  

• 如果Page Router能正常运行，检查/app目录下的layout.tsx是否正确导入Fluent UI的全局样式：
  v9需要添加：

  import '@fluentui/react-components/css';
  

  v8需要添加：

  import '@fluentui/react/dist/css/fabric.css';
  

4. 获取详细崩溃日志 #

开启debug模式查看进程退出的具体原因：

NODE_ENV=development DEBUG=next:* npm run dev

运行后控制台会输出更详细的Next.js内部日志，从中定位崩溃触发点。

5. 切换Node.js LTS版本 #

当前使用的Node.js 20.x可能和Next.js 13.5.4存在兼容性问题，切换到官方推荐的18.x版本尝试：

nvm install 18
nvm use 18
npm install
npm run dev

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