如何最小化部署 Next.js 非静态应用程序？

Question

Next.JS 文档和其他教程描述如何部署非静态应用程序（即您运行的应用程序npm run start）的方式似乎在应用程序中留下了很多不必要的东西。他们说就跑npm run build，然后跑npm run start，恭喜你，你完成了！

这对我来说很奇怪，因为当其他系统（如 Webpack）创建可部署版本时，它要小得多。通过最小的我的意思是它不包含

• devDependencies 在 node_modules
• 未压缩的源文件（我的是 TypeScript）
• 其他杂项，如 React Storybook 故事等。

就我而言，这些额外的东西加起来可达数百兆字节。

我有一个看起来像这样的部分解决方案：

1. 跑 npm run build
2. 创建一个新的文件夹，复制node_modules，.next，static，package.json，和几个其他的东西进去
3. cd到新文件夹并运行npm prune --production以删除开发依赖项

这基本上有效，但我并不完全满意。一方面，node_modules仍然包含很多不需要的东西。在 Webpack 产品中，由于树抖动，这些东西将被忽略。另一方面，我有几个其他特定于应用程序的文件夹，我必须记住要复制过来。

为什么这么难？有没有更好的方法来做到这一点？

Answer 1

更新

在nextjs@13.x.x独立输出中变得稳定（https://nextjs.org/docs/app/api-reference/next-config-js/output#automatically-copying-traced-files）现在 next.config.js将是：

module.exports = {
  output: 'standalone',
};

版本 12 的旧答案

从这里开始，next@12.x.x您可以创建一个独立的构建，删除所有不必要的依赖项（捆绑包大小减少了 70%-80%）。要使用它，您只需在您的中设置它next.config.js（如此处所述https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental）

module.exports = {
  experimental: {
    outputStandalone: true,
  }
}

• 跑步next build
• 这将创建一个文件夹.next/standalone
• 然后，next start您必须使用server.js.next/standalone 文件夹中生成的文件node .next/standalone/server.js

Docker环境

如果您在 docker 环境中，您还应该复制静态文件夹

...
COPY ./next.config.js ./
COPY ./public ./public
COPY ./package.json ./package.json
COPY --chown=nextjs:nodejs ./.next/standalone ./
COPY --chown=nextjs:nodejs /.next/static ./.next/static
....

EXPOSE 3000

CMD ["node", "server.js"]