2025 年构建类型安全应用程序的完美堆栈

试图在 2025 年挑选出最好的技术堆栈非常困难，尤其是在所有新框架发布的情况下。

这不仅仅是类型安全的问题。你还需要良好的性能、可扩展性、开发者体验 (DX) 和良好的社区，这样你才不会陷入困境。

今天，我们将了解为什么 Next.js（前端）和 Encore.ts（后端）可能是现代开发人员的最佳全栈组合。

让我们开始吧。

涵盖哪些内容？

简而言之，我们正在详细介绍这些主题。

为什么这个技术栈是一个可靠的选择。
有关如何开始使用 Next.js 和 Encore 的分步指南。
一些带有源代码的真实示例。

注意：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.tscloud-agnostic默认启用，这意味着它提供了一个基于云提供商 API 的抽象层prevent vendor lock-in。随着需求的变化，您可以调整已配置的基础架构，而无需更改应用程序代码。这真的非常有用！

⚡ 额外福利

Next.js：详尽的文档和活跃的社区支持是众多开发者青睐 Next.js 的原因。它还提供丰富的插件、教程和资源。您可以查看Awesome Next.js，它在 GitHub 上拥有超过 1 万颗星。

Encore.ts：Encore 为您打造云基础架构和 DevOps。这使得开发人员能够使用微服务、Postgres 和 Pub/Sub 等工具快速创建可用于生产的后端，而无需面对常见的复杂性和 DevOps 麻烦。

您可以做更多令人惊奇的事情，所以请查看Next.js 文档和Encore.ts 文档。

如果您对 Encore 还很陌生，我强烈建议您观看这个官方教程。

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。

确保backend directory在运行之前切换到encore app init。我最初忘记了，所以我不得不再做一次。

设置完成后，您将获得Application ID和Cloud Dashboard URL。请记下这些，因为您稍后会需要它们。

步骤 3：运行您的 Encore 应用程序。

现在，您需要backend directory使用命令在内部启动您的 encore 应用程序encore run。

前往frontend/package.json并将其替换 {{ENCORE_APP_ID}} 为您的实际 Encore 应用程序 ID。您也可以在中找到此 ID encore.app。

"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可视化工具）等。InfraFlowSnippets

本地仪表板在开始时有小型演示，因此您肯定不会遇到困难。

每当您对 Encore 端点进行更改时，请确保通过重新生成请求客户端来保持后端和前端之间的契约同步。

可以通过运行来完成npm run gen。

步骤 5：使用 Encore Cloud 部署后端。

我假设你有一个包含代码更改的 GitHub 存储库。

在 Encore Cloud Dashboard中打开您的应用程序。

转到您的应用程序设置并将设置Root Directory为 backend。这是因为该encore.app 文件位于后端目录中。

在集成中，将您的帐户连接到 GitHub，这将打开 GitHub，您可以在其中授予对相关存储库的访问权限。

一旦连接到 GitHub，推送代码将自动触发部署。

您可以在文档中阅读有关使用 Encore Cloud 部署应用程序的更多信息。

您可以在云端仪表板中跟踪部署进度。完成后，您的应用将在云端上线！🎉

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

我们将使用 Vercel 进行前端部署。只需在 Vercel 上创建一个新项目并将其指向你的 GitHub 仓库即可。

在项目设置中，将根目录设置为frontend。

一旦部署完毕，您的前端就应该上线了！

处理 CORS 问题

我们也来谈谈吧CORS configuration。

如果您在从前端调用 Encore API 时遇到 CORS（跨域资源共享）问题，则可能需要指定哪些来源被允许访问您的 API（通过浏览器）。

您可以通过配置文件global_cors 中的密钥来执行此操作encore.app ，该文件具有以下结构：

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>"
  ]
}