Introducción
¡Bienvenido a la documentación de Next.js!
¿Qué es Next.js?
Next.js es un framework de React para construir aplicaciones web full-stack. Utilizas componentes de React para construir interfaces de usuario, y Next.js para características adicionales y optimizaciones.
Internamente, Next.js también abstrae y configura automáticamente las herramientas necesarias para React, como bundling, compilación y más. Esto te permite concentrarte en construir tu aplicación en lugar de perder tiempo con configuraciones.
Ya seas un desarrollador individual o parte de un equipo más grande, Next.js puede ayudarte a construir aplicaciones React interactivas, dinámicas y rápidas.
Características principales
Algunas de las características principales de Next.js incluyen:
| Característica | Descripción |
|---|---|
| Enrutamiento (Routing) | Un sistema de enrutamiento basado en archivos construido sobre Componentes del Servidor que soporta layouts, enrutamiento anidado, estados de carga, manejo de errores y más. |
| Renderizado (Rendering) | Renderizado del lado del cliente (CSR) y del servidor (SSR) con Componentes del Cliente y del Servidor. Optimizado con Renderizado Estático y Dinámico en el servidor con Next.js. Streaming en entornos Edge y Node.js. |
| Obtención de datos (Data Fetching) | Obtención de datos simplificada con async/await en Componentes del Servidor, y una API fetch extendida para memoización de solicitudes, caché de datos y revalidación. |
| Estilos (Styling) | Soporte para tus métodos de estilado preferidos, incluyendo CSS Modules, Tailwind CSS y CSS-in-JS |
| Optimizaciones | Optimizaciones de imágenes, fuentes y scripts para mejorar las Core Web Vitals y la experiencia de usuario de tu aplicación. |
| TypeScript | Mejor soporte para TypeScript, con mejor verificación de tipos y compilación más eficiente, además de un plugin personalizado de TypeScript y verificador de tipos. |
Cómo usar esta documentación
En el lado izquierdo de la pantalla, encontrarás la barra de navegación de la documentación. Las páginas están organizadas secuencialmente, desde básico a avanzado, para que puedas seguirlas paso a paso al construir tu aplicación. Sin embargo, puedes leerlas en cualquier orden o saltar a las páginas que apliquen a tu caso de uso.
En el lado derecho de la pantalla, verás una tabla de contenidos que facilita la navegación entre secciones de una página. Si necesitas encontrar rápidamente una página, puedes usar la barra de búsqueda en la parte superior, o el atajo de búsqueda (Ctrl+K o Cmd+K).
Para comenzar, consulta la guía de Instalación.
App Router vs Pages Router
Next.js tiene dos sistemas de enrutamiento diferentes: el App Router y el Pages Router. El App Router es un sistema más nuevo que te permite usar las últimas características de React, como Componentes del Servidor y Streaming. El Pages Router es el sistema original de Next.js, que te permitía construir aplicaciones React renderizadas en el servidor y sigue siendo soportado para aplicaciones antiguas de Next.js.
En la parte superior de la barra lateral, notarás un menú desplegable que te permite cambiar entre las características del App Router y el Pages Router. Dado que hay características únicas para cada directorio, es importante llevar un registro de qué pestaña está seleccionada.
Las migas de pan en la parte superior de la página también indicarán si estás viendo documentación del App Router o del Pages Router.
Conocimientos previos
Aunque nuestra documentación está diseñada para ser amigable para principiantes, necesitamos establecer una base para que la documentación pueda mantenerse enfocada en la funcionalidad de Next.js. Nos aseguraremos de proporcionar enlaces a documentación relevante cada vez que introduzcamos un nuevo concepto.
Para aprovechar al máximo nuestra documentación, se recomienda tener un conocimiento básico de HTML, CSS y React. Si necesitas repasar tus habilidades en React, consulta nuestro Curso de Fundamentos de React, que te introducirá a los conceptos básicos. Luego, aprende más sobre Next.js construyendo una aplicación de panel.
Accesibilidad
Para una accesibilidad óptima al usar un lector de pantalla mientras lees la documentación, recomendamos usar Firefox con NVDA, o Safari con VoiceOver.
Únete a nuestra comunidad
Si tienes preguntas sobre cualquier tema relacionado con Next.js, siempre eres bienvenido a preguntar a nuestra comunidad en GitHub Discussions, Discord, Twitter y Reddit.