在前端开发领域，使用 Next.js 和 Nest.js 可能是您最优秀的技术选择，这是因为 Next.js 提供了一种轻松构建 React 应用程序的方法，而 Nest.js 是一个用 TypeScript 构建可扩展服务器端应用程序的框架。
这篇文章将展示如何使用 Next.js 和 Nest.js 构建一个全栈应用程序，涵盖以下主要步骤：
- 安装与配置环境
- 建立 Nest.js 服务器
- 集成 Nest.js 服务器
- 在您的 Next.js 应用中调用 Nest.js 服务
1. 安装与配置环境
在开始之前，您需要安装 Node.js 及其包管理器 npm。接着，您需要在您的计算机上全局安装 Nest.js CLI：
# 安装 Nest.js CLI npm i -g @nestjs/cli
另外，要创建 Next.js 应用程序需要使用 npx：
# 全局安装 npx npm i -g npx
现在您有了环境。接着，我们需要建立 Nest.js 服务器。
2. 建立 Nest.js 服务器
使用以下命令，创建一个名为 nest-server 的 Nest.js 服务器：
# 创建 Nest.js 服务器 nest new nest-server
然后，您可以使用以下命令，在该服务器中启动它：
# 启动 Nest.js 服务器 cd nest-server npm run start
您可以访问 http://localhost:3000/api，应该会看到一些 JSON 数据。
现在，我们已经 created 了 Nest.js 服务器，接下来我们需要将其集成到 Next.js 应用程序中，以供 React 组件使用。
3. 集成 Nest.js 服务器
在您的 Next.js 应用程序中，首先需要安装以下依赖项：
# 安装依赖项 npm i -D @nestjs/terminus isomorphic-ws ws npm i @nestjs/microservices
现在，您可以在 pages/api 目录下，创建一个新文件命名为 nest.ts.
pages/api/nest.ts
这个文件中的代码会将 Nest.js 服务器集成到 Next.js 应用程序中：
// www.javascriptcn.com code example
import { TerminusModule } from '@nestjs/terminus';
import { Transport } from '@nestjs/microservices';
import { NestFactory } from '@nestjs/core';
import { WebSocketAdapter } from '@nestjs/platform-ws/adapters';
import { AppModule } from '../../src/app.module';
import { AllExceptionsFilter } from '../../src/common/filter/all-exceptions.filter';
import { WsAdapter } from '../../src/common/socket/ws-adapter';
import { SocketIoAdapter } from '../../src/common/socket/socket-io.adapter';
import { HttpExceptionFilter } from '../../src/common/filter/http-exception.filter';
export default async function handler(req, res) {
const app = await NestFactory.create(AppModule, {});
app.useWebSocketAdapter(new WebSocketAdapter(app));
app.useWebSocketAdapter(new SocketIoAdapter(app));
app.useGlobalFilters(new AllExceptionsFilter(), new HttpExceptionFilter());
app.connectMicroservice({
transport: Transport.TCP,
options: {
host: 'localhost',
port: 3002,
},
});
await app.listen(3001);
await app.startAllMicroservicesAsync();
await app.get(TerminusModule).check([
async () => {
/** 这里是健康检查的代码 */
},
]);
await app.close();
return res({ name: 'John Doe' })
}这可以将 Nest.js 的服务器集成到 Next.js 应用程序中。现在，我们可以创建并使用 Nest.js 的服务。
4. 在您的 Next.js 应用中调用 Nest.js 服务
在您的客户端代码中，您可以使用以下示例代码建立 Nest.js 的连接：
// www.javascriptcn.com code example
import { Client, ClientProxy } from '@nestjs/microservices';
import { Subject } from 'rxjs';
export const connect = () => {
return new Promise((resolve, reject) => {
const client = new Client({
transport: Transport.WEB_SOCKET,
options: {
url: `//localhost:3001`,
path: '/ws',
},
});
client.connect().subscribe({
next() {
resolve(client);
},
error() {
reject(new Error('Failed to connect to server'));
},
});
});
};
export const proxy = async () => {
const client = await connect();
return client.proxy;
};这将返回一个可以使用的客户端代理。现在，我们创建一个名为 sample 的控制器，如下：
// www.javascriptcn.com code example
import { Controller, Get } from '@nestjs/common';
@Controller('sample')
export class SampleController {
constructor() {}
@Get()
getSample(): Object {
return {
message: 'Hello from Nest.js!',
};
}
}然后，我们导出该控制器，使我们的 Nest.js 应用程序可以使用它。
// www.javascriptcn.com code example
import { Module } from '@nestjs/common';
import { SampleController } from './sample/sample.controller';
@Module({
controllers: [SampleController],
})
export class AppModule {}
export default AppModule;现在，我们可以在 React 组件中使用以下示例代码，从 Nest.js 服务获取数据：
// www.javascriptcn.com code example
import { useEffect, useState } from 'react';
import { proxy } from '../api/nest';
export const useGetSample = () => {
const [result, setResult] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
proxy()
.then((client: any) => client.sampleController.getSample().toPromise())
.then((response: any) => setResult(response))
.catch((e: any) => setError(e))
.finally(() => setLoading(false));
}, []);
return { result, error, loading };
};这将返回一个可以在 React 组件中使用的钩子，该钩子可以使用上面导出的控制器调用 Nest.js 应用程序。
这样，我们就完成了一个完整的全栈应用程序，其中前端使用 Next.js 框架，后端使用 Nest.js 框架，实现了与客户端界面交互和数据处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7aef6a941bf7134dc4e18