Next.js静态站点构建后子页面显示目录列表的原因及解决方法

问题根源 #

你的Next.js采用App Router静态导出后，子路由/shopping-list对应的文件是out/shopping-list/index.html（因默认或配置了trailingSlash: true），但Python内置的http.server不会自动将无斜杠的路径/shopping-list映射到目录下的index.html，也不会自动重定向到带斜杠的/shopping-list/，因此服务器直接返回了目录文件列表。

解决方法 #

方法1：使用Next.js推荐的静态服务器（最简单） #

替换Python服务器为专门的静态文件服务器serve，它会自动处理路由映射：

• 全局安装：npm install -g serve
• 启动服务器：serve out
  访问http://localhost:3000/shopping-list即可正常加载页面。

方法2：调整Next.js导出配置 #

修改next.config.js，设置trailingSlash: false（若之前修改过该配置）：

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

module.exports = nextConfig

重新执行npm run build，out目录会生成shopping-list.html文件，访问http://0.0.0.0:3000/shopping-list.html即可看到页面。若要保持路径不带.html，需使用支持URL重写的服务器（如serve、Nginx）。

方法3：自定义Python服务器处理默认页 #

若坚持使用Python，可编写自定义服务器脚本自动加载index.html：
创建server.py文件：

import http.server
import socketserver
import os

class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self):
        # 处理目录路径，自动加载index.html
        if self.path.endswith('/'):
            self.path += 'index.html'
        elif not os.path.exists(os.path.join(self.directory, self.path)) and os.path.exists(os.path.join(self.directory, self.path + '.html')):
            self.path += '.html'
        elif os.path.isdir(os.path.join(self.directory, self.path)):
            self.path += '/index.html'
        return super().do_GET()

if __name__ == '__main__':
    PORT = 3000
    DIRECTORY = './out'
    
    os.chdir(DIRECTORY)
    with socketserver.TCPServer(("", PORT), MyHTTPRequestHandler) as httpd:
        print(f"Serving at http://0.0.0.0:{PORT}")
        httpd.serve_forever()

运行脚本：python server.py，此时访问/shopping-list会自动加载对应页面。

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