How to Deploy a Next.js App with Cloudflare: A Step-by-Step Guide

Deploying a Next.js application to a server and connecting it to a domain using Cloudflare is straightforward. This guide ensures your app is live, secure with free HTTPS SSL/TLS, and optimized. Follow these steps to deploy globally.

Prerequisites

• A server with SSH access
• A Next.js project in a Git repository (e.g., GitHub)
• A domain name (optional: buy via Cloudflare)
• A Cloudflare account

Step 1: Connect to Your Server via SSH

Access your server.

bash📋
ssh -p [PORT] user@server

Step 2: Clone Your Project

Clone your repository.

bash📋
git clone [REPO_ADDRESS]
# Example: git clone https://github.com/Elagoht/ninitarch.git

Or with GitHub CLI:

bash📋
gh repo clone [USER]/[REPO]
# Example: gh repo clone Elagoht/ninitarch

Step 3: Navigate to Your Project Directory

Change directory.

bash📋
cd [YOUR_PROJECT]
# Example: cd ninitarch

Step 4: Build Your Next.js Project

Install and build.

bash📋
npm install
npm run build

Step 5: Keep Your App Running with Screen

Install screen if needed:

bash📋
apt install screen
# Use dnf, pacman, or zypper per distribution

Create a session:

bash📋
screen -S [PROJECT_ALIAS]
# Example: screen -S ninitarch

Step 6: Start Your App

Run on a port (e.g., 3234).

bash📋
npm run start -- -p 3234

Access at http://[YOUR_SERVER_IP]:3234. Detach with Ctrl+A, Ctrl+D.

Step 7: Set Up Your Domain with Cloudflare

Purchase a domain if needed. Connect to Cloudflare by updating nameservers. Cloudflare provides free HTTPS SSL/TLS for secure connections.

Step 8: Create a Cloudflare Tunnel

1. Log in at dash.cloudflare.com.
2. Press Ctrl+K, type tunnels, go to Zero Trust | Network | Tunnels.
3. Click Create Tunnel, select Cloudflared, name it (e.g., ninitarch).
4. Choose Docker, copy the command with token (keep private):

   bash📋
   docker run cloudflare/cloudflared:latest tunnel --no-autoupdate run --token eyJh...
   

5. Modify to:

   bash📋
   docker run -d --restart=always --network=host cloudflare/cloudflared:latest tunnel --no-autoupdate run --token eyJh...
   

6. Run it for an ID output.

Step 9: Connect the Tunnel to Your App

1. Go to Published application routes.
2. Click Add a published application route.
3. Add subdomain (e.g., ninitarch) and domain (e.g., furkanbaytekin.dev).
4. Select HTTP, enter localhost:3234.
5. Save.

Step 10: Verify Your Deployment

Your app is live at https://[SUBDOMAIN].[YOUR_DOMAIN] with free HTTPS SSL/TLS from Cloudflare. Propagation may take 48 hours.

Why Use Cloudflare?

Cloudflare offers free HTTPS SSL/TLS for security, DDoS protection, caching, and tunneling, enhancing your Next.js app’s performance and safety.

Conclusion

You’ve deployed a Next.js app with free HTTPS SSL/TLS via Cloudflare, ensuring secure, global access. Explore Cloudflare’s settings for more optimization.

Song of the day: