NextApp - 门户系统使用说明

基于 Next.js 15 + Prisma 6 + SQLite 构建的最小化门户网站。

环境要求

• Node.js 18.x 或更高版本
• npm 或 yarn

快速开始

1. 安装依赖

npm install

2. 数据库初始化

项目使用 SQLite 数据库，数据存储在 dev.db 文件中。

# 生成 Prisma 客户端
npx prisma generate

# 应用数据库迁移（创建表结构）
npx prisma migrate dev

# 种子数据（添加初始页面）
curl http://localhost:3000/api/seed
# 或在浏览器访问: http://localhost:3000/api/seed

3. 启动开发服务器

npm run dev

服务器启动后，访问 http://localhost:3000

4. 停止服务器

在运行服务器的终端按 Ctrl + C，或：

# 查找进程
ps aux | grep "next"

# 结束进程
kill -9 <PID>
# 或
pkill -f "next-server"

常用命令

命令	说明
npm run dev	启动开发服务器（支持热重载）
npm run build	构建生产版本
npm run start	启动生产服务器
npm run lint	代码检查

数据库操作

Prisma 命令

# 生成 Prisma 客户端
npx prisma generate

# 创建新迁移
npx prisma migrate dev --name <迁移名称>

# 重置数据库（清空所有数据）
npx prisma migrate reset

# 打开 Prisma Studio（数据库可视化工具）
npx prisma studio

数据库文件

• 位置: prisma/dev.db
• 类型: SQLite
• 工具: 可使用 npx prisma studio 或 SQLite 客户端（如 DB Browser for SQLite）查看

项目结构

nextapp/
├── app/                        # Next.js App Router
│   ├── api/                   # API 路由
│   │   ├── pages/             # 页面相关 API
│   │   │   ├── route.ts       # GET/POST 所有页面
│   │   │   └── [slug]/
│   │   │       └── route.ts   # GET 单个页面
│   │   └── seed/
│   │       └── route.ts       # 种子数据接口
│   ├── components/             # React 组件
│   │   └── TestButton.tsx     # 测试按钮组件
│   ├── lib/
│   │   └── prisma.ts          # Prisma 客户端实例
│   ├── globals.css            # 全局样式
│   ├── layout.tsx             # 根布局
│   └── page.tsx               # 首页
├── prisma/
│   ├── schema.prisma          # 数据模型定义
│   └── migrations/            # 数据库迁移文件
├── dev.db                     # SQLite 数据库（运行时生成）
├── .env                       # 环境变量
├── package.json
└── tsconfig.json

API 端点

页面相关

方法	端点	说明
GET	/api/pages	获取所有页面
POST	/api/pages	创建新页面
GET	/api/pages/[slug]	获取指定页面
GET	/api/seed	初始化种子数据

示例

# 获取所有页面
curl http://localhost:3000/api/pages

# 创建新页面
curl -X POST http://localhost:3000/api/pages \
  -H "Content-Type: application/json" \
  -d '{"slug":"contact","title":"联系我们","content":"<h1>联系我们</h1><p>联系方式...</p>"}'

# 获取指定页面
curl http://localhost:3000/api/pages/home

数据模型

Page（页面）

model Page {
  id        Int      @id @default(autoincrement())
  slug      String   @unique    # 页面标识（如：home, about）
  title     String               # 页面标题
  content   String               # 页面内容（HTML）
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Setting（设置）

model Setting {
  id        Int      @id @default(autoincrement())
  key       String   @unique    # 设置键名
  value     String               # 设置值
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

功能说明

首页

• 访问 / 显示 slug 为 home 的页面内容
• 导航栏包含 Logo 和"测试按钮"
• 点击"测试按钮"弹出 "hello" 提示

测试按钮

• 位置：导航栏右侧
• 功能：点击弹出 alert 提示 "hello"
• 实现：app/components/TestButton.tsx（客户端组件）

生产部署

构建

npm run build

启动生产服务器

npm run start

生产服务器默认运行在 http://localhost:3000

注意事项

1. 数据库文件：dev.db 包含数据库，不要手动编辑
2. 环境变量：数据库 URL 配置在 .env 文件中
3. Prisma 客户端：修改 schema.prisma 后需运行 npx prisma generate
4. 迁移：修改数据模型后需创建新的迁移：npx prisma migrate dev --name <描述>
5. 热重载：开发模式下代码修改会自动刷新浏览器

技术栈

• 框架: Next.js 15 (App Router)
• ORM: Prisma 6
• 数据库: SQLite
• 样式: Tailwind CSS 4
• 语言: TypeScript

故障排查

数据库不同步

npx prisma migrate reset
npx prisma migrate dev

Prisma 客户端未生成

npx prisma generate

端口被占用

# 修改端口启动
npm run dev -- -p 3001

清除缓存重新构建

rm -rf .next node_modules/.cache
npm run dev

许可证

MIT