Next.js se encarga de muchas optimizaciones en tu app de React para que tú no tengas que hacerlo
Next.js es un framework de React bien definido con varias optimizaciones de rendimiento integradas. La idea principal detrás del framework es asegurarte de que las aplicaciones se inicien y mantengan el mayor rendimiento posible incluyendo estas capacidades de forma predeterminada.
En esta introducción, se abordarán brevemente muchas funciones que proporciona el framework a un nivel alto. En las otras guías de esta colección, se exploran las funciones con más detalle.
¿Qué aprenderás?
Aunque Next.js proporciona una serie de optimizaciones de rendimiento de forma predeterminada, en estas guías se pretende explicarlas con más detalle y mostrarte cómo puedes usarlas para crear una experiencia rápida y con buen rendimiento.
Hay muchas optimizaciones que se pueden agregar a los sitios de React en general y que también funcionarían para las aplicaciones compiladas con Next.js. Esto no se abarcará, ya que la atención se centra en lo que Next.js proporciona. Para obtener más información sobre las optimizaciones generales de React, consulta nuestra colección de React.
¿En qué se diferencia Next.js de React?
React es una biblioteca que facilita la compilación de interfaces de usuario con un enfoque basado en componentes. Aunque es potente, React es específicamente una biblioteca de IU. Muchos desarrolladores incluyen herramientas adicionales, como un agrupador de módulos (por ejemplo, webpack) y un transpilador (por ejemplo, Babel) para tener una cadena de herramientas de compilación completa.
En la colección de React, adoptamos el enfoque de usar Crear app de React (CRA) para iniciar apps de React con rapidez. CRA facilita la configuración de una aplicación de React, ya que proporciona una cadena de herramientas de compilación completa con un solo comando.
Aunque hay algunas optimizaciones predeterminadas integradas en CRA, la herramienta tiene como objetivo proporcionar una configuración simple y directa. Los desarrolladores tienen la opción de decidir si expulsar y modificar las configuraciones por su cuenta.
Next.js, que también se puede usar para crear una nueva aplicación de React, adopta un enfoque diferente. Proporciona de inmediato una serie de optimizaciones comunes que a muchos desarrolladores les gustaría tener, pero que les resultan difíciles de configurar, como las siguientes:
- Renderización del servidor
- División de código automática
- Carga previa de rutas
- Enrutamiento del sistema de archivos
- Diseño de CSS en JS (
styled-jsx)
Establece la configuración
Para crear una nueva aplicación de Next.js, ejecuta el siguiente comando:
npx create-next-app new-app
Luego, navega al directorio y, luego, inicia el servidor de desarrollo:
cd new-app
npm run dev
En la siguiente incorporación, se muestra la estructura de directorios de una nueva app de Next.js.
- Haz clic en Remix para editar para que el proyecto se pueda editar.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
.
Observa que se crea un directorio pages/ con un solo archivo: index.jsx. Next.js sigue un enfoque de enrutamiento del sistema de archivos, en el que cada página dentro de este directorio se entrega como una ruta independiente. Si creas un archivo nuevo en este directorio, como about.js, se creará automáticamente una ruta nueva (/about).
Los componentes también se pueden crear y usar como cualquier otra aplicación de React. Ya se creó un directorio components/ con un solo componente, nav.js, que ya se importó en index.js. De forma predeterminada, cada importación que se usa en Next.js solo se recupera cuando se carga esa página, lo que proporciona los beneficios de la división de código automatizada.
Además, cada carga inicial de la página en Next.js se renderiza en el servidor. Si abres el panel Network en Herramientas para desarrolladores, verás que la solicitud inicial del documento muestra una página procesada por el servidor por completo.
Estas son solo algunas de las numerosas funciones que Next.js proporciona automáticamente. Muchos se pueden personalizar y modificar para diferentes casos de uso.
¿Qué sigue?
Juego de palabras KitKat
Las demás guías de esta colección explorarán en detalle una función específica de Next.js:
- Carga previa de rutas para acelerar las navegaciones de páginas
- Publicación de páginas híbridas y solo de AMP para acelerar la carga desde los motores de búsqueda
- Componentes de división de código con importaciones dinámicas para reducir las huellas de JavaScript