Next.js是React的前端框架，被設計成不需要太多設定就可以打造高效能的網頁，學習門檻低；Flask是熱門的輕量級Python web框架，核心理念是簡單又可以擴充更多第三方框架；Deta.space是雲端佈署平台。
後端可以使用Flask與FastAPI等Python後端框架，未來會做到資料視覺化的專案，所以Python是不可缺的程式語言，Vercel官方有說明如何將Next.js + Python應用程式佈署至Vercel，不過我這次打算要佈署至Deta.space，因為蠻新的，本人想使用看看。
建立專案
這是Next.js與Flask的專案，我是依照Vercel提供的文件編寫的，將Python程式包進Next.js專案內，其實就是在專案裡面建立另一個路徑。
next.config.js需要編寫下列的程式碼，
這是設置next.js去尋找檔案位置的變數，
裡面的api是next.js專案內的api檔案。
requirements.txt需要安裝這三個重要模組
flask_cors是跨域請求的模組，需要CORS才可以讓next.js讀取到flask的請求。
flask後端，
設置路徑為/api
next.js前端，參考網路教學與網誌的程式碼改寫的。
fetch("/next-flask/api")語法是用來接收專案內的flask發出的json api路徑。
如果佈署成功了，在網址後方輸入python後端的網址，可以發現flask發出的json。
上傳至Deta.space
第一步先安裝CLI
再cmd輸入
iwr https://deta.space/assets/space-cli.ps1 -useb | iex
第二步輸入space login登入space帳號，
它是使用token，需要到官網setting生成API token
生成token的settings
要叫出settings可以使用下方的搜尋欄
點下去往下滑就可以找到了
輸入成功之後
第三步再輸入spaec new創建Spacefile檔與.spaceignore
Spacefile會自動尋找語言並自動生成micros，
Spacefile是屬於yaml檔，告訴雲端平台你要佈署的程式的內容。
micros會生成name、src與engine這三個設定，如果缺一個就無法上傳到雲端。
micros可以設定5個，我只設置前端與後端的micros。
這段是用來生執行Next.js前端
micros:
- name: nextjs-app
src: ./next-flask
engine: next
primary: true
這段是用來生執行python後端
- name: next-flask
src: ./next-flask/api
engine: python3.9
run: gunicorn main:app
public_routes:
- "/*"
- "/*/*"
以下是micros的設定
v: 0版本號，不能亂改。
name: micros的名稱
src: 執行檔的路徑
engine: 要運行的程式語言類型
primary:向Spacefile說明這個micro是要先執行的，
public_routes:內容公開的權限
run:要額外執行的語法
還有更多設定可以在該網頁找到
註:如果你是用Python，必須要額外加上requirements.txt，
讓雲端自行下載你專案需要用到的套件。
第四步輸入space push將程式打包上傳至Deta
佈署成功之後就會生成網址
成功
未來如果實作了數據分析的作品，可以直接使用next.js渲染網頁，
我覺得蠻實用的，安全性與效能也會提升很多~
