如何部署Next.js项目？Angular开发者的静态部署问题求助

核心问题定位 #

配置output: 'export'后，执行next build应该生成**out文件夹**（而非仅.next），里面包含可直接部署的静态HTML、CSS、JS文件。你目前只看到.next文件夹，说明静态导出流程未正确执行。

分步解决方案 #

1. 修正Next.js配置文件 #

你的配置中images.unoptimized后多了一个冗余逗号，虽不影响语法，但建议修正为标准格式：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true
  }
}

module.exports = nextConfig

2. 执行正确的构建流程 #

• 确保你的Next.js版本≥12.3.0（output: 'export'从该版本开始稳定支持）
• 执行next build命令，等待构建完成后，项目根目录会生成**out文件夹**，这就是需要部署的静态文件目录（和Angular的dist文件夹作用一致）

3. 排查静态导出失败的常见原因 #

• 页面类型限制：
  • 若使用App Router：确保页面组件不是Server Components（即组件不能包含async/await，也不能引入仅服务器端可用的依赖），静态导出仅支持Client Components和静态渲染的页面
  • 若使用Pages Router：页面不能使用getServerSideProps、getInitialProps这类服务器端渲染方法，只能用getStaticProps或纯静态页面组件
• 移除自定义服务器：如果项目中有server.js或自定义服务器配置，会干扰静态导出流程，需暂时移除或注释

4. 部署到All Inkl服务器 #

将out文件夹内的所有文件（注意是文件夹内的内容，不是整个out文件夹）上传到All Inkl服务器的网站根目录（通常为public_html），服务器会直接识别并提供静态HTML文件访问，和部署Angular项目的流程一致。

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