📓Deploy a Next.js App on Clouddley

Clouddley is a backend infrastructure platform for your compute resources that auto-detects your runtime and deploys your application to your server (virtual machines and bare metal). In this guide, you’ll see Clouddley in action by deploying a Next.js web application (built with Next.js boilerplate) to a virtual machine.

Prerequisites

• A GitHub or Bitbucket Account.

• A Clouddley account.

• A Next.js application.

• A virtual machine on a Cloud platform or a bare metal server.

Deploy your Next.js Application

Accessing Apps

• Open your web browser, log in to your Clouddley account

• Navigate to Apps and click on Deploy App

Step 1: Configure Service

• Choose your Git hosting service; either GitHub or Bitbucket. For this tutorial, we will be using GitHub.

• Click on Continue with GitHub

Step 2: Configure Git

• To connect your GitHub user or organization account, click the Select username/organization dropdown and Add GitHub account.

• Select your repository and the branch from the dropdown list or quickly search.

• Click on Next

Step 3: Configure your Virtual Machine

In the Choose or add server dropdown, select your virtual machine (VM) if it’s already listed. If not, select + Add Virtual Machine.

Enter the following details to configure your VM:

• Hostname or IP address

• Username

• SSH port

After adding the details, use the Clouddley CLI (recommended) or connect via SSH to verify the connection.

curl -L https://raw.githubusercontent.com/clouddley/cli/main/install.sh | sh

clouddley add key

ssh-copy-id -f -i ~/path/to/downloaded/Publickey username@ipaddress

• Click on Verify. This verifies the connection.

• Click on Next

Step 4: Configure app settings

• Insert the name of the application and its port.

• Click on Next

Step 5: Configure Environment Variables

• To add environment variables, click on ➕ Add Variable

• Choose an ENV mode: either a single variable or import variables. Learn more here.

Single Variable

Import Variables

• Add the key-value pairs and click on Save

• Click on Next

Step 6: Set up Notifications (optional)

• To configure the notification settings of the application, click on ➕ Add Alert

• Select the Alert type. For this tutorial, we will set up Email alerts.

• Toggle on the buttons of the deployment event (failed, timed out, or success) you want to be notified of.

• Enter the Email address where you want to receive alerts. (You can add multiple email addresses)

• Click on Save

• Click on Deploy

Step 7: Test and Verify the app

• Click on Go to Dashboard. Your app will be visible on the apps dashboard.

• After the app deployment is complete, the app status changes from Deploying to Online

• Click on 🌐 Website at the top right corner of the page, which opens the URL of the deployed application in your browser.

• You can test the application functionalities.

You have successfully deployed a Next.js application on Clouddley. You can manage it directly from the app dashboard by clicking the three dots (...) at the top-right corner to access Edit, Instant Rollback, Scale, Pause, and Delete options.

Additionally, you can switch to different tabs on the application dashboard to perform the following actions: view your deployment history, view or download logs, add a custom domain, and view the environment variables.

Conclusion

Congratulations🎉 on successfully deploying a Next.js application on Clouddley. You can check out the source code for this application here. You can also check out how different frameworks can be deployed on Clouddley in our how-to guides.