Next.js开发环境初始项目页面加载速度过慢求助

问题现象 #

刚完成项目初始配置，未做任何业务开发，但开发环境下页面加载和编译速度异常缓慢，相关日志如下：

- Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 11.5s
 ○ Compiling / ...
 ✓ Compiled / in 33s (1216 modules)
 GET / 200 in 35795ms
 ○ Compiling /icon-23skhw.ico ...
 ✓ Compiled /icon-23skhw.ico in 14.1s (670 modules)
 GET /icon-23skhw.ico?7391c51acd569043 200 in 15000ms
 ○ Compiling /studio/[[...index]] ...
 ✓ Compiled /studio/[[...index]] in 49.7s (4653 modules)

项目package.json配置：

{
  "name": "sanity-test",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": ">=18.0.0"
  },
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--max_old_space_size=4096 refine dev",
    "build": "refine build",
    "start": "refine start",
    "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
    "refine": "refine"
  },
  "dependencies": {
    "@refinedev/cli": "^2.16.21",
    "@refinedev/core": "^4.47.1",
    "@refinedev/devtools": "^1.1.32",
    "@refinedev/kbar": "^1.3.6",
    "@refinedev/nextjs-router": "^6.0.0",
    "@refinedev/simple-rest": "^5.0.1",
    "@sanity/image-url": "^1.0.2",
    "@sanity/vision": "^3.39.0",
    "next": "^14.3.0-canary.29",
    "next-sanity": "^7.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "sanity": "^3.39.0",
    "styled-components": "^6.1.8"
  },
  "devDependencies": {
    "@types/node": "^18.0.0",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@typescript-eslint/parser": "5.48.0",
    "cross-env": "^7.0.3",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "typescript": "^4.7.4"
  },
  "refine": {
    "projectId": "zyWWbe-LKvVYd-1rlurs"
  }
}

已尝试但无效的方法：

• 清除Cookie、站点数据及应用数据
• 安装Next.js Canary版本
• 使用next dev --turbo启动
• 更新Node.js至LTS版本

针对性解决方案 #

1. 降级Next.js到稳定版

Canary版本包含未完全测试的新特性，容易引发性能问题。切换到最新稳定版：

npm install next@14.2.5

2. 升级TypeScript版本

当前TypeScript 4.7.4与Next.js 14兼容性不佳，升级到5.x稳定版：

npm install typescript@5.3.3

3. 优化Sanity Studio编译

Sanity Studio本身包含大量模块，导致Next.js编译耗时。在next.config.js中配置外部化服务端组件依赖，减少编译范围：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['sanity', '@sanity/vision'],
  },
  webpack: (config) => {
    // 启用文件系统缓存，提升重复编译速度
    config.cache = {
      type: 'filesystem',
      buildDependencies: {
        config: [__filename],
      },
    };
    return config;
  },
};

module.exports = nextConfig;

4. 临时禁用Refine DevTools

开发工具会增加额外的编译和运行时负担，暂时关闭验证是否能提升速度：
找到项目入口文件（如app/layout.tsx或pages/_app.tsx），移除DevTools组件的引入和渲染。

5. 彻底清理项目缓存

清理Node模块、Next.js缓存和锁文件，重新安装依赖：

rm -rf node_modules .next package-lock.json
npm install
npm run dev

6. 调整Refine启动命令

尝试直接用Next.js命令启动，绕过Refine CLI的额外处理：
修改package.json中的dev脚本：

"dev": "cross-env NODE_OPTIONS=--max_old_space_size=4096 next dev --turbo"

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