React para producción
Next.js es el framework React para aplicaciones web completas.
Por qué Next.js
| Feature | Beneficio |
|---|---|
| Server Components | Menos JavaScript al cliente |
| App Router | Rutas basadas en carpetas |
| SSR/SSG | SEO y performance |
| API Routes | Backend integrado |
Instalación
npx create-next-app@latest mi-app --typescript --tailwind --app
cd mi-app
npm run dev
Estructura de carpetas
app/
├── layout.tsx # Layout global
├── page.tsx # Página /
├── about/
│ └── page.tsx # Página /about
├── api/
│ └── hello/
│ └── route.ts # API endpoint
└── [slug]/
└── page.tsx # Ruta dinámica
Server vs Client Components
// Server Component (default)
async function ProductList() {
const products = await db.products.findMany()
return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}
// Client Component
'use client'
function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
API Routes
// app/api/users/route.ts
import { NextResponse } from 'next/server'
export async function GET() {
return NextResponse.json({ users: [] })
}
export async function POST(request: Request) {
const body = await request.json()
return NextResponse.json({ created: body })
}