Next.js is a powerful full-stack web framework built on top of React.

In this tutorial we'll see how to create a Next.js application and deploy it on an AWS EC2 instance and a Digital Ocean droplet.

If you are looking for other deployment tutorials checkout out one of these:

In this post:

Create Next.js App

In order to create an application make sure you have Node.js 16.8 or later installed on your computer.

Run this command in terminal to create a project:

npx create-next-app@latest

On installation, you'll see the following prompts:

What is your project named? mynextapp
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) No
Would you like to customize the default import alias? No

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

image

Switch to the mynextapp directory

cd mynextapp

Create a file Procfile and add this line:

web: yarn run start

It will tell Appliku how to run your app.

Git repository was already initialised for you when project was created. Now we need to add all the files and commit the code.

git add .
git commit -m'Initial commit'

Create a GitHub or GitLab repository, add the remote and let's deploy it with Appliku.

Deploy Next.js App

In order to deploy Next.js App you need two things:

  • Appliku Account
  • Cloud Provider account

Appliku automates the setup of the server, build the app and deploy it whenever you push new changes to git. Appliku will also issue an SSL certificate for your custom domain, make backups and help you setup scheduled tasks (CRON).

Get your account here: https://app.appliku.com/

Deploy Next.js on AWS EC2

In order to deploy Next.js project on AWS EC2 you need to generate AWS keys first. Follow instructions in this guide

After you have keys setup open Appliku dashboard and go to the "Servers" tab.

Select AWS provider.

image

Select the region, instance type and the disk size. To fit in AWS Free Tier make sure the disk size to be <30GB.

image

Click "Create EC2 Instance".

You will be taken to the server page where you will see the setup process. When it is finished, go to Applications tab and create a new app from GitHub (or GitLab if you hosted your repository there).

Deploy Next.js on Digital Ocean

If you choose to go with Digital Ocean first make sure to create a DO account.

You will need to generate a token here https://cloud.digitalocean.com/account/api/tokens/new

Make sure to select scopes both "Read" and "Write". We recommend to setup expiration to "Never" or "1 Year" to avoid service interruptions.

image

In Appliku dashboard go to Servers tab and click "Setup Credentials" for Digital Ocean. Paste and save the token and go back to Servers tab. You will be able to select Digital Ocean provider now.

image

Select the region and Droplet Type. For Droplet Size we strongly recommend to pick at least 1GB RAM instance so your server can build and run your app and the database.

Click "Create Droplet". image

Appliku will call Digital Ocean API and create a server for you and begin setup.

When that is finished you will be able to create the app.

That's how setup server overview page looks like:

image

Deploy Next.js with Appliku

Click on the "Applications" menu link.

image

Click on "+ Add Application"

If you haven't setup connection to will need to do that by clicking Setup Credentials.

When you are done you will be able to select the service you prefer. For this tutorial we'll go with GitHub

image

Give your app a name, select repository, branch and the server you have just created and click "Create Application".

image

After you create application you will be taken to the "Application Overview" page.

In order to run Next.js app we need to change the build image in settings.

image

Change the value of "Base Docker Image" to the "Node 20 Yarn" option and click Save Changes. Then go back to the application overview.

image

You will see that Build image has changed to "node-20-yarn".

Click "Deploy Now"

image

When it is successfully deployed you can click "View Application" and it will open our Next.js Application:

image

image

Congratulations! You have deployed Next.js Application with Appliku!