Next.js作品集开发遇编译加载卡住问题求助

1. 排查TailwindCSS配置冗余 #

Tailwind内容扫描范围过大是常见卡顿诱因：

• 检查tailwind.config.js中的content数组，仅保留实际使用Tailwind的文件路径，避免过度通配（比如将./**/*改为./app/**/*.{js,ts,jsx,tsx,mdx}、./components/**/*.{js,ts,jsx,tsx,mdx}这类精准匹配）
• 临时注释mode: 'jit'配置，测试是否因JIT模式扫描逻辑导致停滞

2. 调整Next.js开发服务器参数 #

在next.config.js中添加以下配置，关闭非必要开发特性：

/** @type {import('next').NextConfig} */
const nextConfig = {
  devIndicators: {
    buildActivity: false,
  },
  fastRefresh: false, // 临时禁用快速刷新排查
  reactStrictMode: false, // 关闭严格模式双重渲染逻辑
}

module.exports = nextConfig

执行npm run dev -- --no-lint，关闭开发时的ESLint检查，排除lint耗时干扰

3. 清理缓存文件 #

• 删除项目根目录下的.next文件夹和node_modules/.cache文件夹
• 执行npm cache clean --force清理npm缓存，重新运行npm install

4. 修复依赖与版本兼容性 #

• Node 20.3存在与Next 14的潜在兼容问题，降级到Node 18.x LTS版本（如18.19.0）测试，推荐用nvm-windows管理版本
• 执行npm ls检查依赖冲突，确保postcss、autoprefixer版本匹配Tailwind 3.3的要求

5. 排除Windows系统干扰 #

• 临时关闭Windows Defender实时保护，避免其扫描编译文件拖慢速度
• 确保项目目录不在OneDrive等云同步文件夹内，同步机制会干扰文件读写
• 以管理员权限启动VSCode，规避文件权限问题导致的编译停滞

6. 排查项目文件异常 #

• 检查是否存在超大文件（如几MB的JSON、未优化图片）被Next.js意外处理，或存在循环导入的组件/模块
• 创建空白Next.js项目测试：执行npx create-next-app@latest test-app，添加Tailwind后启动，验证是否为本地环境问题

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