Loading...
My Best Skills
熟悉 HTML5、CSS3、JavaScript、TypeScript，主要使用 React、Next.js 开发 Web 应用，同时具备 Node.js 与 Vue 的项目经验。关注组件化、性能优化和前端工程化，能够独立完成从页面到业务逻辑的完整开发流程
- HTML5 & CSS395%
- JavaScript90%
- React85%
- TypeScript88%
- Next75%
- Vue.js60%
- Node.js80%
这是我用 Next.js + TypeScript + Prisma + PostgreSQL 构建的个人博客，支持数据库动态内容、用户管理与完善的工程配置。 核心定位 - 写文章、可登陆、可管理 - 数据通过 Prisma + PostgreSQL 处理 - 部署在 Vercel 环境上 - 支持开发、生产完整流程 ### 前端 - Next.js：支持 SSR / SSG / ISR 混合渲染 - TypeScript 全程强类型 - 响应式布局和现代前端最佳实践  ### 后台 - Prisma ORM：强类型数据库访问层 - PostgreSQL：稳定关系型数据库 - 自动迁移与数据库启动脚本（可用 Docker 一键启动）  ### 工程实践 - ESLint / Prettier / 自动格式化 - Docker + docker-compose 支持 - Vercel 部署配置 - 环境变量 / 多环境构建 - 完整开发到生产流水线
Beaver UI 是我打造的一个轻量、实用、可定制的前端 UI 组件库，基于React + TypeScript + tsup + Storybook 构建，支持现代前端开发的主流场景。 ### 核心理念 - 简单好用：用最基础的 API 组合实现常见 UI 功能，学习成本低。 - 强类型安全：全量 TypeScript 类型定义，IDE 智能提示友好。 - 可定制主题：通过 CSS 变量轻松覆盖主题配色、radius、间距等样式。 - 可在实际项目中直接复用，兼容 React 主流构建方案（含 SSR/Next.js 细节说明）。 ------ ### 组件亮点 Beaver UI 包含 17+ 个常用 UI 组件，覆盖从基础交互到复杂反馈的需求： 基础组件 - Button：支持多种按钮类型和尺寸。 - Input / Select / Checkbox / Radio / Switch：表单基础控件，支持完整受控/非受控写法。 - DatePicker / Upload：日期选择及文件上传控件。 结构 & 布局 - Form / FormItem：表单容器与验证结构。 - Table：数据展示表格。 - Pagination：分页组件。 反馈 & 交互 - Alert / Toast 提示：状态提醒与消息反馈。 - Tooltip / Popconfirm：轻量交互提示。 - Modal / Drawer：模态框与抽屉式弹层。 ### storybook演示页面 
完整的电商解决方案，包含商品管理、购物车、支付集成（支付宝/微信）、订单管理和物流跟踪。
系统学习 Next.js 16+ 新特性与最佳实践，撰写系列文章
探索大语言模型在前端开发中的应用与实践
提升前端工程化水平，优化开发者体验
登录基本是每个系统都必备的，当然，除了纯展示页面以外。作为最基础的，以及进入系统的第一道关卡，这也是开发人员必须掌握的技术要点。本文记录本人以Next.js项目为例在实现登录系统中的全步骤。
一般项目中都会用到提示组件Toast，很多项目可能直接引入antd等库了。但是我当时只是一个小项目，我就懒得在Next项目中引，心里想这才几行代码呀，很多样式网上还是现成的，这不是十几分钟就搞定了，看我搞一个。结果发现踩了不少坑......特此记录。
之前就打算把项目部署到Vercel上去，因为项目是用Next写的，也算是Vercel的亲儿子了。而Vercel本身具有免运维、自动化构建和全球 CDN 等优点，应该、似乎、也许只要我点点小手就行了吧？然而真是太年轻，一踩一个坑。特此记录。