Triển khai Landing Page

Landing Page (netproxy-index-v2) là trang giới thiệu sản phẩm proxy của bạn. Đây là nơi thu hút khách hàng tiềm năng và hướng họ đến Console để đăng ký.

Thông tin kỹ thuật

Thông tin	Chi tiết
Repository	github.com/lebachhiep/netproxy-index-v2
Stack	Next.js 16, React 19.2, TypeScript 5.x, Tailwind CSS 4.0
Ngôn ngữ	14 ngôn ngữ (next-intl)
Dev port	3000

Bước 1: Clone source code

git clone https://github.com/lebachhiep/netproxy-index-v2.git
cd netproxy-index-v2

Bước 2: Cài đặt dependencies

# Sử dụng pnpm (khuyến nghị)
pnpm install

# Hoặc npm
npm install

# Hoặc yarn
yarn install

Bước 3: Cấu hình biến môi trường

Sao chép file .env.example thành .env.local:

cp .env.example .env.local

Nội dung file .env.local:

NEXT_PUBLIC_API_BASE_URL=https://api.prx.network

Biến	Mô tả
NEXT_PUBLIC_API_BASE_URL	URL của API Backend. Mặc định: https://api.prx.network

Bước 4: Chạy trên máy local

pnpm dev

Truy cập http://localhost:3000 để xem kết quả.

Bước 5: Tùy chỉnh giao diện

Thay đổi nội dung hiển thị

Chỉnh sửa các file JSON trong thư mục messages/ cho từng ngôn ngữ:

messages/
├── en.json     # Tiếng Anh
├── vi.json     # Tiếng Việt
├── zh.json     # Tiếng Trung
├── ja.json     # Tiếng Nhật
└── ...         # 14 ngôn ngữ

Thay đổi hình ảnh

Thay thế các file ảnh trong thư mục public/images/.

Thay đổi màu sắc

Chỉnh sửa biến CSS trong app/globals.css.

Các component chính có thể tùy chỉnh

Component	Mô tả
Header	Thanh navigation trên cùng
Hero	Banner chính giới thiệu dịch vụ
Pricing	Bảng giá các gói proxy
FAQs	Câu hỏi thường gặp
Contact	Thông tin liên hệ
TrustedBy	Logo đối tác / khách hàng
Footer	Chân trang

Triển khai lên Cloudflare Pages (Khuyến nghị)

Cách 1: Kết nối GitHub (Khuyến nghị)

1. Truy cập Cloudflare Pages Dashboard
2. Nhấn Create a project → Connect to Git
3. Chọn repository netproxy-index-v2
4. Cấu hình:
   • Build Command: npx @cloudflare/next-on-pages@1
   • Build Output Directory: .vercel/output/static
5. Thêm Compatibility Flags: nodejs_compat
6. Thêm biến môi trường:
   • NEXT_PUBLIC_API_BASE_URL = https://api.prx.network
7. Nhấn Save and Deploy

Tip

Bạn cần thêm nodejs_compat vào Compatibility Flags trong Settings → Functions của Cloudflare Pages để Next.js hoạt động đúng.

Cách 2: Deploy thủ công bằng Wrangler

# Build project
npx @cloudflare/next-on-pages@1

# Deploy
npx wrangler pages deploy .vercel/output/static --project-name=my-proxy-landing

Triển khai lên Vercel

1. Push source code lên GitHub
2. Import repository trên vercel.com
3. Vercel tự động detect Next.js — không cần cấu hình thêm
4. Thêm biến môi trường NEXT_PUBLIC_API_BASE_URL
5. Deploy

Liên kết Landing Page với Console

Landing Page cần chứa các link trỏ đến Console của bạn. Đảm bảo cập nhật:

• Nút “Get Started” / “Đăng ký” trỏ đến URL Console
• Nút “Dashboard” / “Đăng nhập” trỏ đến URL Console
• Bất kỳ CTA nào khác hướng người dùng đến Console

Các link này thường nằm trong file ngôn ngữ (messages/) hoặc component Header/Hero.

Cấu hình domain

Sau khi deploy, bạn cần:

1. Cấu hình custom domain trên Cloudflare Pages / Vercel
2. Trỏ DNS về hosting provider
3. Đảm bảo SSL/HTTPS hoạt động

Note

Landing Page không bắt buộc phải đăng ký domain trên Seller Portal. Chỉ domain Console mới cần đăng ký vì đó là nơi người dùng đăng ký/đăng nhập.

Xác nhận triển khai thành công

Sau khi deploy, kiểm tra:

1. Truy cập domain Landing Page → thấy trang giới thiệu
2. Chuyển đổi ngôn ngữ hoạt động
3. Dark mode hoạt động
4. Các nút CTA trỏ đến đúng URL Console
5. Responsive trên mobile

Bước tiếp theo

• Cấu hình Domain & Thương hiệu — đăng ký domain và thiết lập branding
• Cấu hình Thanh toán — thiết lập cổng thanh toán cho người dùng