如何通过Next.js将MPA前端与Flask后端整合部署？

一、Next.js配置（生成静态MPA文件） #

Next.js原生支持多页面结构，只需配置静态导出模式，即可将每个页面编译为独立HTML文件：

1. 修改项目根目录的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // 启用静态导出，生成纯静态HTML/CSS/JS资源
  distDir: 'static', // 指定构建输出目录为`static`，与Flask静态目录对齐
  assetPrefix: '/', // 静态资源前缀设为根路径，避免资源加载路径错误
}

module.exports = nextConfig

2. 执行构建命令：

npm run build

构建完成后，static目录下会生成各页面的独立HTML文件（如login.html、signUp.html），样式、脚本、图片等静态资源会统一放在static/_next/目录中。

二、Flask后端配置（自动匹配MPA页面） #

无需手动编写每个页面的路由，通过通配路由自动匹配请求路径与对应静态HTML文件：

from flask import Flask, send_from_directory, abort
import os

app = Flask(__name__)

# 指向Next.js构建后的静态文件目录
STATIC_DIR = os.path.join(os.path.dirname(__file__), 'static')

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve_mpa(path):
    # 根路径返回首页
    if not path:
        return send_from_directory(STATIC_DIR, 'index.html')
    
    # 检查是否存在对应页面的HTML文件
    html_file = f"{path}.html"
    html_file_path = os.path.join(STATIC_DIR, html_file)
    if os.path.exists(html_file_path):
        return send_from_directory(STATIC_DIR, html_file)
    
    # 检查是否是静态资源文件（如CSS/JS/图片）
    static_file_path = os.path.join(STATIC_DIR, path)
    if os.path.exists(static_file_path):
        return send_from_directory(STATIC_DIR, path)
    
    # 路径不存在时返回404（可根据需求改为返回首页）
    abort(404)

if __name__ == "__main__":
    app.run(debug=True)

关键说明 #

• Next.js静态导出后，每个页面都是独立HTML文件，Flask通过通配路由自动匹配，无需手动维护路由列表
• 静态资源会被Flask自动识别并返回，无需额外配置
• 若Next.js包含动态路由，需提前通过getStaticProps预渲染为静态HTML，否则无法支持静态导出

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