> For the complete documentation index, see [llms.txt](https://docs.clouddley.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.clouddley.com/apps/how-to-guides/deploy-a-next.js-app-on-clouddley.md).

# 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](https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs) web application (built with [Next.js boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate)) to a virtual machine.

### Prerequisites

* A [GitHub](https://github.com/) or [Bitbucket](https://bitbucket.org/product) Account.
* A [Clouddley](https://app.clouddley.com/auth/signup) account.
* A [N](https://nextjs.org/learn/foundations/about-nextjs)[ext.js](https://nextjs.org/learn/foundations/about-nextjs) 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](https://app.clouddley.com/apps) and click on **Deploy** **App**

<figure><img src="/files/7hiMQsGBbJLWH1hAlqJu" alt="Image of Apps dashboard."><figcaption><p>Accessing Apps </p></figcaption></figure>

#### **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**

<figure><img src="/files/wGRJv4utI9yHwvgWvVAW" alt="Configuring Git hosting service during app deployment on Clouddley."><figcaption><p>Choose your Git hosting service</p></figcaption></figure>

#### **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**

<figure><img src="/files/faCh2Fru8KlKWXlPPYOT" alt="Configuring the Git repository during app deployment on Clouddley."><figcaption><p>Setup the Next.js application repository on Clouddley</p></figcaption></figure>

#### **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.

{% tabs %}
{% tab title="Clouddley CLI" %}
The Clouddley CLI is a command-line tool that allows you to interact with the Clouddley Platform from your terminal.

* Open the command line of the remote VM you want to configure to Clouddley and install Clouddley CLI by running the command:

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

* To add the SSH public key, run the command:

```bash
clouddley add key
```

Using the CLI, you can deploy resources, manage configurations, and automate tasks efficiently.
{% endtab %}

{% tab title="SSH" %}

* Download the public key to your local machine.
* Ru**n** the provided command on your local machine, allowing Triggr to connect to your virtual machine.

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

{% hint style="info" %}
Replace `~/path/to/downloaded/Publickey` ,`username` and `ipaddress`  with your actual values.
{% endhint %}
{% endtab %}
{% endtabs %}

* Click on **Verify**. This verifies the connection.
* Click on **Next**

<figure><img src="/files/qtcRfmLeUDV5fe8r7nQk" alt="Configuring the virtual machine during app deployment on Clouddley."><figcaption><p>Configuration of virtual machine on Clouddley</p></figcaption></figure>

#### **Step 4: Configure app settings**

* Insert the **name** of the application and its **port.**
* Click on **Next**

<figure><img src="/files/IEhft0hkrcW38wGihvWl" alt="Configuring App settings (name and port) during app deployment on Clouddley."><figcaption><p>Configure the App name and port</p></figcaption></figure>

{% hint style="info" %}
The firewall of the virtual machine should allow access to the application port.
{% endhint %}

#### **Step 5: Configure Environment Variables**&#x20;

* To add environment variables, click on  :heavy\_plus\_sign: <mark style="color:blue;">**Add Variable**</mark>&#x20;
* Choose an ENV mode: either a **single variable** or **import variables**. Learn more [here](/apps/extras/environment-variables.md).

{% tabs %}
{% tab title="Single Variable" %}

<figure><img src="/files/g4PjEAekY8aojSeKi1XF" alt="Image showing the single variable ENV mode on Clouddley" width="563"><figcaption><p>Single variable ENV mode</p></figcaption></figure>
{% endtab %}

{% tab title="Import Variables" %}

<figure><img src="/files/60lrDpuC46Uwr2tcIvfH" alt="Image showing the Import Variables ENV mode on Clouddley." width="563"><figcaption><p>Import variables ENV mode</p></figcaption></figure>
{% endtab %}
{% endtabs %}

* Add the key-value pairs and click on **Save**
* Click on **Next**

<figure><img src="/files/4LeTTOb7LcOjMxkxkbKm" alt="Image showing environment variables added during app deployment on Clouddley."><figcaption><p>Adding environment variables</p></figcaption></figure>

#### **Step 6: Set up Notifications (optional)**

* To configure the **notification settings** of the application, click on :heavy\_plus\_sign: <mark style="color:blue;">**Add Alert**</mark>
* 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**

<figure><img src="/files/ItAmC6aXlBntUjIxE82E" alt="A gif showing how to set up notifications on Clouddley."><figcaption><p>Notifications set up and creation of Next.js application on Clouddley</p></figcaption></figure>

#### **Step 7: Test and Verify the app**

* Click on **Go to Dashboard. Y**our app will be visible on the apps dashboard.
* After the app deployment is complete, the app status changes from `Deploying` to `Online`

<figure><img src="/files/GGFCuQ3qQlI7Zxv3tleb" alt="An image of the overview of a successfully deployed Next.js application on Clouddley."><figcaption><p>Next.js application dashboard overview</p></figcaption></figure>

* Click on :globe\_with\_meridians: **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.

<figure><img src="/files/KlNYecgQzZTjXuUk0dh3" alt="An image of the Next.js application running from Clouddley on the web."><figcaption><p>Next.js application running from Clouddley on a cloud virtual machine</p></figcaption></figure>

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:tada: on successfully deploying a Next.js application on Clouddley. You can check out the source code for this application [here](https://github.com/clouddley/examples/tree/main/nodejs/nextjs). You can also check out how different frameworks can be deployed on Clouddley in our [how-to guides](/apps/how-to-guides.md).