Lumitime - 基于 Next.js 16 和 React 19 的现代化 Web 应用
Lumitime
一个基于 Next.js 16 和 React 19 构建的现代化 Web 应用项目。
技术栈
- 框架: Next.js 16.3.3 (App Router)
- UI 库: React 19
- 语言: TypeScript 5.7.3
- 样式: Tailwind CSS v4
- 组件库: shadcn/ui, Base UI
- 动画: Motion (Framer Motion)
- 包管理器: pnpm
- 部署: PM2
项目结构
Lumitime/
├── app/ # Next.js App Router 目录
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ └── globals.css # 全局样式
├── components/ # 组件目录
│ ├── ui/ # UI 基础组件
│ └── discovery/ # 业务组件
├── lib/ # 工具函数库
├── public/ # 静态资源
├── .next/ # Next.js 构建产物
└── node_modules/ # 依赖包
快速开始
环境要求
- Node.js 18+
- pnpm 8+
安装依赖
pnpm install
开发模式
pnpm dev
访问 http://localhost:3000 查看应用。
构建生产版本
pnpm build
启动生产服务器
pnpm start
主要依赖
核心依赖
next: Next.js 框架react&react-dom: React 19typescript: TypeScript 支持
UI 组件
@base-ui/react: 无障碍 UI 组件shadcn: shadcn/ui 组件库lucide-react: 图标库motion: 动画库
样式工具
tailwindcss: Tailwind CSS v4class-variance-authority: 组件变体管理tailwind-merge: 样式类合并clsx: 条件类名工具tw-animate-css: Tailwind 动画扩展
分析
@vercel/analytics: Vercel 数据分析
配置文件
next.config.mjs: Next.js 配置tsconfig.json: TypeScript 配置components.json: shadcn/ui 组件配置postcss.config.mjs: PostCSS 配置pnpm-workspace.yaml: pnpm workspace 配置ecosystem.config.cjs: PM2 进程管理配置
部署
项目使用 PM2 进行进程管理,可通过以下命令部署:
pm2 start ecosystem.config.cjs
开发规范
- 使用 TypeScript 进行类型检查
- 遵循 React 19 最佳实践
- 使用 Next.js App Router 进行路由管理
- 组件样式使用 Tailwind CSS
- 代码格式化保持一致
License
Private
创建日期: 2026-09-11
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 NachoMao
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果