如何使用Next.js服务MPA前端和SSR后端?

d7v8vwbk  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(88)

我最近买了一个MUI模板。我使用React和Next.js以及Flask作为我的后端。MUI模板是多页应用程序。我曾经使用Flask作为SPA,在此之前我只需要return send_from_directory('./static/', 'index.html')一次,这样我就可以从前端服务静态文件。我猜我不应该像下面这样为Flask中的每个路由返回html页面:

@app.route('/')
def index():
    return render_template('home.html')

@app.route('/login')
def login():
    return render_template('login.html')

@app.route('/signUp')
def login():
    return render_template('signUp.html')

@app.route('/home')
def login():
    return render_template('home.html')

字符串
如何将MPA模板与我的SSR后端Flask结合?如何配置Next.js来实现这一点?这是模板包含的内容:


的数据
我试着这样写我的Flask代码,但它似乎并不好用:

from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route("/")
def serve_nextjs():
    return send_from_directory("./static", "index.html")

# Serve the static Next.js files (CSS, JavaScript, images, etc.)
@app.route("/<path:filename>")
def serve_static(filename):
    print(filename)
    if '/' in filename:
        print("1")
        return send_from_directory("./static", filename)
    else:
        print("goto2")
        return send_from_directory(f"./static/{filename}")

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

9nvpjoqh

9nvpjoqh1#

事实证明,这可以通过以下方式简化:

@app.route('/<path:path>', methods=["GET", "POST"])
def serve_page(path):
    return send_from_directory(f'./static/{path}', "index.html")

字符串
此外,如果您在不同的位置有静态文件,则可以这样指定它们:

@app.route('/_next/<path:filename>', methods=["GET", "POST"])
def next_static_files(filename):
    return send_from_directory(app.static_folder + '/_next/', filename)

@app.route('/assets/<path:filename>', methods=["GET", "POST"])
def assets_files(filename):
    return send_from_directory(app.static_folder + '/assets/', filename)

相关问题