Introduction
React is the library. Next.js is the framework. This guide focuses on the App Router paradigm, which fundamentally changes how we build React applications by moving logic to the server.
🚀 Next.js App Router Crash Course
Server vs Client Components:
// app/page.tsx (Server Component by default)
import { db } from '@/lib/db';
export default async function Page() {
const data = await db.post.findMany();
return (
<main>
<h1>Posts</h1>
{data.map(post => <div key={post.id}>{post.title}</div>)}
</main>
);
}⚠️ The Paradigm Shift
- Forget `useEffect` for data fetching: We fetch directly in async components.
- Forget `API Routes` for forms: We use Server Actions.
- Default is Server: Components are server-side by default. You must opt-in to client-side.
🎯 Expected Outcome
By the end of this guide, you will be able to:
- Build full-stack applications without a separate backend API.
- Understand the Network Boundary between Server and Client.
- Implement Streaming and Suspense for instant UI feedback.
- Manage database connections safely in a serverless environment.
- Deploy to Vercel with Edge caching strategies.
How to use this guide
- Prerequisites: You must know React (Hooks, Props, State). If not, go to the React Guide first.
- The "No-Copy" Rule: Type every line of code.
- Environment: We will use `create-next-app` with TypeScript and Tailwind CSS.