[Next.js][Setup] React (Vite) vs Next.js and Create a Next.js Project
Compare CSR with React + Vite against SSR/RSC with Next.js for SEO and first paint, then scaffold a Next.js app with pnpm create next-app.
1. Environment
- OS: Windows 11 / macOS
- Framework / library: Next.js, React, TypeScript
- Package manager: pnpm
- Terminal: PowerShell (Windows) / zsh (macOS)
2. Problem
A natural question is: “I already build UIs fine with React (Vite) - why learn another framework called Next.js|–
If you mix up the purpose of each stack and pick the wrong one, you can launch a product that never shows up in search results - a costly failure.
3. Cause
React (Vite) = CSR (Client-Side Rendering)
The browser first gets a nearly empty HTML shell, then downloads a large JavaScript bundle and assembles the UI on the user?’s machine.
Complex screens mean a longer white flash. Search crawlers often see that empty shell and treat the site as having little or no content.
Next.js = SSR (Server-Side Rendering)
The server builds HTML that already contains data and sends a complete page. Users see content immediately, and crawlers can read the full document.
| React + Vite + TypeScript | Next.js + TypeScript | |
|---|---|---|
| Rendering | CSR | –browser fills an empty HTML shell with JS |
| First load | Slower until JS finishes downloading | Shows a finished page quickly |
| SEO | Weak | –bots often see an empty shell |
| Learning curve | Lower, more straightforward | Needs some server / backend concepts |
| Best fit | Internal admin tools, dashboards, complex apps | Stores, blogs, landing pages, B2C products |
Related: Create a React + Vite + TypeScript project
4. Solution
1) Scaffold a Next.js project
From the folder where you want the app, run (Windows / macOS):
pnpm create next-app@latest2) Choose init options
Picking Next.js defaults installs a common, practical set of settings and libraries in one go.
3) Start the dev server
Enter the folder you named during setup, then run:
cd my-next-app
pnpm dev4) Verify in the browser
Open http://localhost:3000. If you see the Next.js starter screen (dark background), the project is ready.
5. Summary
- Need rich interaction and no strong SEO (admin tools, dashboards)? Prefer React (Vite).
- Need search visibility and a fast first paint (shops, blogs, marketing pages)? Prefer Next.js.
