Next.js Self Hosting Example

This repo shows how to deploy a Next.js app and a PostgreSQL database on a Ubuntu Linux server using Docker and Nginx. It showcases using several features of Next.js like caching, ISR, environment variables, and more.

📹 Watch the tutorial (45m)

Prerequisites

1. Purchase a domain name
2. Purchase a Linux Ubuntu server (e.g. droplet)
3. Create an A DNS record pointing to your server IPv4 address

Quickstart

1. SSH into your server:

   ssh root@your_server_ip
   

2. Download the deployment script:

   curl -o ~/deploy.sh https://raw.githubusercontent.com/leerob/next-self-host/main/deploy.sh
   

   You can then modify the email and domain name variables inside of the script to use your own.

3. Run the deployment script:

   chmod +x ~/deploy.sh
   ./deploy.sh
   

Supported Features

This demo tries to showcase many different Next.js features.

• Image Optimization
• Streaming
• Talking to a Postgres database
• Caching
• Incremental Static Regeneration
• Reading environment variables
• Using Middleware
• Running code on server startup
• A cron that hits a Route Handler

Deploy Script

I've included a Bash script which does the following:

1. Installs all the necessary packages for your server
2. Installs Docker, Docker Compose, and Nginx
3. Clones this repository
4. Generates an SSL certificate
5. Builds your Next.js application from the Dockerfile
6. Sets up Nginx and configures HTTPS and rate limting
7. Sets up a cron which clears the database every 10m
8. Creates a .env file with your Postgres database creds

Once the deployment completes, your Next.js app will be available at:

http://your-provided-domain.com

Both the Next.js app and PostgreSQL database will be up and running in Docker containers. To set up your database, you could install npm inside your Postgres container and use the Drizzle scripts, or you can use psql:

docker exec -it myapp-db-1 sh
apk add --no-cache postgresql-client
psql -U myuser -d mydatabase -c '
CREATE TABLE IF NOT EXISTS "todos" (
  "id" serial PRIMARY KEY NOT NULL,
  "content" varchar(255) NOT NULL,
  "completed" boolean DEFAULT false,
  "created_at" timestamp DEFAULT now()
);'

For pushing subsequent updates, I also provided an update.sh script as an example.

Running Locally

If you want to run this setup locally using Docker, you can follow these steps:

docker-compose up -d

This will start both services and make your Next.js app available at http://localhost:3000 with the PostgreSQL database running in the background. We also create a network so that our two containers can communicate with each other.

If you want to view the contents of the local database, you can use Drizzle Studio:

bun run db:studio

Helpful Commands

• docker-compose ps – check status of Docker containers
• docker-compose logs web – view Next.js output logs
• docker-compose logs cron – view cron logs
• docker-compose down - shut down the Docker containers
• docker-compose up -d - start containers in the background
• sudo systemctl restart nginx - restart nginx
• docker exec -it myapp-web-1 sh - enter Next.js Docker container
• docker exec -it myapp-db-1 psql -U myuser -d mydatabase - enter Postgres db

Other Resources

• Kubernetes Example
• Redis Cache Adapter for Next.js
• ipx – Image optimization library
• OrbStack - Fast Docker desktop client