nextjs-fullstack

# Next.js 全栈模板 ## 技术栈 | 组件 | 技术 | |-----------|------------| | 框架 | Next.js 14 (App Router) | | 语言 | TypeScript | | 数据库 | PostgreSQL + Prisma | | 样式 | Tailwind CSS | | 认证 | Clerk (可选) | | 验证 | Zod | --- ## 目录结构 project-name/ ├── prisma/ │ └── schema.prisma ├── src/ │ ├── app/ │ │ ├── layout.tsx │ │ ├── page.tsx │ │ ├── globals.css │ │ └── api/ │ ├── components/ │ │ └── ui/ │ ├── lib/ │ │ ├── db.ts # Prisma 客户端 | │ │ └── utils.ts │ └── types/ ├── .env.example └── package.json --- ## 核心概念 | 概念 | 描述 | |---------|-------------| | Server Components | 默认组件，用于获取数据 | | Server Actions | 表单变更操作 | | Route Handlers | API 接口端点 | | Prisma | 类型安全的 ORM | --- ## 环境变量 | 变量 | 用途 | |----------|---------| | DATABASE_URL | Prisma 连接地址 | | NEXT_PUBLIC_APP_URL | 公共访问 URL | --- ## 设置步骤 1. `npx create-next-app {{name}} --typescript --tailwind --app` 2. `npm install prisma @prisma/client zod` 3. `npx prisma init` 4. 配置 schema 5. `npm run db:push` 6. `npm run dev` --- ## 最佳实践 - 默认使用服务端组件 (Server Components) - 使用 Server Actions 处理数据变更 - 使用 Prisma 进行类型安全的数据库操作 - 使用 Zod 进行数据验证 - 尽可能使用 Edge 运行时