将 Express.js 服务器与 Next.js-13 集成：释放组合框架的强大力量

介绍：

Next.js-13 和 Express.js 是 JavaScript 生态系统中两个强大的框架，各有优势。Next.js-13 提供服务器端渲染 (SSR) 和静态站点生成 (SSG) 等功能，以及卓越的开发者体验。另一方面，Express.js 以其在构建服务器端应用程序方面的灵活性和稳健性而闻名。通过结合这两个框架，开发者可以充分利用它们的优势来创建功能丰富的 Web 应用程序。在本篇博文中，我们将探讨如何将 Express.js 服务器与 Next.js-13 无缝连接。

Next.js-13 的优势：

Next.js-13 具有诸多优势，这也是它在开发者中广受欢迎的原因：

服务器端渲染 (SSR)：Next.js 13 支持在服务器端渲染 React 组件，从而加快页面加载速度并提升搜索引擎优化 (SEO) 效果。
静态站点生成 (SSG)：它在构建过程中生成静态 HTML 页面，从而优化性能并降低服务器负载。
卓越的开发者体验：Next.js 13 提供流畅的开发体验，具备自动代码拆分、热模块重载和内置 TypeScript 支持等功能。

Express.js 的优势：

Express.js 是一个广泛采用的框架，用于使用 Node.js 构建服务器端应用程序。使用 Express.js 的一些主要优势包括：

灵活性：Express.js 采用极简主义、不预设框架的设计理念，允许开发者根据自身需求构建应用程序。
中间件生态系统：Express.js 拥有丰富的中间件模块，可以轻松地为服务器添加额外功能。
稳健性：凭借其成熟稳定的生态系统，Express.js 已被证明能够可靠地处理各种服务器端任务并高效地管理路由。

将 Next.js-13 和 Express.js 结合使用：

通过将 Express.js 服务器与 Next.js-13 集成，开发者可以充分利用两者的优势。Express.js 可以处理后端逻辑、路由和 API 端点，而 Next.js-13 则负责渲染 React 组件、服务器端渲染和静态站点生成。这种强大的组合使开发者能够构建动态 Web 应用程序，并充分利用每个框架的独特功能。

创建这两个项目的步骤：

首先，我们来创建一个基本的 Express 服务器。1
. mkdir exp-next && cd exp-next
2. npm init -y
3. npm install express cors
4.mkdir src && cd src && touch index.js

在 package.json 文件中添加一行“type”:“module”，以启用“import”语句，并添加“start”:“node src/index.js”脚本。

接下来，在 index.js 文件中添加以下几行代码，创建一个基本的 express 服务器，该服务器返回一个用户数组。

最后npm start运行服务器。如果一切正常，您将在控制台上看到“应用程序正在监听端口 5000！”。

接下来，我们将创建 Next.js-13 应用。请在命令提示符中运行以下命令。1
. 2. mkdir next-exp && cd next-exp
3.npx create-next-app@latest
您的项目名称是什么？ . 使用 . 会将 Next.js 安装到当前文件夹，文件夹名称为 next-exp。4
. 接受所有默认设置。5
.npm install --save express

Next.js 设置

打开 next.config.js 文件并进行以下更改。

客户端组件

在应用程序文件夹中，打开 page.tsx 文件并添加以下代码。

在你的 express 项目中运行npm start以启动服务器，并npm run dev在你的 next.js 项目中运行。

请注意，我们没有向 fetch 函数传递任何其他选项，只有 URL。Nextjs 默认使用 fetch(url, { cache: 'force-cache' })，它会自动缓存用户数据。

注意：Next.js 建议在客户端使用 SWR 或 React-Query 进行数据获取，而不是使用 useEffect hook。

服务器组件

在 app 文件夹中，打开 page.tsx 文件，并将之前的代码替换为以下几行。

这里我们向 fetch 函数传递 { cache: 'no-cache' } 选项，以禁用 Next.js 的默认行为，并在发出请求时始终重新获取用户。

搞定！现在您可以尽情享受 Next.js-13 的所有强大功能，同时保留您现有的 express.js 后端。
代码在这里。

感谢阅读。