使用 Server Actions 將 Logto 認證整合到你的 Next.js 應用程式中。
Server Actions 提供了一種全新的方法來創建穩健的 web 應用程式，無需傳統的 REST API。我們之前已在 我們的文章 中討論過這個。
今天，我們很高興宣佈在我們的 Next.js SDK 中正式支援 Server Actions，儘管它是一個實驗特性。
想快速了解，請查看 此範例，並在本指南中詳細說明如何將 Logto 與 Server Actions 整合。
要開始，請確保你擁有以下資源：
如果你是自托管 Logto，請參考 Logto 的「入門」文檔以設置你的 Logto 實例。
如果你使用 Logto Cloud，請輸入 URL https://cloud.logto.io/ 打開 Logto 控制台，或者輸入你設置自托管的端點。
接下來，導航至「應用程式」選項卡，並點擊「建立應用程式」。
在彈出窗口中，選擇「Next.js (App Router)」，然後提供一個應用程式名稱，例如「Next.js App」，然後點擊「建立應用程式」。
你將被引導到 Logto 的教學頁面。點擊「完成並結束」以繼續到應用程式詳細信息頁面。
在「重定向 URI」部分，輸入以下值：
例如，如果你的 Next.js 託管在 http://localhost:3000，則該值應為：
點擊底部的「保存更改」按鈕。成功後，保持此頁面打開，因為它對於 Next.js 配置會有幫助。
確保你擁有一個安裝了最新版本的 Next.js 專案。如果還沒有，你可以遵循 官方安裝指南 來創建一個專案。
在撰寫本指南時，該特性是實驗性的，需要在 next.config.js 中啟用：
首先，使用 npm 安裝 @logto/next 模組，如下所示：
你也可以使用 yarn 或 pnpm。
然後讓我們來創建一些「server actions」函數，新建一個文件 libraries/logto.ts：
在此文件中，我們導出四個用於身份驗證目的的函數。注意第一行，"use server" 指示文件中的代碼只能在服務器端運行。我們使用 "next/headers" 來管理基於 Cookie 的會話。
"user server" 的參考資料：https://react.dev/reference/react/use-server"next/headers" 管理 Cookie 的參考資料：https://nextjs.org/docs/api-reference/next/headers我們導出的上述函數可以直接從客戶端的 React 組件中調用，這就是使用 Server Actions 的主要優勢。讓我們到下一章看看如何使用這些函數。
有了身份驗證函數後，讓我們開始構建頁面。我們將創建兩個客戶端組件來啟動登入和登出行為。
/app/sign-in.tsx：
這裡我們從上一章定義的 signIn 函數進行導入。儘管代碼在服務器端執行，但在用戶點擊登入按鈕時，<button> 組件仍然可以直接調用此函數。通過這樣做，我們避免了撰寫任何處理登入過程的 REST API 的需求。事實上，Next.js 已經為我們處理了"POST"請求的分發細節。在接收到 redirectUrl 後，我們可以調用 router.push 將用戶重定向到 Logto 登入頁面。
/app/sign-out.tsx：
登出過程與登入過程相似。
作為標準的 OIDC 身份提供者，Logto 在身份驗證後會將用戶重定向到一個回調 URL。因此，我們必須準備一個回調頁面來處理登入結果。
/app/callback/page.tsx
這裡我們使用 useEffect 客戶端組件，讓它更方便地顯示一個"加載中"頁面，以提高用戶體驗。
現在，讓我們製作一個簡約的主頁，以展示 Logto SDK 的功能。如有需要，通過檢查 isAuthenticated 值來保護來自未知用戶的任何資源，並重定向至登入頁面或顯示錯誤消息。
app/page.tsx
正如你所看到的，這是一個 server component，它免去了 useEffect 和管理複雜狀態更改的需求。
與依賴 REST API 的傳統 Next.js 應用程式相比，伺服器操作提供了一種簡化且直接的方式來實現身份驗證。
完整的代碼範例可以在此處找到：https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample
為何不嘗試使用 Logto Cloud，體驗一下這樣的便捷呢？