Índice del contenido[Esconder][Espectáculo]
Al elegir una biblioteca o marco de software, generalmente se tiene en cuenta la experiencia del desarrollador.
Cuando menciono la "experiencia del desarrollador", me refiero a cómo los desarrolladores realmente hacen el trabajo. Los desarrolladores eligen bibliotecas o marcos que son agradables de usar.
Esta es una de las principales razones por las que ahora tenemos las bibliotecas y marcos más populares. Como desarrolladores, no tenemos que empezar de cero cuando existen herramientas creadas para ayudarnos con nuestras tareas.
Los marcos son piezas de software que los desarrolladores crean y utilizan para construir aplicaciones, y NextJS es uno de ellos.
En esta publicación, repasaremos Nextjs, sus características clave y cómo podemos usarlo para crear una aplicación. Saltemos directamente.
¿Qué es Next.js?
Next.js es un marco de JavaScript para construir rápida y fácilmente páginas web estáticas y aplicaciones en línea basadas en React. Le permite diseñar excelentes aplicaciones web para una variedad de plataformas, incluidas Windows, Linux y Mac.
Debe estar familiarizado con el marco Next.js si tiene una mínima familiaridad con reaccionar y desea obtener más información sobre el ecosistema de reacción.
Aunque Next.js viene con todo lo que necesita para comenzar, puede seleccionar entre NPM e Yarn, JavaScript y TypeScript, CSS y SCSS, exportación estática e implementación sin servidor.
Caracteristicas
- El enrutamiento se realiza automáticamente: no necesita configurar nada porque cualquier URL se asigna al sistema de archivos, a los archivos en la carpeta de páginas (tiene opciones de personalización, por supuesto).
- Componentes de un solo archivo: es simple agregar estilos con alcance al componente usando styled-jsx, que está totalmente integrado y producido por el mismo equipo.
- Recarga de un código activo: cuando Next.js detecta una modificación guardada en el disco, vuelve a cargar la página.
- Componentes dinámicos: puede cargar dinámicamente módulos de JavaScript y componentes de React.
- Exportaciones estáticas: Next.js le permite exportar un sitio completamente estático desde su aplicación con el siguiente comando de exportación.
- Compatibilidad con el entorno: Next.js se integra a la perfección con los ecosistemas JavaScript, Node y React.
- Dividir códigos automáticamente: solo las bibliotecas y JavaScript que se requieren se utilizan para representar páginas. En lugar de crear un solo archivo JavaScript que contenga todo el código de la aplicación, Next.js divide inteligentemente la aplicación en muchos recursos.
¿Cómo crear una aplicación next.js?
Instalación
Puede usar el comando node npx para instalar y compilar un proyecto Next.js.
Esto generará una carpeta y todos los archivos, configuraciones y otros elementos necesarios para ejecutar un proyecto Next.js.
Puede iniciar la aplicación una vez que se haya generado.
Páginas y enrutamiento
Para manejar rutas con Next.js, no necesitamos emplear un marco de enrutamiento. El enrutamiento con Next.js es muy fácil de configurar. Cuando usa el comando create-next-app para crear una nueva aplicación Next.js, la aplicación crea una carpeta llamada "páginas" de forma predeterminada.
Esta carpeta de 'páginas' es donde mantiene sus rutas. Como resultado, cada archivo de componentes de reacción en el subdirectorio se manejará como una ruta separada.
Por ejemplo, si la carpeta contiene esos archivos:
- index.js
- acerca de.js
- artículos.js
Este archivo se transformará automáticamente de tres formas:
- La página de índice localhost/index
- La página acerca de localhost/acerca de
- La página del blog localhost/artículos
A continuación se muestra un ejemplo de una página about.js. No se proporciona nada sobre la página, como puede ver. Es simplemente un componente funcional estándar de React.
Rutas
Para hacer rutas anidadas, primero debe establecer una subcarpeta. Por ejemplo: páginas/artículos. Cree su componente de reacción 'contact.js' dentro de esa carpeta, y generará la página localhost/articles/contact.
Si coloca un archivo en pages/articles.js y otro en pages/articles/index.js. Ambos reflejan la misma ruta localhost/blog. En esta situación, Next.js solo representará el archivo article.js. ¿Qué pasa con las rutas dinámicas, en las que cada publicación de blog tiene su propio camino?
- localhost/blog/primer-artículo
- localhost/blog/-segundo-artículo
Usando la notación de corchetes, puede definir una ruta dinámica en Next.js. Por ejemplo: páginas/artículo/[slug].js
Rutas de enlace
Ya ha completado su primera ruta. Supongo que estás preguntando cómo conectar páginas a esas rutas. Necesitará 'siguiente/enlace' para hacerlo.
Este es un ejemplo de una página de inicio que incluye un enlace a la página Acerca de:
Si desea diseñar el enlace, use la siguiente sintaxis:
Redirigir rutas
¿Qué sucede si necesita forzar una redirección a una página determinada? Por ejemplo, cuando se presiona un botón? Puede lograr esto usando 'router.push':
SEO
Las páginas en aplicaciones web requieren elementos meta (cabecera) además de datos dentro del cuerpo HTML. Esto requerirá la instalación de un requisito adicional llamado React Helmet en una aplicación React.
Podemos usar el componente Head de next/head in Next para agregar fácilmente metadatos a nuestras páginas web que se mostrarán en los resultados de búsqueda e incrustaciones:
Componentes
Con frecuencia necesitará desarrollar componentes o un archivo de diseño. Por ejemplo, un componente que represente la barra de navegación. Solo hemos usado la carpeta de páginas hasta ahora. ¿Qué sucede si su componente no está destinado a ser una página de ruta?
No desea que el usuario navegue a una página como localhost/navbar. Si coloca el componente Navbar.js en la carpeta de páginas, eso es lo que sucederá. ¿Qué debes hacer en la situación?
Simplemente almacene todos sus componentes 'no una página' en una carpeta separada. La mayoría de los proyectos de Next.js usan el nombre de "componentes" y esta carpeta se genera en la carpeta raíz de su proyecto.
Componente de la cabeza
Next.js representa la carga de la página inicial en el lado del servidor. Lo hace modificando el HTML de su página. La sección de encabezado está incluida.
El componente Head de Next.js se utiliza para proporcionar etiquetas de sección de encabezado, como título y metadatos. El componente Head se usa en este ejemplo de un componente Layout.
Crear página 404 no encontrada
Es factible hacer tu propia página de error 404. Es posible que desee personalizar el mensaje o agregar su propio diseño de página. En la carpeta de páginas, cree el archivo 404.js.
Cuando se produce un error 404, Next.js redirigirá automáticamente a esta página. Aquí hay un ejemplo de una página 404 personalizada:
Obtención de datos del lado del servidor
En lugar de descargar datos en el lado del cliente, Next.js le permite realizar un llenado de datos inicial, lo que implica enviar la página con los datos ya llenados desde el servidor.
Tiene dos opciones para implementar la obtención de datos del lado del servidor:
- Los datos deben obtenerse en cada solicitud.
- Solo obtenga datos una vez durante el proceso de construcción (sitio estático)
Obtener datos en cada solicitud
El método getServerSideProps se usa para procesar cada solicitud del lado del servidor. Esta función se puede incluir al final de su archivo de componente. Next.js completará automáticamente las propiedades de su componente con el objeto getServerSideProps si esa función está presente en su archivo de componente.
Obtener datos en el momento de la compilación
El método getStaticProps se usa para representar el lado del servidor en el momento de la compilación. Esta función se puede incluir al final de su archivo de componentes. Este método ejecuta el código del servidor y envía una solicitud GET al servidor, pero solo una vez cuando finaliza nuestro proyecto.
¿Por qué debería aprender Next.js?
Una de las razones de esto es que Next.js se basa en React, un conjunto de herramientas de desarrollo front-end para creación de interfaces de usuario que son mi opción favorita para diseñar aplicaciones web.
Pero no sería suficiente si Next.js no fuera bueno en lo que hizo... ¿verdad?
Entonces, ¿qué es exactamente lo que hace?
Primero debemos definir algunos conceptos para comprenderlo. Next.js ganó popularidad porque resolvió un problema que muchos desarrolladores web tenían con las aplicaciones web del lado del cliente (en el navegador). Estas aplicaciones de página única (SPA) tenían una mejor experiencia ya que no necesitaban que el usuario recargara la página y permitían una mayor interactividad.
Sin embargo, debido a que la mayor parte del material en una aplicación como esta se vuelve visible solo cuando se ejecuta en el navegador, los rastreadores web tienen dificultades para comprender el contenido de texto de dicha aplicación.
Como resultado, a pesar de su popularidad, muchos SPA permanecieron en gran medida anónimos para los grandes motores de búsqueda como Google. Next.js ahora incluye un mecanismo integrado más sólido para la representación del lado del servidor (SSR) de los componentes de React.
Next.js permite a los desarrolladores construir código JavaScript en el servidor durante el proceso de creación y proporcionar HTML básico e indexable al usuario.
Para Agencias y Operadores
- Genial para la experiencia del usuario
- Genial para SEO
- Cree un sitio web estático súper rápido que se comporte como un sitio dinámico
- Flexibilidad en la creación de UI y UX.
- Muchas ventajas de desarrollo
- Gran apoyo de la comunidad.
Desventajas
- Los sitios web o las aplicaciones tienen una cierta cantidad de tiempo para construirse o desarrollarse.
- Para ciertas tareas, Next.js es inadecuado. Los desarrolladores deberían poder construir rutas dinámicas utilizando las herramientas de Node.js.
Conclusión
Como puede ver, Next.js simplifica el desarrollo de la aplicación React y le permite concentrarse en lo que más importa: la lógica y la interfaz de usuario de su aplicación. Incluye todo lo necesario para crear aplicaciones contemporáneas, ricas en frontend y basadas en API.
También es apropiado para proyectos de solo contenido, como blogs y sitios web comerciales, debido a su capacidad para crear páginas HTML estáticas.
Con las ediciones actuales, Next.js no solo mantiene un alto nivel de experiencia del desarrollador, sino que también brinda herramientas para aumentar el rendimiento visual y la experiencia del usuario, lo que garantiza un futuro brillante para este marco.
Deje un comentario