生态全景 · 国内外方案对比

🌐 全景 ⚡ Next.js ⚛️ React 📘 TypeScript 🗄️ Prisma 🎨 Tailwind 🚀 部署

一、架构总览

┌──────────────────────────────────────────────────────────────────────────────┐
│  用户浏览器                                                               │
│  ┌──────────────────────────────────────────────────────────────────────┐  │
│  │  Next.js 项目 (同一个项目 = 后端 + 前端 + 路由)                       │  │
│  │  ┌────────────────────┐  ┌────────────────────┐  ┌────────────────┐  │  │
│  │  │ 页面 (page.tsx)     │  │ 接口 (route.ts)    │  │ 布局 (layout)   │  │  │
│  │  │ 服务端直连DB / JS   │  │ GET/POST 返回 JSON  │  │ 导航栏 + 页脚   │  │  │
│  │  └────────────────────┘  └────────┬───────────┘  └────────────────┘  │  │
│  │                                   │                                 │  │
│  │                        ┌──────────▼──────────┐                      │  │
│  │                        │ Prisma ORM           │                      │  │
│  │                        │ 类型安全 CRUD        │                      │  │
│  │                        └──────────┬──────────┘                      │  │
│  │                                   │                                 │  │
│  │                        ┌──────────▼──────────┐                      │  │
│  │                        │ SQLite/PostgreSQL   │                      │  │
│  │                        └─────────────────────┘                      │  │
│  └──────────────────────────────────────────────────────────────────────┘  │
│              │                        │                                    │
│    ┌─────────▼──────────┐  ┌─────────▼──────────┐                         │
│    │ 登录 (NextAuth)    │  │ 支付 (Stripe/支付宝)│                         │
│    │ 或 Clerk / 自建     │  │ 或 LemonSqueezy    │                         │
│    └────────────────────┘  └────────────────────┘                         │
└──────────────────────────────────────────────────────────────────────────────┘

page.tsx

页面文件

→

route.ts

API 接口

→

Prisma

ORM 层

→

SQLite/PG

数据库

→

JSON

返回给前端

二、生态对比 · 左边国际主流，右边国内可行方案

🌍 国际方案

访问群体：海外用户

用户分布在欧美/东南亚，不在意国内访问速度

部署：Vercel 免费版够用

和 Next.js 同一家公司出品。git push 就上线。100GB 带宽/月，大部分个人项目花不到 ¥0。

开源，几行代码接入 GitHub / Google / 邮箱登录。数据存在自己的数据库里，完全可控。

支付：Stripe

国际标准，API 文档是最好的之一。支持信用卡、Apple Pay、Google Pay。个人可注册。

ORM：Prisma

类型安全，IDE 提示完整，模型定义完 CRUD 自动生成。比 MyBatis 少写一半代码。

邮件：Resend

专门给 Next.js 优化的邮件服务。免费版每月 3000 封，个人够用。

UI：shadcn/ui

基于 Tailwind 的组件库，复制粘贴即用。按钮、弹窗、表格、表单都有。

文件存储：Uploadthing

专门给 Next.js 做的文件上传，直接传到 S3，不经过你的服务器。

🇨🇳 国内方案

访问群体：国内用户

需要国内访问速度快，用户用微信/支付宝支付

部署：腾讯云 CloudBase 有免费额度

国内对标 Vercel，支持 Next.js SSR。或者直接买 ¥99/年 轻量服务器自己搭。

国内没有 NextAuth 级别的开源替代。自己写也不复杂：bcrypt 加密密码 + jose 签发 JWT。

支付：支付宝当面付 / 微信 JSAPI 门槛较高

个人开发者走支付宝当面付（需营业执照）或聚合支付平台。比 Stripe 麻烦不少。

ORM：Prisma 也能用

Prisma 支持 PostgreSQL/MySQL，国内照样用。或者用 Drizzle，更接近 SQL 风格。

邮件：阿里云邮件 / Resend

国内用阿里云邮件推送，或者继续用 Resend（国内也能访问）。

UI：shadcn/ui 照样用

纯前端组件，不涉及境外服务。国内直接用。

文件存储：阿里云 OSS / 腾讯云 COS

国内对象存储，价格便宜。1TB 存储 ≈ ¥100/月，个人项目几块钱。

三、必须理解的核心概念

概念

① 文件路由

app/products/page.tsx = /products 页面。
app/api/products/route.ts = GET /api/products 接口。
文件路径就是 URL，不加配置。

② 服务端组件 vs 客户端组件

服务端组件（默认）： 在服务器渲染，直接查数据库，不发 JS 到浏览器。适合列表页、详情页。
客户端组件（'use client'）： 在浏览器运行，支持 onClick/useState。适合按钮、表单。

③ API Route

在 Next.js 项目里写后端接口。功能相当于 Spring Boot 的 @RestController，但不需要单独起一个服务。

④ Prisma ORM

定义模型 → 自动生成 CRUD。类型安全，编译时就能发现字段名写错。

Java 对照

对照：@RequestMapping

Java 用注解配置路由，Next.js 用文件路径配置路由。后者更直观：看到文件就知道 URL。

对照：JSP → 前端渲染

Java 的 JSP 也是在服务端渲染好再发给浏览器。Next.js 的服务端组件逻辑相同，但写法上 HTML 和 JS 在一起（JSX），不分开。

对照：微服务架构

Java 流行拆微服务。个人项目不要拆，一个 Next.js 项目跑所有业务。等真有压力了再说。

对照：MyBatis → Prisma

MyBatis 写 SQL + XML 映射。Prisma 不用写 SQL，用链式调用：prisma.product.findMany({where:{...}})

四、决策速查 · 想要什么效果，用什么工具

需要一个后台管理界面？

shadcn/ui

Table / Form / Dialog 全有

需要用户登录注册？

NextAuth.js

GitHub/Google/邮箱接入

需要接入支付？

Stripe / 支付宝

国际用 Stripe，国内用支付宝

需要表单 + 校验？

React Hook Form + Zod

Zod = 替代 Bean Validation

需要定时任务？

Vercel Cron Jobs

不用自己搭 Quartz

需要发邮件？

Resend

免费 3000 封/月

需要文件上传？

Uploadthing / OSS

不上传到本地服务器

需要数据库迁移？

Prisma Migrate

比 Flyway 更简单

需要图表展示？

Recharts

React 原生图表

需要全局状态管理？

Zustand

比 Redux 简单 10 倍

五、主流部署方案速览

国际

Vercel 免费版够用

Next.js 官方平台，git push 上线。100GB 带宽/月，适合海外用户。

Cloudflare Pages 无限带宽

无限带宽，国内有加速节点。适合预算 ¥0 且不介意配置复杂一点。

国内

腾讯云 CloudBase 有免费额度

国内对标 Vercel，支持 Next.js SSR，国内访问快。

轻量服务器 ¥99/年

腾讯云/阿里云 2核2G，完全控制，可跑多个项目。需自己配 Nginx 和部署流程。

详细对比（包括数据库、存储、邮件等配套服务的成本）→ 跳转到部署页面

🌐 Next.js 生态全景