Next.js 與 Vercel

Vercel 由 Next.js 的開發團隊打造，並對 Next.js 提供一流的支援。當您將 Next.js 應用部署至 Vercel 時，預設會發生以下情況：

• 使用靜態生成 (Static Generation) 的頁面與資源（JS、CSS、圖片、字體等）會自動透過 Vercel CDN 提供服務，速度極快。
• 使用伺服器渲染 (Server-Side Rendering) 的頁面與 API 路由 會自動轉換為獨立的 無伺服器函式 (Serverless Functions)，讓頁面渲染與 API 請求能無限擴展。

Vercel 還提供更多功能，例如：

• 自訂網域：部署至 Vercel 後，您可以為 Next.js 應用指派自訂網域。詳見我們的文件。

• 環境變數：您可以在 Vercel 上設定環境變數。詳見我們的文件。接著就能在 Next.js 應用中使用這些環境變數。

• 自動 HTTPS：預設啟用 HTTPS（包含自訂網域），無需額外設定。我們會自動更新 SSL 憑證。

您可以在 Vercel 文件 中了解更多平台功能。

每次推送的預覽部署

以下步驟為選用，您可以實際嘗試或僅閱讀了解。

部署至 Vercel 後，建議您嘗試以下操作：

• 在您的應用上建立新分支。
• 進行一些修改並推送至 GitHub。
• 建立新拉取請求 (pull request)（GitHub 說明頁面）。

您應該會在拉取請求頁面看到 vercel 機器人的留言。

點擊留言中的預覽網址，您應該能看到剛做的變更。

當拉取請求開啟時，Vercel 會為該分支的每次推送自動建立預覽部署。預覽網址永遠指向最新的預覽部署。

您可以與協作者分享此預覽網址，立即獲得回饋。

若預覽部署看起來沒問題，將其合併至 main 分支。此時 Vercel 會自動建立正式部署。

開發、預覽、上線

我們剛體驗了稱為 DPS 的工作流程：Develop（開發）、Preview（預覽）與 Ship（上線）。

• 開發：我們在 Next.js 中編寫程式碼，並利用 Next.js 開發伺服器的熱重載功能。
• 預覽：我們將變更推送至 GitHub 分支，Vercel 會建立可透過網址存取的預覽部署。我們能分享此預覽網址以獲得回饋。除了進行_程式碼審查_，您還能執行_部署預覽_。
• 上線：我們將拉取請求合併至 main 分支以部署至正式環境。

我們強烈建議在開發 Next.js 應用時採用此工作流程，它能幫助您更快迭代應用程式。