Introduction:

This article assumes you've already taken the exciting first step of deploying your Next.js application to a DigitalOcean droplet. Congratulations on that achievement! Now, as you continue to refine and enhance your app, you'll need to know how to update it safely and efficiently. This guide is tailored for beginners who are looking for a reliable way to update their live application without causing extended downtime or risking data loss.

Let's begin.

• Access Your Droplet

Use SSH via terminal or connect through the DigitalOcean console.

• Navigate to Your App Directory

Run: cd /var/www/<app name>

• Check Running Processes

Execute: pm2 list to view active apps and their IDs

• Stop and Delete the Current Process

Run: pm2 stop <id>followed by pm2 delete <index>

• Remove the Existing App Folder

Navigate up one level: cd ..
Delete the app folder: rm -rf <app name>

• Clone the Updated Repository

Use: git clone <repo-url>
You'll need to enter your GitHub credentials

• Enter the New App Directory

Run: cd <app name>

• Update Environment Variables (if applicable)

Edit the production environment file: nano .env.production
Update variables as needed

• Install Sharp for Image Processing

Run: npm i sharp if not needed Run npm install or yarn to install all dependencies.

• Build Your Updated App

Execute: npm run build or yarn build

• Ensure PM2 is Installed Globally

Run: npm i -g pm2

• Start Your App with PM2

Use: pm2 start npm --name "<app name>" -- start

• Save the PM2 Process List

Execute: pm2 save

• Set Up PM2 to Start on System Boot

Run: pm2 startup

• Return to the Root Directory

Simply type: cd

• Restart Nginx

Run: sudo service nginx restart

Conclusion:

Updating your Next.js application on a DigitalOcean droplet doesn't have to be a nerve-wracking experience. By following these steps, you can safely and efficiently update your live application with minimal downtime. This process ensures that you're working with the latest version of your code while maintaining a stable production environment.
Remember, practice makes perfect. The more you perform these updates, the more comfortable and proficient you'll become with the process. Happy coding, and here's to your continued success in the world of Next.js and DigitalOcean!

Summary:

This guide outlines a 16-step process for updating a Next.js application on a DigitalOcean droplet. The steps include accessing the droplet, stopping the current app, removing old files, cloning the updated repo, rebuilding the app, and restarting the necessary services. By following this method, developers can ensure a smooth and safe update process for their live applications.