Next.js 13所有依赖均在dependencies中？是否需手动分离及自动压缩疑问

依赖分类的变化说明 #

在Next.js 12中，依赖会严格区分dependencies（生产依赖）和devDependencies（开发依赖）：

// Next 12
{
  "dependencies": {
    "next": "12.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.2",
    "typescript": "4.6.3"
  }
}

而使用pnpm create next-app创建Next.js 13项目时，所有依赖会默认归入dependencies：

// Next 13
{
  "dependencies": {
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.2",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.8.4"
  }
}

问题解答 #

1. Next.js 13会自动完成代码压缩吗？ #

会。Next.js 13在生产构建阶段默认会自动对JavaScript、CSS等资源进行压缩优化，这是框架内置的核心优化能力，无需额外手动配置。

2. 是否应该手动分离依赖，违背create-next-app的默认设置？ #

不需要。Next.js 13调整依赖分类逻辑，是因为其构建工具（如TurboPack或优化后的Webpack）能够精准识别仅用于开发阶段的依赖（比如TypeScript类型定义、ESLint相关包），在生产构建时会自动排除这些包，不会将它们打包进最终的生产产物中，因此不会影响生产包的体积。

手动分离依赖反而可能带来风险：比如误将生产构建需要的依赖放入devDependencies，导致运行时出现模块缺失的错误，所以建议遵循官方默认的依赖配置。

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