全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－16. 專案佈署

將專案佈署到 Vercel，以及更新相關 URL 設置。

16–1. 推送專案到 GitHub

• 在 GitHub 上創建新的 repository。
• 執行以下 Git 指令推送本地專案：

初始化本地Git repository

git init

添加所有文件並提交

git add .
git commit -m "Initial commit"

重命名分支為 main

git branch -M main

設定Remote Repository

git remote add origin https://github.com/username/repository-name.git

推送到Remote Repository

git push -u origin main

16–2. 佈署專案到 Vercel

• 在 Vercel 平台上連接 GitHub repository。
• 添加專案的環境變數（Environment Variables）。

添加專案的環境變數（Environment Variables）

• 點選 Deploy 進行專案佈署，取得佈署後的 URL（如：https://nextauth-fullstack-app.vercel.app）。

佈署成功畫面，點擊 Continue to Dashboard

取得佈署後的 URL

16–3. 更新 URL 設定

• 在 Google Cloud Console 中更新 API 憑證的 URL；在 Vercel 專案的環境變數（Environment Variables）設置中更新 NEXTAUTH_URL，並執行專案的重新佈署（Redeploy），更新 URL 設定步驟如下：

重新佈署（Redeploy）

16–4. 檢查佈署後的專案功能

• 確認功能如深淺模式切換、Google 登入、用戶資料修改、登出、路由權限驗證等均正常工作。

佈署完成，檢查專案功能

單元重點

• 將專案部署到 Vercel，取得部署後的網址後更新 NEXTAUTH_URL，執行 Redeploy。
• 到 Google Cloud Console 更新 Authorized JavaScript origins、Authorized redirect URIs。

回到目錄
https://medium.com/p/3d2a3ec1d3b6

專案結語

在這個專案中，我們使用了 Next.js、NextAuth.js、MongoDB 和 TypeScript，搭配 Server Actions 構建了一個全棧專案的基礎架構，從開發環境的搭建到用戶認證和數據管理，再到專案佈署，共同實踐了這些技術的實際應用。如果對本專案的影音版本說明感興趣，歡迎訪問 Udemy 平台觀看。本專案的基礎架構可作為進一步開發其他功能和頁面的起點。如果有任何想法或建議，歡迎留言告知。