演示

| 前端：https://www.xpays.org/

abc@gmail.com 111111

项目简介

本项目是一个基于新技术栈构建的现代化支付网关/金融科技（FinTech）网站前端及后端演示系统。采用 Next.js 16 （App Router） 和 Tailwind CSS 4 开发，集成了国际化（i18n）、用户认证、支付流程模拟及后台管理基础功能。项目结构清晰，代码规范，非常适合作为支付平台、数字钱包或金融类SaaS产品的起步模板或二次开发基础。

核心亮点

前沿技术栈: 使用新的 Next.js 16, React 19, Typescri-pt 和 Tailwind CSS 4，确保项目高性能且易于维护。

多语言支持 （i18n）: 内置完善的国际化路由架构 （src/app/[locale]），默认支持中英文切换，轻松扩展更多语言。

响应式设计: 基于 Tailwind CSS 4 构建的精美 UI，完美适配桌面、平板和移动端设备。

用户认证系统: 包含完整的登录 （LoginForm） 和注册 （SignupForm） 流程，后端 API 支持及 SQLite 数据库存储用户凭证。

支付流程模拟: 提供精美的收银台 （CheckoutCard） 和支付卡片 （PaymentCard） 组件，模拟真实的支付体验。

轻量级数据库: 内置 SQLite （better-sqlite3） 支持，无需繁琐配置即可运行，适合演示及中小型应用，支持用户管理和系统设置。

静态内容集成: 支持加载外部 HTML 内容作为页面模板，方便内容管理。

技术栈详情

框架: Next.js 16.0.8 （App Router）

语言: Typescri-pt 5

UI 库: React 19.2.1

样式: Tailwind CSS 4

数据库: SQLite （better-sqlite3）

包管理: npm/yarn/pnpm/bun

功能模块

首页: 展示产品特性、合作伙伴及动态效果（滚动动画）。

用户中心:

用户注册/登录 （API + DB）

表单验证

支付演示:

收银台页面

支付方式选择

支付链接生成 （payment-link）

后台管理 API: 提供基础的管理员 API 接口 （src/app/api/admin）。

国际化: 基于路由的语言切换机制。

目录结构

├── src

│   ├── app          # Next.js App Router 页面及 API 路由

│   │   ├── [locale] # 国际化路由 （主站页面）

│   │   └── api      # 后端 API （登录、注册、管理）

│   ├── components   # 可复用 UI 组件 （NavBar, Footer, Forms, Cards）

│   └── lib          # 工具库 （数据库连接, i18n 配置）

├── content          # 静态 HTML 内容模板

├── data             # SQLite 数据库文件

└── public           # 静态资源

适用场景

源码交易: 适合作为高质量的 Next.js 学习案例或商业项目模板出售。

企业官网: 快速搭建金融科技类企业官方网站。

SaaS 原型: 作为支付系统或钱包应用的前端原型。

毕业设计/课程作业: 优秀的 React/Next.js 全栈开发参考项目。

部署说明

项目支持一键部署到 Vercel，或使用 npm run build && npm start 在任何支持 Node.js 的服务器上运行。数据库采用 SQLite，无需额外部署数据库服务，开箱即用。