React is a UI library; Next.js is a React framework with routing, bundling, and server rendering. Use a Vite SPA when you have a static host and a separate API, and use Next when you want file-based routes, SSR/SSG, or Server Components. Next is still React — this sheet is about what the framework adds.
This React cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.
Quick reference
- React: Components + hooks. You choose Vite, routing, and hosting.
- Next App Router: Folders are routes.
page.tsx,layout.tsx, nested layouts. - SSR / SSG: HTML on first response for SEO and speed to first paint. SPA sends a shell plus JS.
- RSC: Server Components can read data without a client waterfall. Client components need
"use client". - API:
route.tshandlers or a separate PHP/Node API. Do not mix blindly with cookie auth. - Images:
next/imageoptimization — extra ops constraints on some hosts. - SPA still wins: Dashboards behind login, XAMPP PHP backends, or static S3/CDN with a REST API.
- Cost: Next needs a Node-capable host (or static export with limitations). Vite SPA is any static host.
Copy-paste examples
Client widget inside a server page (pattern)
The interactive island is a client component. The page around it can stay a server component in Next.
'use client';
import { useState } from 'react';
export function Qty() {
const [n, setN] = useState(1);
return (
<button type="button" onClick={() => setN((x) => x + 1)}>
Qty {n}
</button>
);
}Common mistakes
- Marking every file
"use client"and throwing away Server Components. - Fetching in a client
useEffecton the first paint when a server component could have included the data. - Choosing Next for a three-page brochure that a static React+PHP site already serves.
- Confusing
next exportlimitations (no server features) with full SSR hosting.
FAQ
- Is Next required to use React? No. Vite + React is a complete SPA stack. Next is extra structure and server abilities.
- Can Next talk to PHP? Yes. Treat PHP as the API/origin. Or skip Next and render PHP templates with a React island where needed.
- Pages Router vs App Router? App Router is the current default (RSC). Pages Router (
pages/) still exists in many codebases — say which you have shipped.
Related React cheat sheets
Build with this stack
When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.
Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.