Node.js、Express、React、Next.js 的关系：从前端 UI 到后端 API

React、Next.js、Node.js、Express 经常一起出现，但它们解决的问题不同。

Node.js

Node.js 是 JavaScript 的运行时，让 JavaScript 可以运行在服务器端。

它适合：

写后端服务
写脚本
构建工具
CLI 工具

Express

Express 是 Node.js 中常见的 Web 框架，用来写 API。

import express from "express";
 
const app = express();
app.use(express.json());
 
app.get("/api/users/:id", (req, res) => {
  res.json({ id: req.params.id });
});

Express 的 Request 类型通常有多个泛型槽位，用来描述 params、response body、request body、query 等。

React

React 是 UI 库，负责组件和状态。

function App() {
  return <h1>Hello</h1>;
}

React 本身不负责后端，也不规定路由和部署方式。

Next.js

Next.js 是 React 框架，提供：

文件路由
Layout
Server Component
Client Component
静态生成
服务端渲染
Route Handler

Next.js API

App Router 中可以写 Route Handler。

export async function GET() {
  return Response.json({ ok: true });
}

RESTful 用户接口可以拆成：

/api/users
/api/users/[id]

前端调用后端

const response = await fetch("/api/users/1");
const user = await response.json();

如果是跨域后端，需要处理 CORS、认证 token、错误状态码和 loading 状态。

关系总结

Node.js：运行 JavaScript 的服务器环境
Express：Node.js 后端框架
React：前端 UI 库
Next.js：React 全栈框架

目录