Estudio de Next.js

• Renderizado en el servidor (SSR)
• Creación de páginas estáticas (SSG)
• Optimización automática de código

• Aplicaciones de React con SSR
• Aplicaciones de React con SSG
• Sitios web de alto rendimiento

Instalación: npx create-next-app@latest

// app/page.js (App Router)
export default function Page() {
  return <h1>Hola Next.js</h1>;
}

1. Página estática (SSG)

Genera una página en build-time con datos de una API.

// pages/posts.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  return { props: { posts: await res.json() } };
}
export default function Posts({ posts }) {
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

2. API route (backend)

Endpoint JSON propio dentro de la app Next.

// pages/api/hola.js
export default function handler(req, res) {
  res.status(200).json({ mensaje: 'Hola desde Next API' });
}
// GET /api/hola → { "mensaje": "Hola desde Next API" }