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 definido con varias optimizaciones de rendimiento integradas. La idea principal detrás del framework es garantizar que las aplicaciones comiencen y mantengan su rendimiento lo más posible, ya que estas capacidades se incluyen de forma predeterminada.
En esta introducción, se abordarán brevemente muchas funciones que proporciona el framework de forma general. Las otras guías de esta colección explorarán las funciones con más detalle.
¿Qué aprenderás?
Si bien Next.js proporciona varias optimizaciones de rendimiento de forma predeterminada, el objetivo de estas guías es explicarlas con más detalle y mostrarte cómo puedes usarlas para crear una experiencia rápida y eficaz.
En general, hay muchas optimizaciones que se pueden agregar a los sitios de React y que también funcionarían para las aplicaciones compiladas con Next.js. No se cubrirán porque nos enfocamos en lo que Next.js proporciona específicamente. 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 mediante 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 (Babel, por ejemplo) 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 proporcionando una cadena de herramientas de compilación completa con un solo comando.
Si bien hay algunas optimizaciones predeterminadas integradas en CRA, el objetivo de la herramienta es proporcionar una configuración simple y directa. Los desarrolladores pueden decidir si desean expulsar y modificar los parámetros de configuración 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 les resultan difíciles de configurar, como las siguientes:
- Renderización del servidor
- División automática de código
- Carga previa de ruta
- Enrutamiento del sistema de archivos
- Diseño de CSS en JS (
styled-jsx)
Establece la configuración
Para crear una aplicación de Next.js nueva, ejecuta el siguiente comando:
npx create-next-app new-app
A continuación, 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 app de Next.js nueva.
- Haz clic en Remix to Edit para que el proyecto sea editable.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
.
Ten en cuenta 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 automática del código.
Además, cada carga inicial de página en Next.js se renderiza en el servidor. Si abres el panel Network en Herramientas para desarrolladores, podrás ver que la solicitud inicial del documento muestra una página completamente renderizada por el servidor.
Estas son solo algunas de las muchas funciones que Next.js proporciona automáticamente. Muchas se pueden personalizar y se pueden modificar para diferentes casos de uso.
¿Qué sigue?
Juego de palabras Center
Todas las demás guías de esta colección explorarán en detalle una función específica de Next.js:
- Carga previa de la ruta para acelerar la navegación de páginas
- Entrega páginas híbridas y solo de AMP para que se carguen más rápido desde los motores de búsqueda
- Componentes de división de código con importaciones dinámicas para reducir las huellas de JavaScript