Nx + Next.js = ❤

Hola a todos, mi nombre es Adam Ellibert, también conocido como Big AB, y soy un colaborador principal en un proyecto llamado NX. Y hoy, voy a hacer un recorrido rápido de una forma realmente genial de hacer desarrollo web. Probablemente ya hayan escuchado hablar de un proyecto llamado Next.js. Es ese marco genial para crear sitios Jamstack ya sea generados estáticamente o SSR, o ese enfoque híbrido increíble, bueno, de los dos. Pero lo que probablemente no hayan escuchado es NX. Entonces, ¿qué es NX? Bueno, básicamente es un conjunto de herramientas de desarrollo para mejorar la experiencia del desarrollador. Y es un paquete de CLI en npm, por lo que pueden hacer npm install nx. Obtendrán todos estos comandos geniales que pueden utilizar para ayudar en su desarrollo. Es extensible porque está basado en complementos. Por lo tanto, básicamente pueden hacer que haga lo que quieran, y es de código abierto. Tiene licencia MIT. Entonces, si sienten que quieren contribuir o necesitan hacer un fork o algo así, todo es completamente de código abierto. Les mostraré una serie de comandos que les ayudarán en su desarrollo y que NX les proporciona. El primero es crear un espacio de trabajo NX. Si están acostumbrados a crear una aplicación de react, esto es realmente nuestro Create Next app, esto es muy familiar, esto va a crear un espacio de trabajo NX, que en nuestro mundo es un monorepo. Es donde su organización va a tener todas sus aplicaciones y todas sus bibliotecas compartidas en un solo lugar, y eso realmente ayudará en el desarrollo. Explicaré por qué más adelante. Luego está este NX generate. El concepto de esquemas proviene de Angular, pero NX les permite usarlo en cualquier marco, incluido Next.js y React. NX serve es básicamente como un servidor de desarrollo. Y utiliza algo llamado builders, también de Angular, pero nuevamente, compartiendo esto. Y los esquemas y builders provienen de complementos, que es el corazón de todo lo que hace NX. Luego está NX build, que básicamente toma una aplicación y la compila en algún tipo de artefacto. NX test se utiliza para ejecutar cualquier corredor de pruebas unitarias que tengan configurado, y tenemos lo mismo para pruebas de extremo a extremo. Ahora, dije que NX está en el corazón de los complementos, y tenemos muchos de ellos. Pueden ejecutar NX lists y ver una lista completa de ellos. Hay oficiales y luego hay complementos de la comunidad. Y en lo que me voy a enfocar hoy es en el complemento de Next.js para NX. Y en solo ocho comandos, voy a mostrarles algo increíble y lo fácil que es comenzar a rodar. Si alguno de estos comandos les asusta, quiero mencionar que hay una interfaz gráfica que pueden usar, para que no tengan que memorizar los comandos.

Son mucho más fáciles de descubrir y ver lo que puedes hacer. Y es un complemento para VS code, llamado NX Console.

Entonces, para comenzar, simplemente voy a crear un espacio de trabajo NX. Voy a decir, crear npx, crear espacio de trabajo NX, y luego el nombre de la organización. Esto podría ser cualquier organización. Y nuevamente, tendrás todas tus aplicaciones y bibliotecas en un solo lugar. Nómbralo adecuadamente.

Luego te preguntará, oh, ¿qué quieres poner en la primera aplicación allí? ¿Qué tipo de aplicación quieres que sea? Y voy a elegir Next.js, porque es increíble. Esto será, digamos, mi sitio web de marketing, o algo que será mi primera aplicación.

Ahora no te asustes por esto. Voy a ejecutar todos estos, y luego te mostraré lo que hice. Estos comandos son básicamente, voy a crear otra aplicación. Voy a hacer nxg, que es una abreviatura de generar. Voy a usar el complemento Next.js para crear otra aplicación llamada Uber for Star, porque no sé qué estoy haciendo, es solo una demostración aquí. Y luego voy a usar el complemento Next.js nuevamente para agregar una página, que es un concepto de Next.js, a ese Uber 4, y la llamaré panel.

Luego voy a crear una biblioteca compartida, que serán componentes compartidos, que tanto el sitio de marketing como Uber 4 Star van a usar. Luego voy a agregar algunos componentes a esa biblioteca. Luego voy a usar nuestro complemento Storybook para configurar Storybook para esa biblioteca de componentes compartidos para tener un sistema de diseño en funcionamiento. Y luego simplemente voy a usar NxServe para servir mi aplicación Uber 4. Y déjame mostrarte qué me da eso.

Entonces, esta es una especie de página de inicio que obtendrás aquí. Notarás que agregamos esa página de panel, así que tengo esa página de panel. Ahora está vacía, pero está configurada para ti. Tenemos Storybook configurado para ti. Y esto es genial, Storybook tiene muchas cosas que puedes agregar. Es un desarrollo sandbox para cada uno de los componentes, así como también puedes agregar documentación y todo un sistema de diseño aquí. Permíteme mostrarte un poco del código. Tenemos, ya sabes, aquí está nuestro espacio de trabajo. Y como dije, hay una división de nuestros productos en aplicaciones y bibliotecas. Y las aplicaciones son tus aplicaciones, las bibliotecas son tus bibliotecas compartidas.

Tenemos esa cosa de componentes compartidos aquí. Y aquí es donde viven esos componentes. Este es el código fuente de esos componentes. Y en nuestras aplicaciones, tenemos nuestro sitio web de marketing y nuestra aplicación Uber 4, ya sabes, lo que sea eso. Pero también puedes notar aquí, que también tenemos estos directorios de extremo a extremo. Y estos son para escribir pruebas de Cypress. Todo está configurado para que estés listo. Así que puedes comenzar a escribir pruebas de extremo a extremo, lo cual es una gran experiencia y una excelente manera de trabajar. Además, también tenemos jest para escribir pruebas unitarias, una forma fantástica de trabajar.

Entonces, nuestra aplicación Uber 4 es igual que cualquier otra aplicación Next.js que puedas esperar. Tiene páginas públicas, lo que sea. Y en nuestras páginas, puedes ver que hay ese panel que creamos y puedes tener esto anidado si estás familiarizado con Next.js. Y solo quería mostrarte. Así que vamos a usar estos componentes compartidos dentro de nuestra página de índice aquí. Y la forma de importarlos es simplemente, ya sabes, les estamos agregando un prefijo con este alcance. Mi org, eso es lo que nombré a la organización. Puedes nombrarlo como quieras. Y luego solo el nombre de la biblioteca. Y así de fácil es compartir código entre las aplicaciones y dividir el código en diferentes cosas compartidas.

Ahora, una de las partes principales de un repositorio NX es el hecho de que tenemos un archivo package.json en todo el proyecto. Está en la raíz. Y la razón por la que esto es importante es porque NX maneja todas estas dependencias por ti. Y por qué eso es bueno es porque esto te protegerá de una serie de problemas a los que los monorepos a veces pueden enfrentarse donde tienes un proyecto que se está quedando atrás, está desactualizado, es difícil de actualizar, este departamento nunca se actualiza. Entonces, están como seis versiones atrás y es realmente frustrante. Puedes ignorar todo eso porque NX se asegurará de que todos se muevan juntos, todos se actualicen juntos porque es un conjunto de dependencias. También maneja esa sintaxis de importación de la que hablé donde puedes limitarla al alcance de la organización lo que facilita compartir código. Y debido a que NX maneja estas dependencias, tienes una forma de compensar algunos de los problemas que pueden tener los monorepos. Una cosa importante es que una vez que tienes cientos de bibliotecas compartidas y cientos de aplicaciones, no quieres ejecutarlas todas cada vez que quieres ejecutar tus pruebas o compilar. Y lo que hace NX, tiene esta cosa llamada almacenamiento en caché de cálculos donde después de ejecutar una prueba o una compilación, almacena en caché los resultados en algún lugar. Y la próxima vez que lo ejecutes, si sabe que no tiene que cambiar porque ninguno de este código podría afectarlo, simplemente te devuelve esa caché.

Es como, oh, no necesito cambiar. No necesito volver a ejecutar. Aquí están los resultados, lo que lo hace súper rápido. Y luego podemos llevar eso un paso más allá con una oferta que tenemos llamada NX Cloud, que básicamente toma esos cálculos y los pone en la nube. Entonces, si ejecuto una compilación que tarda siete minutos en mi máquina y luego mi compañero ejecuta inmediatamente esa misma compilación, la suya será casi instantánea porque simplemente descargará el resultado de la caché y lo mostrará de inmediato o lo pondrá en la compilación o lo que sea necesario, cosas súper geniales.

Y lo que NX aporta es que te permite crear fácilmente estas aplicaciones con todos estos comandos que son fáciles y consistentes entre todos tus equipos. Facilita la extracción de bibliotecas compartidas porque todos se mueven juntos con sus dependencias y siempre puedes asegurarte de que no vas a romper nada con mi actualización porque todo siempre va junto. Y los generadores, como dije, ahorran mucho tiempo y también mantienen las cosas consistentes y una forma de reforzar las mejores prácticas, tanto con generadores como con reglas de ESLint, por ejemplo, en todos tus proyectos de código. Es algo bueno y tiene la misma CLI y cosas así. Tiene todas estas herramientas modernas, Cypress, Storybook, Prettier ESLint incorporados gracias a los plugins.

Y, por supuesto, Next.js, gracias a nuestro plugin de Next.js. Y nuestro plugin de Next.js en particular puede crear y configurar aplicaciones de Next.js, lo cual es súper genial. Las sirve en el modo de desarrollo de Next.js. Puede crear páginas y componentes y puede construir aplicaciones de Next.js listas para producción listas para implementar, así como, por supuesto, la característica de Next.js de aplicaciones completamente estáticas. Entonces, si eso te interesa en absoluto, esto fue muy rápido, pero si quieres obtener más información, ve a nx.dev, la URL más fácil de recordar en el mundo, y realiza uno de los tutoriales, descubre lo que podemos hacer, y, por supuesto, prueba nuestra cosa de Next.js. Responderé cualquier pregunta después de esto. Gracias.