📔Deploy a Next.js application on Clouddley Apps

Learn how to deploy a Nextjs app on Clouddley Apps

Clouddley Apps is a SaaS platform designed to simplify deployment for businesses, enabling them to effortlessly choose and deploy on their preferred Cloud Providers. In this guide, we’ll create a Nextjs application from scratch and deploy it on AWS using Clouddley Apps.

Prerequisites

• Install NPM and Nodejs

• Clouddley account

  In your Clouddley account, create the following:

  • Cloud secret key

  • Git connection

  • A project

• AWS account

Create and Deploy your Nextjs App on Clouddley Apps

Step 1

Install the create-next-app CLI tool.

• In your terminal, enter the command

npx create-next-app@latest

This installs and generates the default template. Following that, you will be asked the subsequent prompts below. Select the options based on your preference.

Screenshot of create-next-app prompts

After selection, the default template is generated and you will see an output like this;

Screenshot of Successfully generated nextjs template

Step 2

Preview your Nextjs app in your web browser.

• Navigate to your app directory

cd nextjs-app

• Enter the following command to run your application

npm run dev

• Visit the link generated in your web browser.

Screenshot of Nextjs app running locally

Step 3

Create a Git repository and push your code to GitHub

• Copy and Paste the command below

echo "# nextjs-app" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/username/next-app.git # add your repo URL here
git push -u origin main

You can check out our code here.

Step 4

Create an App on Clouddley Apps

• Log into your Clouddley account and navigate to Apps

• Click on Add app to create a new app

Clouddley apps dashboard

Step 5

Set up Git for your Clouddley Apps

• Configure git by choosing the Username/Organization, source code's repository, and branch.

Configure Git on Clouddley Apps

Step 6

Configure your Cloud Provider

• To configure the cloud provider, select the git connection you want to use.

Set up Git connection

Step 7

Configure your Application

• To configure your application, do the following:

  • Type in the name of your application

  • Select the project

  • Set the application port

  • Select the repository type source code. This can either be source code or Dockerfile depending on your choice.

  • Select the runtime, For this app we will be using Nodejs 16

  • Type in the build command:

    npm i && npm run build

  • Type in the start command:

    npm run start

Step 8

Configure your App settings

• Networking: Set up how your service establishes communication with other applications, services, and resources. On Clouddley apps, you can choose between Public access and VPC connections.

Public Access

Your service has the capability to transmit outgoing messages exclusively to public network endpoints. This is the default networking.

VPC Connections

Your service establishes connections to both an AWS VPC and public endpoints. A case scenario is when you have a database in an AWS VPC that your app communicates with. After clicking on the check box, set this up with the following steps;

• Click on Select the VPC connector

• Click on Add VPC Connection

• Input a name for the VPC Connector

• Select the VPC, subnets, and security groups you want to use.

• Click on the Add button

Screenshot of adding a new VPC connector

You've created a new VPC connector!

Step 9

Create your App

• Click on Create App. This takes you to your app dashboard and once the app deployment is complete, the App status changes from deploying to running

• Your application should now be available on the URL on your app dashboard.

Nextjs App running on Clouddley Apps

You’ve successfully deployed your Nextjs application on Clouddley Apps.

Conclusion

A successful deployment lays the foundation for a seamless user experience and paves the way for future growth and scalability. Now you've deployed your Nextjs Application on Clouddley Apps, you are ready to further customize your application with additional features. You can check out how to deploy other frameworks here.