{"id":15638,"date":"2024-06-04T15:39:46","date_gmt":"2024-06-04T12:09:46","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=15638"},"modified":"2024-06-04T15:39:46","modified_gmt":"2024-06-04T12:09:46","slug":"deploying-a-next-js-application-on-a-digitalocean-droplet","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/","title":{"rendered":"Implementaci\u00f3n de una aplicaci\u00f3n Next.js en un Droplet de DigitalOcean"},"content":{"rendered":"<h2 id=\"%d9%85%d9%82%d8%af%d9%85%d9%87\">Introducci\u00f3n<\/h2>\n<p>Next.js es un framework de React popular para crear f\u00e1cilmente aplicaciones React renderizadas en servidor. En este tutorial, explicaremos c\u00f3mo implementar una aplicaci\u00f3n Next.js en un droplet de DigitalOcean usando Nginx como proxy inverso. Esta gu\u00eda paso a paso asume que ya tienes una aplicaci\u00f3n Next.js lista para implementar y una cuenta de DigitalOcean.<\/p>\n<h5 id=\"%d9%be%db%8c%d8%b4-%d9%86%db%8c%d8%a7%d8%b2%d9%87%d8%a7\">Requisitos previos<\/h5>\n<ul>\n<li>Una aplicaci\u00f3n Next.js<\/li>\n<li>Una cuenta de DigitalOcean<\/li>\n<li>Nombre de dominio registrado (opcional pero recomendado)<\/li>\n<li>Instalaci\u00f3n local de Node.js y npm o yarn<\/li>\n<\/ul>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-1-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%db%8c%da%a9-digitalocean-droplet\">Paso 1: Crear una gota de digitalocean<\/h2>\n<p>Alojaremos nuestra aplicaci\u00f3n Next.js en un droplet de DigitalOcean que configuraremos nosotros mismos. Ahora, creemos el droplet.<\/p>\n<ul>\n<li>Inicie sesi\u00f3n en su cuenta de DigitalOcean y vaya a la secci\u00f3n Droplets.<\/li>\n<li>Haga clic en \u201cCrear GOTA\u201d.<\/li>\n<li>Seleccione la imagen de Ubuntu (preferiblemente la \u00faltima versi\u00f3n LTS).<\/li>\n<li>Elija el tama\u00f1o de gota deseado seg\u00fan sus necesidades y presupuesto.<\/li>\n<li>Para un mejor rendimiento, elija el \u00e1rea del centro de datos m\u00e1s cercana a su p\u00fablico objetivo.<\/li>\n<li>Agregue sus claves SSH para tener acceso seguro a su droplet.<\/li>\n<li>Elija un nombre de host para su droplet, que puede ser su nombre de dominio o cualquier nombre preferido.<\/li>\n<li>Haga clic en \u201cCrear GOTA\u201d.<\/li>\n<li>Crea la gota<\/li>\n<\/ul>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"1350\"  height=\"1182\"  class=\"aligncenter wp-image-15639 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 1350px) 100vw, 1350px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet.png\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet.png 1350w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-300x263.png 300w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-1024x897.png 1024w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-768x672.png 768w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-110x96.png 110w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-200x175.png 200w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-380x333.png 380w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-255x223.png 255w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-550x482.png 550w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-800x700.png 800w, https:\/\/cdn.itpiran.net\/2024\/06\/04151644\/create-droplet-1160x1016.png 1160w\" ><\/p>\n<p>Despu\u00e9s de crear el Droplet, anote la direcci\u00f3n IP que se le asigna.<\/p>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-2-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-droplet\">Paso 2: Iniciar el Droplet<\/h2>\n<p>Ahora que hemos creado la gota, debemos prepararla para que pueda aceptar conexiones entrantes y enrutar esas conexiones a nuestra aplicaci\u00f3n Next.js.<\/p>\n<p>Acceda por SSH a su droplet usando la direcci\u00f3n IP y la clave SSH que proporcion\u00f3 durante la creaci\u00f3n del droplet:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>ssh root@&lt;DROPLET_IP&gt;\r\n<\/code><\/pre>\n<\/div>\n<p>Actualizar y mejorar paquetes en Droplet:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>sudo apt update &amp;&amp; sudo apt upgrade -y\r\n<\/code><\/pre>\n<\/div>\n<p>Instalar los paquetes necesarios:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>sudo apt install -y nodejs npm nginx\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-3-%d9%be%db%8c%da%a9%d8%b1%d8%a8%d9%86%d8%af%db%8c-nginx\">Paso 3: Configurar Nginx<\/h2>\n<p>Nginx es la herramienta que gestiona todo el enrutamiento hacia nuestra aplicaci\u00f3n Next.js. Cree un nuevo archivo de configuraci\u00f3n de Nginx para su aplicaci\u00f3n Next.js:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>sudo nano \/etc\/nginx\/sites-available\/nextjs\r\n<\/code><\/pre>\n<\/div>\n<p>Pegue la siguiente configuraci\u00f3n, reemplazando server_name con el nombre de dominio o la direcci\u00f3n IP de su droplet:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-plain\" data-lang=\"Plain Text\"><code>server {\r\nlisten 80;\r\nserver_name YOUR_IP_ADDRESS;\r\nlocation \/ {\r\nproxy_pass http:\/\/localhost:3000;\r\nproxy_http_version 1.1;\r\nproxy_set_header Upgrade $http_upgrade;\r\nproxy_set_header Connection 'upgrade';\r\nproxy_set_header Host $host;\r\nproxy_cache_bypass $http_upgrade;\r\n}\r\n}<\/code><\/pre>\n<\/div>\n<p>Guarde y cierre el archivo. Cree un enlace simb\u00f3lico para activar la configuraci\u00f3n:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>sudo ln -s \/etc\/nginx\/sites-available\/nextjs \/etc\/nginx\/sites-enabled\/\r\n<\/code><\/pre>\n<\/div>\n<p>Pruebe la configuraci\u00f3n de Nginx para detectar cualquier error de sintaxis:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>sudo nginx -t\r\n<\/code><\/pre>\n<\/div>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"1686\"  height=\"440\"  class=\"aligncenter wp-image-15640 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 1686px) 100vw, 1686px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config.png\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config.png 1686w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-300x78.png 300w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-1024x267.png 1024w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-768x200.png 768w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-1536x401.png 1536w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-110x29.png 110w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-200x52.png 200w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-380x99.png 380w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-255x67.png 255w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-550x144.png 550w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-800x209.png 800w, https:\/\/cdn.itpiran.net\/2024\/06\/04152205\/check-nginx-config-1160x303.png 1160w\" ><\/p>\n<p>Si la prueba de configuraci\u00f3n fue exitosa, reinicie Nginx:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>sudo service nginx restart\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-4-%d8%a7%d8%b3%d8%aa%d9%82%d8%b1%d8%a7%d8%b1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-next-js\">Paso 4: Implementar la aplicaci\u00f3n Next.js<\/h2>\n<p>A continuaci\u00f3n, introducimos una aplicaci\u00f3n Next.js en el Droplet. Hay varias opciones para hacerlo.<\/p>\n<ol>\n<li>Crea una clave SSH en el servidor, con\u00e9ctala a tu cuenta de GitHub y clona tu repositorio.<\/li>\n<li>Crear una aplicaci\u00f3n Next.js en Droplet<\/li>\n<\/ol>\n<p>Para este tutorial, crearemos una nueva aplicaci\u00f3n Next.js en nuestro Droplet.<\/p>\n<p>Vuelve a tu droplet mediante SSH:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>ssh root@&lt;DROPLET_IP&gt;\r\n<\/code><\/pre>\n<\/div>\n<p>Crea una nueva aplicaci\u00f3n Next.js y sigue las instrucciones:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>cd \/var\/www\r\nnpx create-next-app nextjs<\/code><\/pre>\n<\/div>\n<p>Vaya al directorio de la aplicaci\u00f3n Next.js:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>cd nextjs\r\n<\/code><\/pre>\n<\/div>\n<p>Instalar las dependencias del programa:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npm install\r\n<\/code><\/pre>\n<\/div>\n<p>Construya la aplicaci\u00f3n Next.js:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npm run build\r\n<\/code><\/pre>\n<\/div>\n<p>Por \u00faltimo, ejecute la aplicaci\u00f3n Next.js:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npm start\r\n<\/code><\/pre>\n<\/div>\n<p>Su aplicaci\u00f3n Next.js ya est\u00e1 implementada y accesible en el nombre de dominio o direcci\u00f3n IP de su droplet. Para que su aplicaci\u00f3n se ejecute en segundo plano y se reinicie autom\u00e1ticamente cuando el servidor falla o se reinicia, necesitar\u00e1 usar un administrador de procesos como PM2.<\/p>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-5-%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-pm2-process-manager\">Paso 5: Inicie PM2 Process Manager<\/h2>\n<p>Iniciamos npm desde nuestro Droplet. En ocasiones, este comando puede dejar de ejecutarse por razones como el reinicio del servidor o la necesidad de instalar una actualizaci\u00f3n. Usaremos una herramienta llamada PM2 para asegurarnos de que nuestra aplicaci\u00f3n Next.js siempre est\u00e9 en ejecuci\u00f3n. PM2 se reiniciar\u00e1 incluso si la aplicaci\u00f3n Next.js falla.<\/p>\n<p>Para instalar PM2 globalmente en su droplet:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>sudo npm install -g pm2\r\n<\/code><\/pre>\n<\/div>\n<p>Vaya al directorio de la aplicaci\u00f3n Next.js (si a\u00fan no est\u00e1 all\u00ed):<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>cd \/var\/www\/nextjs\r\n<\/code><\/pre>\n<\/div>\n<p>Inicie la aplicaci\u00f3n Next.js usando PM2:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>pm2 start npm --name \"nextjs\" -- start\r\n<\/code><\/pre>\n<\/div>\n<p>Este comando inicia la aplicaci\u00f3n Next.js llamada &quot;nextjs&quot; mediante el comando npm start. PM2 reiniciar\u00e1 autom\u00e1ticamente la aplicaci\u00f3n si el servidor falla o se reinicia.<\/p>\n<p>Para garantizar que PM2 se inicie al arrancar, ejecute:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>pm2 startup\r\n<\/code><\/pre>\n<\/div>\n<p>Este comando crear\u00e1 un script que puedes copiar y pegar en tu terminal para iniciar PM2 en el momento del arranque.<\/p>\n<p>Guardar los procesos PM2 actuales:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>pm2 save\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\">Resultado<\/h2>\n<p><img  loading=\"lazy\"  decoding=\"async\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  width=\"2722\"  height=\"1976\"  class=\"aligncenter wp-image-15641 size-full pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 2722px) 100vw, 2722px\"  data-pk-src=\"https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site.png\"  data-pk-srcset=\"https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site.png 2722w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-300x218.png 300w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-1024x743.png 1024w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-768x558.png 768w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-1536x1115.png 1536w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-2048x1487.png 2048w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-110x80.png 110w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-200x145.png 200w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-380x276.png 380w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-255x185.png 255w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-550x399.png 550w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-800x581.png 800w, https:\/\/cdn.itpiran.net\/2024\/06\/04153049\/nextjs-site-1160x842.png 1160w\" ><\/p>\n<p>Ha ejecutado correctamente una aplicaci\u00f3n Next.js en un droplet de DigitalOcean usando Nginx como proxy inverso y PM2 como gestor de procesos. Su aplicaci\u00f3n deber\u00eda ser accesible en el nombre de dominio o la direcci\u00f3n IP de su droplet.<\/p>\n<p>Si usa un nombre de dominio, recuerde configurar sus ajustes de DNS. Apunte el registro A de su dominio a la direcci\u00f3n IP de su droplet para poder acceder a la aplicaci\u00f3n usando el nombre de dominio.<\/p>\n<p>Para mejorar la seguridad y el SEO, considere configurar certificados SSL con Let&#039;s Encrypt e implementar conexiones HTTPS. Adem\u00e1s, puede explorar la posibilidad de optimizar su aplicaci\u00f3n Next.js con almacenamiento en cach\u00e9 y otras mejoras de rendimiento.<\/p>","protected":false},"excerpt":{"rendered":"Introducci\u00f3n a Next.js, un popular marco de React para crear f\u00e1cilmente aplicaciones React renderizadas en servidor\u2026","protected":false},"author":1,"featured_media":15642,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[401,428],"class_list":{"0":"post-15638","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-digitalocean","10":"tag-next-js"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 Next.js \u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0645\u062d\u0628\u0648\u0628 React \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0631\u0648\u0631 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-04T12:09:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/06\/04153808\/Dgdrop.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet\",\"datePublished\":\"2024-06-04T12:09:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/\"},\"wordCount\":123,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/06\\\/04153808\\\/Dgdrop.jpg\",\"keywords\":[\"Digitalocean\",\"next.js\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/\",\"name\":\"\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/06\\\/04153808\\\/Dgdrop.jpg\",\"datePublished\":\"2024-06-04T12:09:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/06\\\/04153808\\\/Dgdrop.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/06\\\/04153808\\\/Dgdrop.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/es\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Implementaci\u00f3n de una aplicaci\u00f3n Next.js en un Droplet de DigitalOcean - Blog de ITPiran","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/","og_locale":"es_ES","og_type":"article","og_title":"\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 Next.js \u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0645\u062d\u0628\u0648\u0628 React \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0631\u0648\u0631 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc&hellip;","og_url":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-06-04T12:09:46+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/06\/04153808\/Dgdrop.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet","datePublished":"2024-06-04T12:09:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/"},"wordCount":123,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/06\/04153808\/Dgdrop.jpg","keywords":["Digitalocean","next.js"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/","name":"Implementaci\u00f3n de una aplicaci\u00f3n Next.js en un Droplet de DigitalOcean - Blog de ITPiran","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/06\/04153808\/Dgdrop.jpg","datePublished":"2024-06-04T12:09:46+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/06\/04153808\/Dgdrop.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/06\/04153808\/Dgdrop.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062f\u0631 DigitalOcean Droplet"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"Blog de ITPiran","description":"Noticias y art\u00edculos sobre comercio sostenible en Ir\u00e1n","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Blog sobre negocios iran\u00edes sostenibles","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"administraci\u00f3n","url":"https:\/\/www.itpiran.net\/blog\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/comments?post=15638"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15638\/revisions"}],"predecessor-version":[{"id":15643,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/15638\/revisions\/15643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media\/15642"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media?parent=15638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/categories?post=15638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/tags?post=15638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}