Deploy Next.js to VPS Step by Step

This guide presumes that your next.js stack is:

Next.js 16
Bun
Drizzle ORM
MySQL database
Docker
Github Repo
Caddy Web Server
VPS
Domain

Step 1:

Go to your vps terminal and create your project folder structure.

Step 1.1

First, go to this directory:

bash

cd /var/www/

Step 1.2

Now, create a folder inside /var/www/ and name should be: project-name or projectname (LowerCase)

bash

mkdir project-name

Now, go to the created folder:

bash

cd project-name

Now, inside this folder, we have to create 3 folders which will seperate our code, data and scripts which prevents data loss every time source code updates via git pull on github actions.

bash

mkdir -p data scripts web

Step 2:

Now, we have to connect our vps to our github in order to clone our project repo in our created folder inside web directory: /var/www/project-name/web/

Step 2.1

Generate an SSH key on the VPS:

Check whether one already exists:

bash

ls -la ~/.ssh

If you don't have a key, generate one and just press enter:

bash

ssh-keygen -t ed25519 -f ~/.ssh/id_ed25519 -C "your-email@example.com"

Start SSH Agent:

bash

eval "$(ssh-agent -s)"

Add Key to SSH Agent

bash

ssh-add ~/.ssh/id_ed25519

Copy public key output:

bash

cat ~/.ssh/id_ed25519.pub

Add this public key to Github Account Level: GitHub → Settings → SSH and GPG keys → New SSH key Give any title like: ssh-vps-key and paste public key without any extra spaces and click Add SSH key button.

Trust Github Host in VPS:

bash

ssh-keyscan github.com >> ~/.ssh/known_hosts
chmod 644 ~/.ssh/known_hosts

Test the connection:

bash

ssh -T git@github.com

Expected:

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

Now, your github account is conneted with your vps.