Node.js, Express, React, and Next.js: From Frontend UI to Backend APIs

React, Next.js, Node.js, and Express often appear together, but they solve different problems.

Node.js

Node.js is a JavaScript runtime that lets JavaScript run on the server.

It is useful for:

Backend services
Scripts
Build tools
CLI tools

Express

Express is a common Node.js web framework for APIs.

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 types often use generic slots for params, response body, request body, query, and more.

React

React is a UI library for components and state.

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

React itself does not define backend behavior, routing, or deployment.

Next.js

Next.js is a React framework providing:

File-based routing
Layouts
Server Components
Client Components
Static generation
Server rendering
Route Handlers

Next.js APIs

In the App Router, APIs can be written as Route Handlers.

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

RESTful user routes can be split as:

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

Calling the Backend

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

For cross-origin backends, handle CORS, auth tokens, error status codes, and loading state.

Summary

Node.js: server runtime for JavaScript
Express: backend framework on Node.js
React: frontend UI library
Next.js: full-stack React framework

Table of Contents