\u00bfQu\u00e9 Es Next.js?<\/h2>\n
Next.js es un framework de React que te permite construir sitios web y aplicaciones web est\u00e1ticas supercargadas, amigables con el SEO y extremadamente orientadas al usuario, utilizando el framework de React. Next.js es conocido por la mejor experiencia de los desarrolladores a la hora de construir aplicaciones listas para usar en producci\u00f3n con todas las caracter\u00edsticas que necesitas.<\/p>\n
Dispone de renderizado h\u00edbrido est\u00e1tico y de servidor, compatibilidad con TypeScript, agrupaci\u00f3n inteligente, precarga de rutas y mucho m\u00e1s, sin necesidad de configuraci\u00f3n adicional.<\/p>\n
Por Qu\u00e9 Usar Next.js<\/h2>\n
Esta secci\u00f3n explorar\u00e1 por qu\u00e9 deber\u00edas aprender Next.js. Tambi\u00e9n veremos las diferentes aplicaciones que puedes construir con Next.js.<\/p>\n
Optimizaciones de Imagen<\/h3>\n
Next.js proporciona optimizaciones de imagen autom\u00e1ticas con construcciones instant\u00e1neas. La optimizaci\u00f3n de im\u00e1genes<\/a> es una potente funci\u00f3n preintegrada en Next.js porque la gesti\u00f3n y optimizaci\u00f3n de im\u00e1genes requiere muchas configuraciones, y la optimizaci\u00f3n manual de im\u00e1genes puede suponer un peaje en tu tiempo productivo.<\/p>\n Otra gran caracter\u00edstica a\u00f1adida a Next.js es la internacionalizaci\u00f3n. La creaci\u00f3n de una aplicaci\u00f3n empresarial puede ser f\u00e1cilmente utilizada y traducida a diferentes idiomas en todo el mundo. Esta caracter\u00edstica es una gran incorporaci\u00f3n a Next.js y hace que Next.js sea reconocido internacionalmente porque se necesita menos configuraci\u00f3n para conseguir la internalizaci\u00f3n.<\/p>\n Next.js proporciona un panel de control anal\u00edtico que puede configurarse para mostrar datos precisos de los visitantes y perspectivas de la p\u00e1gina desde el primer momento. Con esta funci\u00f3n, puedes crear r\u00e1pidamente un panel de control anal\u00edtico y obtener informaci\u00f3n valiosa sobre tus visitantes e informaci\u00f3n de la p\u00e1gina sin necesidad de programaci\u00f3n o configuraci\u00f3n adicional.<\/p>\n Next.js compila y construye autom\u00e1ticamente con la actualizaci\u00f3n en caliente sin ninguna configuraci\u00f3n adicional por tu parte, y escala y optimiza autom\u00e1ticamente tu aplicaci\u00f3n de producci\u00f3n.<\/p>\n Conseguir una actualizaci\u00f3n en caliente o autom\u00e1tica en una aplicaci\u00f3n frontend tradicional conlleva muchos obst\u00e1culos. Requiere elegir e instalar las bibliotecas adecuadas, y llevar a cabo las configuraciones para que cada biblioteca funcione correctamente. Next.js resuelve este problema proporcionando una actualizaci\u00f3n en caliente directamente desde el principio, sin necesidad de instalar ni configurar nada.<\/p>\n Next.js, soporta el renderizado del lado del servidor, la generaci\u00f3n est\u00e1tica y el renderizado del lado del cliente en una sola aplicaci\u00f3n. Puedes decidir el tipo de aplicaci\u00f3n que quieres construir y c\u00f3mo pretendes compilar tu aplicaci\u00f3n para que se adapte mejor a tu caso de uso.<\/p>\n El renderizado del lado del servidor hace que Next.js sea adecuado para aplicaciones a gran escala orientadas a producci\u00f3n, y su configuraci\u00f3n es muy sencilla.<\/p>\n A continuaci\u00f3n se muestra la lista de aplicaciones desarrolladas con Next.js. Ya que Next.js est\u00e1 respaldado por empresas de la lista Fortune 500, como GitHub<\/a>, Uber y Netflix.<\/p>\n A continuaci\u00f3n est\u00e1n las 5 principales aplicaciones construidas con Next.js.<\/p>\n TikTok es una comunidad de v\u00eddeo social online en la que los usuarios suben v\u00eddeos m\u00f3viles de corta duraci\u00f3n con millones de usuarios diarios.<\/p>\n La p\u00e1gina web de TikTok est\u00e1 desarrollada con Next.js para escalar y optimizada para millones de usuarios activos diarios.<\/p>\n Hashnode es una plataforma de blogs online gratuita dirigida a los desarrolladores, y est\u00e1 construida con Next.js. Hashnode registra millones de usuarios, lo que hace que Next.js sea adecuado para alimentar aplicaciones de peque\u00f1a a gran escala.<\/p>\n Twitch es una plataforma social online para chatear, interactuar y disfrutar de diferentes tipos de contenido y entretenimiento. Next.js tambi\u00e9n la impulsa.<\/p>\n Hulu es una plataforma de streaming similar a Netflix, que permite a los usuarios ver pel\u00edculas y programas de televisi\u00f3n online creados con Next.js.<\/p>\n Binance es un popular portal de criptodivisas con noticias, entradas de precios y la posibilidad de comprar y vender, que registra millones de usuarios activos y operaciones de criptograf\u00eda a diario. Next.js tambi\u00e9n impulsa a Binance.<\/p>\n Para conocer m\u00e1s empresas y sitios web que utilizan Next.js, puedes visitar la p\u00e1gina oficial de presentaci\u00f3n de Next.js<\/a> para obtener m\u00e1s informaci\u00f3n.<\/p>\n En Next.js, no hay l\u00edmite para el tipo de aplicaciones que puedes desarrollar. Puedes desarrollar diferentes tipos de aplicaciones utilizando Next.js. Adem\u00e1s, cualquier aplicaci\u00f3n que elijas crear con Next.js seguir\u00e1 teniendo todas las ventajas y caracter\u00edsticas de Next.js sin necesidad de configuraciones adicionales por tu parte.<\/p>\n A continuaci\u00f3n se muestra la lista de tipos de aplicaciones que puedes crear con Next.js:<\/p>\n A continuaci\u00f3n explicaremos las caracter\u00edsticas de Next.js y lo que puedes ganar utilizando Next.js en tu proyecto.<\/p>\n El enrutamiento es una de las caracter\u00edsticas esenciales de Next.js. Next.js utiliza el sistema de enrutamiento basado en archivos de las p\u00e1ginas<\/strong> para estructurar c\u00f3mo ser\u00e1 el enrutamiento de tu aplicaci\u00f3n. Cada archivo y carpeta creada dentro de la carpeta pages<\/strong> se convierte autom\u00e1ticamente en ruta en Next.js.<\/p>\n El sistema de enrutamiento de Next.js se divide en 3 tipos diferentes, y a continuaci\u00f3n exploraremos cada uno de ellos.<\/p>\n La carpeta pages<\/strong> tiene autom\u00e1ticamente index.js, que se convierte en la ruta de la p\u00e1gina de inicio \/<\/strong>. Tambi\u00e9n puedes definir una p\u00e1gina index.js<\/strong> para todas tus rutas en cualquier carpeta. Por ejemplo, puedes definir pages\/profiles\/index.js<\/strong>, que se asignar\u00e1 autom\u00e1ticamente a la p\u00e1gina \/profiles<\/strong>.<\/p>\n Mira este ejemplo, por ejemplo:<\/p>\n La estructura de p\u00e1ginas anterior mapear\u00e1 las carpetas y archivos a una estructura de URL. Por ejemplo, \/<\/strong> para las pages\/index.js<\/strong>,\u00a0\/profile\/<\/strong>\u00a0\u00a0<\/strong>para las pages\/profile\/index.js<\/strong>, y \/profile\/user<\/strong>\u00a0para las pages\/profile\/user.js<\/strong>, respectivamente.<\/p>\n Las rutas anidadas se crean dentro de una ruta padre. Para crear una ruta anidada, tienes que crear una ruta\/carpeta padre dentro de la carpeta pages<\/strong> y a\u00f1adir carpetas o archivos dentro para crear una ruta anidada.<\/p>\n Echa un vistazo a este ejemplo:<\/p>\n En el script anterior, los archivos user.js<\/strong> e index.js<\/strong> est\u00e1n anidados con la ruta padre del panel de control, lo que significa que s\u00f3lo se puede acceder a las URLs con la ruta del panel de control<\/strong>.<\/p>\n Se consigue mediante rutas din\u00e1micas. Las rutas din\u00e1micas son siempre indeterminadas. Pueden generarse mediante llamadas a la API o asignar un ID o slug a la URL.<\/p>\n Para crear una ruta din\u00e1mica en Next.js, a\u00f1ade un corchete [id].js<\/strong> alrededor del nombre del archivo o del directorio. Puedes nombrar el archivo o el directorio con cualquier nombre de tu elecci\u00f3n, pero debes adjuntar un corchete []<\/strong> para que sea din\u00e1mico.<\/p>\n Echa un vistazo a este ejemplo:<\/p>\n El script anterior hace que el [usuario].js<\/strong> sea din\u00e1mico, lo que significa que se debe acceder a la p\u00e1gina del perfil con \/dashboard\/2\/profile<\/strong> o \/dashboard\/johndoe\/profile<\/strong>.<\/p>\n En la documentaci\u00f3n oficial, puedes aprender m\u00e1s y los diferentes trucos para crear un sistema de enrutamiento m\u00e1s avanzado en Next.js.<\/p>\n En Next.js, el servicio de archivos est\u00e1ticos o activos como iconos, fuentes autoalojadas o im\u00e1genes se realiza a trav\u00e9s de la carpeta public<\/strong>, la \u00fanica fuente de verdad para los activos est\u00e1ticos.<\/p>\n La carpeta public<\/strong>\u00a0no debe ser renombrada seg\u00fan los documentos de Next.js. Servir activos est\u00e1ticos a trav\u00e9s de la carpeta public<\/strong>\u00a0es muy sencillo, seg\u00fan la configuraci\u00f3n de Next.js.<\/p>\n Una de las enormes caracter\u00edsticas de Next.js es el pre-renderizado, que hace que Next.js funcione muy bien y muy r\u00e1pido. Next.js pre-renderiza cada p\u00e1gina generando de antemano el HTML de cada p\u00e1gina junto con el JavaScript m\u00ednimo que necesitan para ejecutarse a trav\u00e9s de un proceso conocido como Hidrataci\u00f3n.<\/p>\n Hay dos formas de pre-renderizado en Next.js:<\/p>\n La diferencia crucial entre SG y SSR es c\u00f3mo se obtienen los datos. En el caso de SG, los datos se obtienen en el momento de la construcci\u00f3n y se reutilizan en cada solicitud (lo que hace que sea m\u00e1s r\u00e1pido porque se puede almacenar en cach\u00e9), mientras que en SSR, los datos se obtienen en cada solicitud.<\/p>\n A partir de Next.js 9.4, se introdujeron las importaciones absolutas, lo que significa que ya no tienes que importar componentes con directorios relativamente largos.<\/p>\n Por ejemplo, no necesitas importar componentes como el que aparece a continuaci\u00f3n:<\/p>\n Sin embargo, se utiliza el siguiente estilo para importar componentes:<\/p>\n Next.js proporciona el componente next\/link<\/strong> para navegar entre p\u00e1ginas. La navegaci\u00f3n entre p\u00e1ginas en tus aplicaciones puede hacerse con el componente Link<\/a> exportado por el next\/link<\/strong>.<\/p>\n Suponiendo que tenemos estas estructuras de p\u00e1ginas en tu carpeta pages<\/strong> y quieres enlazar las p\u00e1ginas entre s\u00ed, puedes conseguirlo utilizando el siguiente script:<\/p>\n Enlaza las p\u00e1ginas utilizando este script que aparece a continuaci\u00f3n:<\/p>\n Next.js te permite el lujo de crear y tener muchos estilos seg\u00fan sea necesario en tu proyecto. Por defecto, Next.js viene con tres estilos diferentes desde el primer momento: CSS global, M\u00f3dulos CSS y style-jsx.<\/p>\n Como todo lo bueno, Next.js tiene sus desventajas, que debes considerar antes de utilizarlo en tu pr\u00f3ximo proyecto. En esta secci\u00f3n, exploraremos los inconvenientes de Next.js.<\/p>\n Con Next.js, la flexibilidad viene acompa\u00f1ada de altos costes de desarrollo y mantenimiento. Para hacer cambios y mantener la aplicaci\u00f3n, necesitar\u00e1s un desarrollador dedicado a Next.js y un experto en frontend<\/a> que te costar\u00e1 m\u00e1s.<\/p>\n Next.js no admite la gesti\u00f3n de estados de forma inmediata. Si necesitas alg\u00fan tipo de gesti\u00f3n de estados, tendr\u00e1s que instalarlo y utilizarlo como har\u00edas con React.<\/p>\n Con Next.js, no tendr\u00e1s acceso a muchos plugins f\u00e1ciles de adaptar.<\/p>\n Esta secci\u00f3n explorar\u00e1 el uso pr\u00e1ctico de Next.js y c\u00f3mo crear una aplicaci\u00f3n Next.js. Sin embargo, vamos a explorar algunos de los conceptos esenciales en el desarrollo de una aplicaci\u00f3n Next.js.<\/p>\n Crear un nuevo proyecto Next.js es muy f\u00e1cil y directo. Puedes crear un proyecto Next.js de diferentes maneras, pero la preferida y recomendada es la CLI.<\/p>\nInternacionalizaci\u00f3n<\/h3>\n
An\u00e1lisis de Next.js<\/h3>\n
![\"Panel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/dashboard-1024x658.png\")
Configuraci\u00f3n Cero<\/h3>\n
Soporte de SSR, SSG y CSR Preconstruido<\/h3>\n
Aplicaciones que Utilizan Next.js<\/h2>\n
TikTok<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/tiktok-1024x556.png\")
Hashnode<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/hashnode-1024x531.png\")
Twitch Mobile<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/twitch-1024x482.png\")
Hulu<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/hulu-1024x486.png\")
Binance<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/binance-1024x505.png\")
Lo Que Puedes Construir<\/h2>\n
\n
Caracter\u00edsticas de Next.js<\/h2>\n
Enrutamiento<\/h3>\n
Enrutamiento de \u00cdndice<\/h4>\n
- pages\n - index.js\n - profile\n - index.js\n - [user].js<\/code><\/pre>\nRutas Anidadas<\/h4>\n
- pages\n - index.js\n - dashboard\n - index.js\n - user.js<\/code><\/pre>\nRutas Din\u00e1micas<\/h4>\n
- pages\n - dashboard\n - [user].js\n - profile<\/code><\/pre>\nServir Archivos Est\u00e1ticos<\/h3>\n
Renderizaci\u00f3n Previa<\/h3>\n
\n
Importaciones absolutas<\/h3>\n
import InputField from \"..\/..\/..\/..\/..\/..\/components\/general\/forms\/inputfield\"<\/code><\/pre>\nimport InputField from \"components\/general\/forms\/inputfield\";<\/code><\/pre>\nEnlazar P\u00e1ginas<\/h3>\n
- pages\n - index.js\n - profile.js\n - settings.js\n - users\n - index.js\n - [user].js<\/code><\/pre>\nimport Link from \"next\/link\";\n\nexport default function Users({users) {\n return (\n <div>\n <Link href=\"\/\">Home<\/Link>\n <Link href=\"\/profile\">Profile<\/Link>\n <Link href=\"\/settings\">\n <a> Settings <\/a>\n <\/Link>\n <Link href=\"\/users\">\n <a> Settings <\/a>\n <\/Link>\n <Link href=\"\/users\/bob\">\n <a> Settings <\/a>\n <\/Link>\n <\/div>\n )\n}<\/code><\/pre>\nEstilos<\/h3>\n
Inconvenientes de Next.js<\/h2>\n
Coste de Desarrollo y Mantenimiento<\/h3>\n
Falta de Gestor de Estados Integrado<\/h3>\n
Pocos Plugins<\/h3>\n
C\u00f3mo Crear una Aplicaci\u00f3n Next.js<\/h2>\n
Creaci\u00f3n de una aplicaci\u00f3n Next.js<\/h3>\n