Publicado · en mejora
Framework · Desde 2016
Next.js es un framework de React para sitios web y aplicaciones full stack, con enrutamiento basado en archivos, renderizado en servidor y Server Components.
Next.js es un framework de React de código abierto creado por Vercel y publicado por primera vez en 2016. Reúne lo que con React solo tendrías que combinar por tu cuenta: enrutamiento, renderizado en el servidor, generación estática, obtención de datos y herramientas de compilación. El App Router, la opción recomendada, se basa en React Server Components: la estructura de carpetas del directorio app define las URL, y el código de servidor y de cliente conviven en un mismo proyecto.
Next.js destaca donde importan tanto el rendimiento como la visibilidad en buscadores, y se usa mucho en sitios corporativos, blogs y documentación, tiendas en línea y paneles SaaS. Cada ruta puede prerenderizarse al compilar o renderizarse en cada petición, y las partes lentas pueden enviarse progresivamente mediante streaming. Las Server Actions y los Route Handlers se encargan de formularios y API, de modo que un solo código base cubre la interfaz y el backend que la sirve. Además, incluye optimización de imágenes, fuentes y scripts.
Para empezar, instala Node.js, crea un proyecto con create-next-app y sigue la documentación oficial Getting Started y el curso gratuito Learn Next.js. Conocer los componentes, las props y los hooks de React facilita mucho el camino, así que, si React es nuevo para ti, aprende primero sus fundamentos. TypeScript funciona sin configuración adicional y se recomienda para proyectos nuevos.
Las carpetas y archivos especiales como page, layout, loading y error del directorio app definen las URL, los layouts anidados, los estados de carga y las pantallas de error.
Los componentes se renderizan en el servidor por defecto y no envían JavaScript al navegador; solo las partes marcadas con "use client" se ejecutan en él.
Combina generación estática, renderizado en cada petición y streaming según la ruta, y mantén el contenido al día con caché y revalidación.
Componentes de imagen, fuentes y scripts, división automática del código, precarga de enlaces y Turbopack para compilaciones y recargas rápidas.
Instala una versión LTS de Node.js desde nodejs.org y comprueba la versión en una terminal. Incluye npm; también puedes usar pnpm, Yarn o Bun.
node --versionGenera un proyecto nuevo con create-next-app. Los valores recomendados configuran TypeScript, ESLint, Tailwind CSS y el App Router.
npx create-next-app@latest my-appEntra en la carpeta del proyecto, inicia el servidor de desarrollo y abre http://localhost:3000. La página se actualiza en cuanto guardas un archivo.
cd my-app && npm run devEn el App Router, app/page.tsx es la página de inicio en /. El componente de React que exporta por defecto se convierte en la página; aquí es un Server Component que devuelve un título. Al guardar, el navegador se actualiza al instante, y si añades app/about/page.tsx se crea una nueva página /about.
app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
npx create-next-app@latest my-app && cd my-app && npm run devSeis capítulos que te llevan desde la instalación hasta las ideas clave de Next.js.
Haz preguntas, comparte tu experiencia e intercambia opiniones sobre Next.js.
Todavía no hay debates. Empieza el primero.
0 comentarios
Iniciar sesión · Inicia sesión para dejar un comentario.
Sé el primero en comentar.