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:

Initial Setup

This tutorial implies you are using Linux or Mac command line.

If you are on Windows, install Windows Terminal and launch/install WSL.

Before you start you should have Node installed. I prefer using NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

After that reopen the terminal in order for nvm to work.

Type this to install the latest node and activate it.

nvm install node
nvm use node

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

Run the project with:

npm run dev

image

image App works locally! Press Control+C to stop the app.

Initialize git repository and add all the files and commit the code.

git init
git add .
git commit -m'Initial commit'

Create a GitHub or GitLab repository, add the remote and push your code to GitHub.

To add remote copy this "git remote add" line and paste it in your terminal. image

then type:

git push -u origin master

image

You can refresh the your GitHub repository page in browser to see that you code is there.

image

Now 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. First go to settings.

image

In order to run Next.js app we need to change the build image and set the build command.

Change the value of "Base Docker Image" to the "Node 20 Yarn" option, set build command to yarn build and click "Save Changes". Then go back to the Processes tab. image

Add a process called web with command npm run start and click Save and deploy. image

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

image

image

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