Next.js生产环境构建需要在服务器中保留node_modules文件夹吗？

Question

我对Next.js及其部署流程还比较陌生。最近，我将我一个React.js项目转换为Next.js，以利用Next.js提供的服务器端渲染功能。现在是部署时间了，我发现如果服务器上没有node_modules文件夹，就无法进行 Next build 部署。我在我的页面中使用 getServerSideProps，并在 package.json 中使用 "build": "next build" 命令来构建。问题是，我的 node_modules 文件夹接近 300MB（.next 构建会增加约另外 10MB），我不认为每次部署都带着这么多重量是最佳实践（我打算在服务器上部署不同的构建实例，因此每个实例需要 310MB X 实例数）。我这里有什么做错了吗？还是这是唯一的解决方案？感谢任何回答。谢谢...

- Lance

Answer 1

更新（11/14/22）：先前提到的“独立输出”功能现已不再是实验性的。

// next.config.js
module.exports = {
  output: 'standalone',
}

之前的回答: 最新的Next.js文档中有一个很好的示例，介绍如何创建独立构建，并提供了使用Docker的优秀案例。目前该功能还处于实验性阶段。

// next.config.js
module.exports = {
  experimental: {
    outputStandalone: true,
  },
}

- hboylan

Answer 2

经过一番调查研究，我回答自己的问题。如果使用getServerSideProps，您无法将项目静态导出。因此，在服务器上部署项目需要node_modules文件夹。这并不意味着您必须FTP上传node_modules，您可以在服务器端执行npm构建，它会将node_modules下载到部署文件夹中。在我的情况下，部署文件夹大小为约310MB，其中node_modules文件夹本身大小约为300MB。

- Lance

---

我的公司有个人成功地没有使用文件夹，并且我们正在使用服务器端道具。我不知道他用了什么魔法。如果我弄清楚了，会让你知道的。 - Brandon

@Brandon 有什么消息吗？ - episage

还对这个魔法感兴趣 - Brandon，有更新吗？ - Brendan Sluke

在目标电脑上运行npm run build？ 我收到了“找不到next”的错误提示，需要在客户电脑上手动安装next吗？ - will

另外，我在运行“npm run build”命令之前已经删除了“node_modules”文件夹。 - will

Answer 3

您可以使用[@vercel/ncc][1]包来编译项目。

简而言之：

安装包： npm i --save-dev @vercel/ncc
更改package.json中的构建命令脚本
从："build": "nest build",
到："build": "ncc build src/main.ts -o dist",

P.S. 在我的情况下，应用程序的入口点是src/main.ts
[1]: https://www.npmjs.com/package/@vercel/ncc

- Neni

---

下一个和巢穴是不同的东西 ;) - itzJOH_

Answer 4

截至2023年9月，

我发现了同样的问题。我的node_modules文件夹大小为380MB。显然，构建过程应该能够剔除其中的大部分内容...并且确实可以。

根据文档中自动复制已追踪文件的描述，我已经将我的next.config.js文件设置为：

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'standalone',
}

module.exports = nextConfig

运行构建过程，使用npm run build命令。独立文件夹将生成在app/.next/standalone目录下。该文件夹是您的应用程序的精华，已经删除了所有不必要的内容。它的结构如下：

app/.next/standalone/.next
app/.next/standalone/.env
app/.next/standalone/node_modules (only 30 MB)
app/.next/standalone/package.json
app/.next/standalone/server.js

将app/.next/static和app/public复制到app/.next/standalone。现在看起来是这样的：

...(elements mentioned earlier)
app/.next/standalone/server.js
app/.next/standalone/public -- copied from app/public
app/.next/standalone/.next/static -- copied from app/.next/static

在app/.next/standalone文件夹中使用命令node server.js运行生产服务器。它运行得非常顺利！

- Zmyślny