如何正确部署Next.js通过next export生成的静态输出目录？

1. 确认静态导出产物完整性 #

先检查npm run build执行完成后，项目根目录下的out文件夹里是否存在index.html文件。如果没有这个文件，说明静态导出过程未正确完成——这可能是因为Next.js版本（尤其是13+ App Router模式）需要额外配置才能支持静态导出。

2. 配置Next.js静态导出参数 #

在项目的next.config.js文件中添加静态导出配置，确保Next.js生成完整的静态站点文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 若使用App Router，可根据需求添加trailingSlash: true，避免路由跳转404
};

module.exports = nextConfig;

配置完成后重新执行npm run build，此时out目录应该会生成根目录的index.html及其他静态资源文件。

3. 修复本地预览的服务器问题 #

Python自带的http.server默认不会自动将根路径请求指向index.html，所以访问localhost:8000会显示目录列表。可以用两种方法解决：

• 方法一：自定义Python服务器脚本
  在out目录创建server.py文件，内容如下：

import http.server
import socketserver

PORT = 8000

class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self):
        if self.path == '/':
            self.path = '/index.html'
        return super().do_GET()

with socketserver.TCPServer(("", PORT), MyHTTPRequestHandler) as httpd:
    print(f"Serving at http://localhost:{PORT}")
    httpd.serve_forever()

然后执行python server.py启动服务，访问localhost:8000即可加载应用。

• 方法二：使用专业静态服务器工具
  全局安装serve工具：npm install -g serve，然后进入out目录执行serve -s，该工具会自动处理静态站点的索引文件和路由规则，直接访问对应端口即可正常加载应用。

4. Netlify部署注意事项 #

部署到Netlify时无需担心本地预览的服务器问题，只要确保：

• 项目的package.json中构建脚本为next build && next export
• 在Netlify的项目设置中，将构建命令设为npm run build，发布目录设为out
  Netlify会自动识别静态站点结构并正确部署。

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