{"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\/de\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/","title":{"rendered":"Bereitstellung einer Next.js-Anwendung auf einem DigitalOcean-Droplet"},"content":{"rendered":"<h2 id=\"%d9%85%d9%82%d8%af%d9%85%d9%87\">Einf\u00fchrung<\/h2>\n<p>Next.js ist ein beliebtes React-Framework, mit dem sich serverseitig gerenderte React-Anwendungen einfach erstellen lassen. In diesem Tutorial zeigen wir Ihnen, wie Sie eine Next.js-Anwendung auf einem DigitalOcean-Droplet mit Nginx als Reverse-Proxy bereitstellen. Diese Schritt-f\u00fcr-Schritt-Anleitung setzt voraus, dass Sie bereits eine fertige Next.js-Anwendung und ein DigitalOcean-Konto besitzen.<\/p>\n<h5 id=\"%d9%be%db%8c%d8%b4-%d9%86%db%8c%d8%a7%d8%b2%d9%87%d8%a7\">Voraussetzungen<\/h5>\n<ul>\n<li>Eine Next.js-Anwendung<\/li>\n<li>Ein DigitalOcean-Konto<\/li>\n<li>Registrierter Domainname (optional, aber empfohlen)<\/li>\n<li>Lokale Installation von Node.js und npm oder 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\">Schritt 1: Erstellen Sie ein DigitalOcean-Droplet<\/h2>\n<p>Wir werden unsere Next.js-Anwendung auf einem DigitalOcean-Droplet hosten, das wir selbst konfigurieren. Erstellen wir das Droplet jetzt.<\/p>\n<ul>\n<li>Melden Sie sich in Ihrem DigitalOcean-Konto an und gehen Sie zum Abschnitt Droplets.<\/li>\n<li>Klicken Sie auf \u201cTropfen erstellen\u201d.<\/li>\n<li>W\u00e4hlen Sie das Ubuntu-Image (vorzugsweise die neueste LTS-Version).<\/li>\n<li>W\u00e4hlen Sie die gew\u00fcnschte Tropfengr\u00f6\u00dfe entsprechend Ihren Bed\u00fcrfnissen und Ihrem Budget.<\/li>\n<li>F\u00fcr eine bessere Performance w\u00e4hlen Sie das Rechenzentrum, das Ihrer Zielgruppe am n\u00e4chsten liegt.<\/li>\n<li>F\u00fcgen Sie Ihre SSH-Schl\u00fcssel f\u00fcr den sicheren Zugriff auf Ihr Droplet hinzu.<\/li>\n<li>W\u00e4hlen Sie einen Hostnamen f\u00fcr Ihren Droplet. Dies kann Ihr Domainname oder ein beliebiger anderer Name sein.<\/li>\n<li>Klicken Sie auf \u201cTropfen erstellen\u201d.<\/li>\n<li>Erstellen Sie das Droplet<\/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>Notieren Sie sich nach der Erstellung des Droplets die ihm zugewiesene IP-Adresse.<\/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\">Schritt 2: Starten Sie den Droplet<\/h2>\n<p>Nachdem wir das Droplet erstellt haben, m\u00fcssen wir es so vorbereiten, dass es eingehende Verbindungen annehmen und diese an unsere Next.js-Anwendung weiterleiten kann.<\/p>\n<p>Stellen Sie eine SSH-Verbindung zu Ihrem Droplet her, indem Sie die IP-Adresse und den SSH-Schl\u00fcssel verwenden, die Sie bei der Droplet-Erstellung angegeben haben:<\/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>Pakete in Droplet aktualisieren und upgraden:<\/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>Installieren Sie die erforderlichen Pakete:<\/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\">Schritt 3: Nginx konfigurieren<\/h2>\n<p>Nginx ist das Tool, das das gesamte Routing zu unserer Next.js-Anwendung \u00fcbernimmt. Erstellen Sie eine neue Nginx-Konfigurationsdatei f\u00fcr Ihre Next.js-Anwendung:<\/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>F\u00fcgen Sie die folgende Konfiguration ein und ersetzen Sie server_name durch Ihren Droplet-Dom\u00e4nennamen oder Ihre IP-Adresse:<\/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>Datei speichern und schlie\u00dfen. Einen symbolischen Link erstellen, um die Konfiguration zu aktivieren:<\/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>\u00dcberpr\u00fcfen Sie die Nginx-Konfiguration auf Syntaxfehler:<\/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>Wenn der Konfigurationstest erfolgreich war, starten Sie Nginx neu:<\/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\">Schritt 4: Die Next.js-Anwendung bereitstellen<\/h2>\n<p>Als N\u00e4chstes bringen wir eine Next.js-Anwendung auf den Droplet. Daf\u00fcr gibt es viele M\u00f6glichkeiten.<\/p>\n<ol>\n<li>Erstellen Sie einen SSH-Schl\u00fcssel auf dem Server, verbinden Sie ihn mit Ihrem GitHub-Konto und klonen Sie Ihr Repository.<\/li>\n<li>Erstellen Sie eine Next.js-Anwendung in Droplet<\/li>\n<\/ol>\n<p>In diesem Tutorial erstellen wir eine neue Next.js-Anwendung in unserem Droplet.<\/p>\n<p>Stellen Sie eine SSH-Verbindung zu Ihrem Droplet her:<\/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>Erstellen Sie eine neue Next.js-Anwendung und folgen Sie den Anweisungen:<\/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>Wechseln Sie in das Anwendungsverzeichnis von 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>Installieren Sie die Programmabh\u00e4ngigkeiten:<\/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>Erstellen Sie die Next.js-Anwendung:<\/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>Zum Schluss f\u00fchren Sie die Next.js-Anwendung aus:<\/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>Ihre Next.js-Anwendung ist nun bereitgestellt und \u00fcber Ihre Droplet-Domain oder IP-Adresse erreichbar. Damit Ihre Anwendung im Hintergrund ausgef\u00fchrt wird und bei einem Serverabsturz oder -neustart automatisch neu startet, ben\u00f6tigen Sie einen Prozessmanager wie 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\">Schritt 5: PM2-Prozessmanager starten<\/h2>\n<p>Wir haben npm innerhalb unseres Droplets gestartet. Manchmal kann dieser Befehl aus Gr\u00fcnden wie einem Serverneustart oder der Installation eines Updates nicht mehr ausgef\u00fchrt werden. Wir verwenden das Tool PM2, um sicherzustellen, dass unsere Next.js-Anwendung stets l\u00e4uft. PM2 startet automatisch neu, selbst wenn die Next.js-Anwendung abst\u00fcrzt.<\/p>\n<p>So installieren Sie PM2 global auf Ihrem Server:<\/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>Wechseln Sie in das Anwendungsverzeichnis von Next.js (falls es noch nicht vorhanden ist):<\/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>Starten Sie die Next.js-Anwendung mit 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>Dieser Befehl startet die Next.js-Anwendung mit dem Namen \u201cnextjs\u201d mithilfe des Befehls \u201enpm start\u201c. PM2 startet die Anwendung automatisch neu, falls der Server abst\u00fcrzt oder neu startet.<\/p>\n<p>Um sicherzustellen, dass PM2 beim Systemstart gestartet wird, f\u00fchren Sie Folgendes aus:<\/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>Dieser Befehl erstellt ein Skript, das Sie in Ihr Terminal kopieren und einf\u00fcgen k\u00f6nnen, um PM2 beim Systemstart zu starten.<\/p>\n<p>Aktuelle PM2-Prozesse speichern:<\/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\">Ergebnis<\/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>Sie haben nun erfolgreich eine Next.js-Anwendung auf einem DigitalOcean-Droplet mit Nginx als Reverse-Proxy und PM2 als Prozessmanager ausgef\u00fchrt. Ihre Anwendung sollte \u00fcber den Domainnamen oder die IP-Adresse Ihres Droplets erreichbar sein.<\/p>\n<p>Wenn Sie einen Domainnamen verwenden, denken Sie daran, Ihre DNS-Einstellungen zu konfigurieren. Richten Sie den A-Record Ihrer Domain auf die IP-Adresse Ihres Servers ein, damit Sie \u00fcber den Domainnamen auf die Anwendung zugreifen k\u00f6nnen.<\/p>\n<p>F\u00fcr mehr Sicherheit und bessere Suchmaschinenoptimierung (SEO) empfiehlt sich die Einrichtung von SSL-Zertifikaten mit Let&#039;s Encrypt und die Implementierung von HTTPS-Verbindungen. Zus\u00e4tzlich k\u00f6nnen Sie Ihre Next.js-Anwendung durch Caching und weitere Leistungsverbesserungen optimieren.<\/p>","protected":false},"excerpt":{"rendered":"Einf\u00fchrung in Next.js, ein beliebtes React-Framework zum einfachen Erstellen serverseitig gerenderter React-Anwendungen\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\/de\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\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\":\"de\",\"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\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/deploying-a-next-js-application-on-a-digitalocean-droplet\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\"},{\"@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\":\"de\",\"@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\\\/de\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bereitstellung einer Next.js-Anwendung auf einem DigitalOcean Droplet \u2013 ITPiran-Blog","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\/de\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/","og_locale":"de_DE","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\/de\/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":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"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":"de","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":"Bereitstellung einer Next.js-Anwendung auf einem DigitalOcean Droplet \u2013 ITPiran-Blog","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":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/deploying-a-next-js-application-on-a-digitalocean-droplet\/"]}]},{"@type":"ImageObject","inLanguage":"de","@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":"ITPiran Blog","description":"Iranische Nachrichten und Artikel zum Thema nachhaltiger Handel","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":"de"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Nachhaltiger iranischer Unternehmensblog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@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":"Administrator","url":"https:\/\/www.itpiran.net\/blog\/de\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/comments?post=15638"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15638\/revisions"}],"predecessor-version":[{"id":15643,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/15638\/revisions\/15643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media\/15642"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media?parent=15638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/categories?post=15638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/tags?post=15638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}