嘗試在 2025 年選擇最佳的技術堆疊非常困難，尤其是在所有新框架發布的情況下。

這不僅僅是類型安全。您還需要良好的效能、可擴展性、開發人員體驗 (DX) 和體面的社區，這樣您就不會陷入困境。

今天，我們將了解為什麼 Next.js（前端）和 Encore.ts（後端）可能是現代開發人員的最佳全端組合。

讓我們開始吧。

涵蓋哪些內容？

簡而言之，我們正在詳細介紹這些主題。

1. 為什麼這個技術棧是個不錯的選擇。

2. 有關如何開始使用 Next.js 和 Encore 的逐步指南。

3. 一些帶有原始程式碼的真實範例。

註：Encore 是 TypeScript 和 Go 的開源後端框架。在本指南中，當我說 Encore 時，我指的是 TypeScript 版本（Encore.ts）。

1. 為什麼這個技術棧是個不錯的選擇。

目前有大量令人驚嘆的技術堆疊，其中一些確實令人印象深刻。

據我所知，將 Next.js 作為前端與 Encore.ts 作為後端配對是一個成功的組合。

如果您是新手，Encore 是一個後端框架和工具集，具有 Rust 執行時間、API 驗證、整合基礎架構、開發人員儀表板等。

我們將透過五個主要因素來審視這個堆疊：

• 類型安全

• 表現

• 開發者體驗 (DX)

• 可擴展性

• 額外福利

⚡ 類型安全

無論何時建立生產級應用程式，最好都是類型安全的（即使沒有它你也可以工作）。

Encore 具有內建類型驗證，並且全部以完全聲明的方式完成，這使得它能夠自動解析和驗證傳入的請求。它確保它與沒有樣板的模式相符。

簡而言之，它在內容到達 javascript 層之前就已經對其進行了驗證。

Next.js（使用 TypeScript）和 Encore.ts 都強制執行靜態類型檢查，從而減少執行時間錯誤並使程式碼更易於重構。 Encore.ts 模式優先方法確保 API 契約保持一致。

Encore 還可以讓您的基礎架構具備類型感知能力，並且不再需要連接字串或其他樣板。

⚡ 性能

Next.js ：借助伺服器端渲染（SSR）、靜態網站生成（SSG）、自動程式碼分割、影像最佳化、延遲載入、腳本最佳化、快取、無伺服器功能、連結最佳化…（以及更多）等內建功能，可以肯定地說，在選擇 Next.js 作為前端時，效能並不是一個令人擔憂的因素。

Turing 有一篇關於優化 Next.js 建置效能的非常好的部落格。

Encore.ts ：它具有非常高效能的 Rust 執行時，與 Express.js 相比，請求吞吐量提高了 9 倍，與 Fastify 相比，請求吞吐量提高了 2 倍。它透過在 Rust 中提供多線程並使用 Rust 而不是 JavaScript 處理許多操作（例如請求驗證）來實現這一點。

根據GitHub 上的基準程式碼，就冷啟動時間而言，Encore.ts 比 Express 快 5 倍以上，比 NestJS 快 17 倍。

⚡ 開發者體驗

Next.js ：它具有不錯的檔案系統、路由、自動程式碼分割、熱模組替換等內建功能以及豐富的插件生態系統，這使得 DX 變得更好。

Encore.ts ：DX 是 Encore 的強項之一，具有內建可觀察性（分散式追蹤、指標、日誌記錄）、本機儀表板、自動架構圖（用於即時概覽）、API Explorer（用於測試 API 端點）、DevOps 自動化和減少樣板。

另外，部署應用程式也變得更加容易，只需推送到 git 儲存庫即可，無需手動步驟。

⚡ 可擴展性

Next.js ：它支援動態路由和不同的渲染技術，如伺服器端渲染（SSR）、靜態網站產生（SSG）、增量靜態再生（ISR），使其適用於大型、高流量的 Web 應用程式。

我閱讀了更多相關內容，發現了一篇有趣的文章，關於如何為你的 Next.js 專案建立可擴展架構。

Encore.ts ：透過將您的基礎架構與應用程式程式碼統一起來並自動化基礎設施配置和 DevOps 任務，它改進了大規模微服務應用程式的開發。

這是一個程式碼範例。

import { SQLDatabase } from "encore.dev/storage/sqldb";

// Create the todo database and assign it to the "db" variable
const db = new SQLDatabase("todo", {
  migrations: "./migrations",
});

// Then, query the database using db.query, db.exec, etc.

它還提供了一個稱為Flow的視覺化工具，可讓您始終了解整個系統的最新視圖，幫助您推理微服務架構並確定哪些服務相互依賴以及它們如何協同工作。

Encore.ts 預設與cloud-agnostic ，這表示它在雲端提供者 API 上提供了一個抽象層，以prevent vendor lock-in 。隨著需求的變化，您可以調整配置的基礎設施，而無需更改應用程式程式碼。這真是太有用了！

⚡ 額外福利

Next.js ：詳細的文件和活躍的社群支援是許多開發人員喜歡使用 Next.js 的原因，它還提供大量可用的插件、教學和資源。您可以在 GitHub 上查看擁有 10k+ 顆星的Awesome Next.js。

Encore.ts ：Encore 為您負責雲端基礎架構和 DevOps。這使得開發人員能夠使用微服務、Postgres 和 Pub/Sub 等工具快速建立可用於生產的後端，而無需通常的複雜性和 DevOps 麻煩。

您還可以做更多令人驚奇的事情，因此請查看Next.js 文件和Encore.ts 文件。

如果您還不熟悉 Encore，我強烈建議您觀看此官方教學。

https://www.youtube.com/watch?v=vvqTGfoXVsw

2. 有關如何開始使用 Next.js 和 Encore 的逐步指南。

在本節中，我們將討論如何開始使用 Next.js 和 Encore.ts。

根據官方文件，您可以使用入門範本快速完成設定。我遵循了相同的模板，如果您有興趣，可以查看一下。

步驟 1：安裝 Encore CLI

要使用 Encore 進行本機開發，首先需要安裝 Encore CLI。這將配置您的本機開發環境並執行帶有日誌、追蹤和 API 文件的本機開發儀表板。

您可以使用以下任一指令（依序為 Linux、Windows、macOS）。

curl -L https://encore.dev/install.sh | bash
iwr https://encore.dev/install.ps1 | iex
brew install encoredev/tap/encore

他們還提供了ts_llm_instructions.txt ，這是一組預製說明，用於幫助 Cursor 和 GitHub Copilot 等 LLM 驅動的工具了解如何使用 Encore。每當我在使用 Cursor 時有疑問時，它都會使事情變得容易得多。

第 2 步：克隆 repo 並建立一個新的應用程式。

首先，使用以下命令克隆模板儲存庫。

git clone --depth=1 https://github.com/encoredev/nextjs-starter.git

然後，導航到後端目錄，安裝依賴項並建立新的 Encore 應用程式。

cd nextjs-starter/backend 
npm install # Install dependencies 
encore app init # Create a new Encore application.

在設定過程中，系統將提示您註冊一個免費的雲端帳戶。它是完全免費的所以我建議這樣做。您還需要選擇一個版本，本指南中我選擇了 TypeScript。

確保在執行encore app init之前切換到backend directory 。我最初忘記了，所以我不得不再做一次。

設定完成後，您將獲得Application ID和Cloud Dashboard URL 。請記下這些，因為您稍後會需要它們。

步驟3：執行您的Encore應用程式。

現在，您需要使用命令encore run在backend directory中啟動您的 encore 應用程式。

前往frontend/package.json並將{{ENCORE_APP_ID}}替換為您的實際 Encore 應用程式 ID。您也可以在encore.app中找到此 ID。

"gen": "encore gen client {{ENCORE_APP_ID}} --output=./app/lib/client.ts --env=local"

步驟 4：產生新的請求客戶端

導航到frontend目錄，打開一個新的終端機視窗並使用此命令產生一個新的請求客戶端。

npm run gen # Inside the frontend directory

執行此命令將為您的應用程式在（ frontend/app/lib/client.ts ）處產生請求客戶端。這使得您的前端和後端之間能夠進行通訊。

在繼續之前，請確保 Encore 應用程式在backend目錄中執行。如果沒有，您可以使用encore run重新啟動它。現在，像往常一樣執行 Next.js 前端。

cd frontend 
npm install 
npm run dev

執行後，在瀏覽器中開啟http://localhost:3000即可查看應用程式的運作情況。

類似地，您可以造訪http://localhost:9400查看 Encore 的本機開發者儀表板。在這裡您可以看到API Explorer 、 Service Catalog 、 Infra 、 Flow （視覺化工具）、 Snippets等。

當地基礎設施

本地儀表板在開始時有小型演示，因此您肯定不會遇到困難。

每當您對 Encore 端點進行變更時，請重新產生請求用戶端，以確保後端和前端之間的契約保持同步。

可以透過執行npm run gen來完成。

步驟 5：使用 Encore Cloud 部署後端。

我假設你有一個包含程式碼變更的 GitHub 倉庫。

在 Encore Cloud Dashboard中開啟您的應用程式。

轉到您的應用程式設定並將Root Directory設定為backend 。這是因為encore.app檔案位於後端目錄。

在整合中，將您的帳戶連接到 GitHub，這將開啟 GitHub，您可以在其中授予對相關儲存庫的存取權。

一旦連接到 GitHub，推送程式碼將自動觸發部署。

將您的應用程式連結到 github

您可以在文件中閱讀有關使用 Encore Cloud 部署應用程式的更多資訊。

確認訊息

您可以在雲端儀表板中追蹤部署進度。一旦完成，您的應用程式將在雲端上線！ 🎉

第 6 步：使用 Vercel 部署前端。

我們將使用 Vercel 進行前端部署。只需在 Vercel 上建立一個新專案並將其指向您的 GitHub 儲存庫。

在專案設定中，將根目錄設定為frontend 。

一旦部署，您的前端就應該上線！

處理 CORS 問題

我們也來談談CORS configuration 。

如果您從前端呼叫 Encore API 時遇到 CORS（跨來源資源共用）問題，則可能需要指定哪些來源被允許存取您的 API（透過瀏覽器）。

您可以透過設定encore.app檔案中的global_cors鍵來實現此目的，該檔案具有以下結構：

global_cors: {
  // allow_origins_without_credentials specifies the allowed origins for requests
  // that don't include credentials. If nil it defaults to allowing all domains
  // (equivalent to ["*"]).
  "allow_origins_without_credentials": [
    "<ORIGIN-GOES-HERE>"
  ],

  // allow_origins_with_credentials specifies the allowed origins for requests
  // that include credentials. If a request is made from an Origin in this list
  // Encore responds with Access-Control-Allow-Origin: <Origin>.
  //
  // The URLs in this list may include wildcards (e.g. "https://*.example.com"
  // or "https://*-myapp.example.com").
  "allow_origins_with_credentials": [
    "<DOMAIN-GOES-HERE>"
  ]
}

您可以閱讀文件以取得有關 CORS 配置的更多資訊。

在下一部分中，我們將提供一些可以使用此技術堆疊建立的應用程式的範例。

3. 帶有原始程式碼的用例和範例。

我們可以使用 Encore 和 Next.js 建立許多創新應用程式，因此讓我們探索一些脫穎而出的應用程式。前三個有源程式碼，後兩個只是您可以建置的示例想法。

✅建置正常運作時間監視器

您可以建立一個正常執行時間監控系統，當您的網站出現故障時通知您，以便您可以在用戶注意到之前修復它。

該應用程式將使用事件驅動架構，最終結果將如下所示。

這是自動產生的後端架構圖，其中白框是服務，黑框是 Pub/Sub 主題。

您可以檢查GitHub 儲存庫。

✅ URL 縮短器

您可以使用REST API和PostgreSQL database建立 URL 縮短器。它還將幫助您了解如何使用 Encore 建立 REST API 並在本地測試您的應用程式。

簡而言之，您需要實作/url端點，使用randomBytes作為唯一 ID 來縮短 URL。設定一個帶有遷移檔案的 PostgreSQL 資料庫來儲存原始和縮短的 URL。然後您需要修改 API 以便在縮短 URL 時將資料插入資料庫。

接下來，新增一個端點，透過使用短 ID 查詢資料庫來檢索原始 URL。使用本機開發儀表板測試 API，並包含/url清單端點以取得所有儲存的 URL。

您可以檢查GitHub 儲存庫。

✅ LLM 聊天室

需要明確的是，您不需要前端部分，但這是提高您對 Encore 的了解的好方法。

您可以建立一個聊天應用程式，將大型語言模型 (LLM)（例如 OpenAI 的 GPT 和 Anthropic 的 Claude）與聊天平台（例如 Slack 和 Discord）整合在一起。它可以幫助您建立具有獨特個性並可與用戶互動的人工智慧機器人。

這是一個基於微服務的應用程式，每個服務處理聊天機器人生態系統的特定方面。該服務使用 Encore API、發布/訂閱訊息和 WebSocket 通訊組合來協調聊天平台和 LLM 提供者之間的訊息流。

系統設計

您可以檢查GitHub 儲存庫。

✅ AI 部落格產生器

部落格寫作助理可根據使用者輸入產生文章，並允許編輯和發布。

技術堆疊：

• Next.js用於前端 UI，帶有 Tiptap 或 Lexical 等編輯器。

• Encore.ts作為後端 API 來處理文字產生請求。

• 用於產生文章草稿的OpenAI API (GPT-4) 。

• 文章準備好後Resend電子郵件通知。

• Supabase用於儲存草稿和已發表的文章。

範例流程：

• 使用者輸入一個主題，人工智慧就會產生草稿。

• 他們在應用程式內編輯、完善和發布。

• 準備就緒後將發送電子郵件通知。

✅ 用於協作的 Notion 風格應用程式

一個類似於 Notion 的簡單應用程式，用於筆記和任務的即時協作。

技術堆疊

• Next.js 使用 WebSockets 實作即時更新。

• Encore.ts 後端使用 Redis 進行即時資料同步。

• PostgreSQL 用於持久性資料儲存。

• Clerk/Auth.js 用於身份驗證。

• UploadThing 用於檔案儲存（用於將圖片新增至筆記）。

範例流程

• 使用者建立並共享工作區。

• 透過 WebSockets 實現跨裝置即時同步。

• 存取控制確保只有授權使用者才能編輯。

這些應該足以幫助您入門。

如果您正在尋找真正好的速成課程，您可以參考這個影片！

https://www.youtube.com/watch?v=tL01EzN2-xA

老實說，沒有任何技術堆疊是完美的，但 Encore 和 Next.js 絕對是建立全端應用程式的最佳和推薦方法之一。

如果您有任何其他想法，請告訴我。

祝你有美好的一天！直到下次:)

原文出處：https://dev.to/anmolbaranwal/the-perfect-stack-for-building-type-safe-applications-in-2025-k62