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:
- Deploy Django on Hetzner Cloud
- Deploy Django to Digital Ocean Droplet
- Deploy Django to AWS Lightsail
- Deploy Django to AWS EC2
- Deploy Django on Linode
- Deploy Django to Google Cloud Platform
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.
Switch to the mynextapp directory
cd mynextapp
Run the project with:
npm run dev
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.
then type:
git push -u origin master
You can refresh the your GitHub repository page in browser to see that you code is there.
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.
Select the region, instance type and the disk size. To fit in AWS Free Tier make sure the disk size to be <30GB.
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.
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.
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".
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:
Deploy Next.js with Appliku¶
Click on the "Applications" menu link.
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
Give your app a name, select repository, branch and the server you have just created and click "Create Application".
After you create application you will be taken to the "Application Overview" page. First go to settings.
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.
Add a process called web with command npm run start and click Save and deploy.
When it is successfully deployed you can click "View Application" and it will open our Next.js Application:
Congratulations! You have deployed Next.js Application with Appliku!