ZON

欢迎来到我的博客

在这里分享我的开发实践、技术见解和学习心得

最新文章

两次白屏让我长记性:一次是后端改字段名,一次是 URL 参数被微信吞掉。本文记录我如何用 Zod 给页面加验证,降低崩溃率的过程。

本文介绍了为 Gemini CLI 设置代理的详细步骤,包括查找本地代理端口和配置环境变量,以解决网络限制问题。

通过一个SVG 缩放问题,深入分析 AI 编程辅助工具的局限性,以及为什么关键技术问题仍需要人工深度分析。记录了从 AI 多次尝试失败到最终手动定位根本原因的完整过程。

记录我在AI助手帮助下,从双重认证系统冲突到统一NextAuth.js架构的完整重构过程。深入分析需求不明确导致的技术债务,以及如何通过系统性诊断和架构重设计彻底解决认证状态管理问题。

图解 Google、GitHub、微信、手机与邮箱五种认证方式的配置流程

记录一学习MCP 跨工具记忆共享功能过程心得

深入分析AI辅助开发过程中产生的典型技术问题,包括状态管理混乱、异步调用错误、类型安全缺失等,并提供系统性的重构方案和最佳实践指南。

详细记录了 Digital Nomad Toolkit 应用的全面性能优化重构过程,包括数据加载策略简化、现代化 Loading 组件实现、缓存策略优化等关键技术问题的解决方案,最终实现了首屏加载时间从10+秒减少到3秒以内的显著提升。

记录了我在AI传记生成器项目中发现严重认证安全漏洞,并完整重构认证系统的实战过程。从bcrypt密码哈希到NextAuth.js集成,从Notion数据库设计到OAuth第三方登录,详细分享了技术选型、问题解决和架构设计的完整思路。

深度记录一个困扰一周的技术难题:Next.js项目中集成Mermaid图表缩放功能时,React虚拟DOM与svg-pan-zoom命令式DOM操作产生根本冲突。通过Playwright MCP自动化调试工具最终发现问题根源,并采用iframe沙箱方案彻底解决。本文详细分析踩坑过程、技术选型思考,以及浏览器自动化工具在复杂前端问题调试中的价值。

详细记录了从环境搭建到成功运行第一个 MCP (Model Context Protocol) 天气服务器的完整过程,包括遇到的虚拟环境依赖冲突、网络超时、API 密钥安全等实际问题及解决方案。最终实现了 85.7% 成功率的天气查询服务,支持全球多个城市的实时天气信息获取。

今天开始正式学习MCP,记录一下我的学习轨迹和那些"啊哈"时刻。

详细记录博客系统中有序列表渲染异常的完整排查和修复过程,包括问题定位、根因分析、修复方案选择和实施验证,为类似的Markdown渲染问题提供系统性解决思路。

记录创建百宝箱智能体的体验过程,通过实际操作展示如何从想法到实现的完整路径。

记录个人博客开发中,发现标签词云未能完整展示所有标签的排查过程,分析词云实现原理,调研2025年主流方案,并给出当前最佳实践与后续优化展望。

记录一次 Next.js 博客项目中 Mermaid 图表边标签(label)无法显示的真实排查过程,涵盖问题现象、对比分析、依赖链路梳理、社区资料查询、最终定位与最小化修复方案。附详细流程图、表格和经验总结,助你高效解决类似前端集成难题。

本文将提供一份保姆级教程,详细介绍如何利用 Notion 作为免费数据库,并结合 Next.js App Router 构建一个功能完善、安全可靠的 Waitlist (等候名单) 系统。内容涵盖从零到一的配置、代码实现、安全加固及常见问题排查,帮助您轻松地为产品落地第一个关键功能。

我正在构思一个 AI视频生成生成工具,在验证 MVP 方案的过程中,经历了从 Notion 到 Vercel Blob、再到 Cloudflare R2 的技术选型之旅。本文记录我在探索真实内容生成、视频生成及成本控制中的架构选择与思考过程。

分析银行系统数据库查询中发现的一个反直觉现象:在千万级数据量下,当索引无法区分数据时,加索引查询竟比全表扫描慢100倍以上。本文从底层机制详细解析这一现象的技术原理。

记录一次由于 Markdown 渲染链路不一致导致图片无法显示的bug,分析问题根因、渲染流程,并给出前后端统一的正则修复方案。

记录在Next.js博客项目中解决图片无法显示问题的完整过程,从错误的content目录存放方式优化为标准的public目录管理,建立了完整的图片管理最佳实践体系。详细分析了Next.js静态资源处理机制、路径配置原理和标准化管理流程。

记录notion数据中解决Vercel Edge Request异常高峰问题的完整过程,将12小时4500次请求通过内存缓存+限流方案降低,实现性能提升。详细分析了技术选型、实现过程和遇到的困难。

深入分析多项目间共享关于页面的7种技术方案,从共享组件库到独立子域名,最终选择最符合"一键同步"需求的实现方案,并完成实际代码修改。

本文详细记录了在 Next.js 博客项目中,针对详情页加载慢、主线程阻塞等性能瓶颈,通过将 Markdown 解析迁移到构建/服务端阶段,实现性能大幅提升的全流程分析和真实优化效果。包括问题发现、技术对比、实施过程、遇到的难题和最终成效对比。

在实现Mermaid流程图PNG导出功能时,我们遇到了一系列看似简单却十分棘手的问题。从"导出UI图标"到"canvas污染",每个问题背后都暴露了工程实践中的盲点。本文详细复盘整个排查过程,分析为什么没能一次性修复,以及如何建立更好的异常处理机制。

记录MermaidFlow项目中右侧Mermaid预览区域高度不匹配的完整调试过程。从使用Playwright进行页面检查、错误的初始判断,到最终精确定位iframe固定高度问题并实施修复的技术实战经验。

本文介绍如何使用 Namesilo 的 DNS 面板与 Vercel 平台配置自定义子域名。包括 DNS 记录设置、A/ALIAS/CNAME 等配置和 301 重定向的设置等关键步骤。文章详细记录了在配置过程中遇到的问题(如子域名被标记无法访问)及解决方案,并通过流程图和表格的方式展示技术方案对比和实施步骤,以帮助读者深入理解整个配置和部署过程。

本文详细记录了一个 Node.js 批量处理脚本的演进过程。从最初的版本,到如何解决遇到的网络超时、脚本卡死、错误处理不完善等一系列问题,最终实现一个稳定、健壮、可断点续传的自动化脚本。

记录一次因为混淆开发模式和生产模式导致的性能测试"乌龙"事件,深入分析 Next.js 中 dev 模式与 build 模式的本质差异,以及如何正确进行本地生产环境测试。

详细记录了博客从Lighthouse 70分优化到100分的完整过程,包括性能瓶颈分析、优化策略制定、实施过程以及最终效果验证。深度解析每次Git提交的具体改动和问题反思。

详细记录了 Next.js 应用中 Mermaid 图表在生产环境无法渲染的问题分析、解决思路和完整修复过程,包含动态导入优化、错误处理改进和性能考量。

基于真实的性能数据和开发体验,深入分析了从Monorepo架构回归到单仓库模式的决策过程。通过数据对比、业界调研和实践总结,展示了一次理性的技术架构决策历程。

记录从Monorepo构建失败到完全修复的技术实战过程:系统性分析59个文件的构建问题,建立问题分析框架,最终在3小时内完成所有修复。

深度记录 Playwright MCP 在 Cursor 1.0+ 版本中的兼容性问题,包括浏览器导航失败、实例冲突等核心问题的排查和修复过程。结合社区最佳实践,提供完整的故障诊断和解决方案。

记录一次目录功能的重大 bug 修复过程:代码块中的 # 号被错误识别为标题。从问题发现到深度调研,再到最终的 AST 解析方案,详细分析了 Markdown 解析的技术细节和最佳实践。

从解决30秒卡顿,到统一开发环境,再到修复Vercel构建,最终实现卓越性能与健壮流程。本文详细记录了一次Next.js博客从性能优化到工程化完善的全过程。

本文将对一个基于Next.js的博客进行全面的工程SEO审计,识别出关键优化点如JSON-LD、Canonical URL和Sitemap,并提供一套完整的、可操作的优化实现方案,旨在显著提升搜索引擎排名和点击率。

记录博客系统中代码块内容错位显示的完整排查和修复过程,从Playwright自动化测试发现问题,到采用分阶段内容块处理方案彻底解决,包含根因分析、市场调研和最佳实践总结。

详细记录将博客系统中自定义正则表达式解析器重构为基于remark的成熟方案的完整过程,包含技术选型分析、实现细节、问题排查和Playwright验证,为同类项目提供实战参考。

详细记录了我在优化博客过程中遇到的5个核心问题及其完整解决方案,包括Loading优化、Mermaid图表渲染、代码高亮、表格支持等关键功能的实现过程与技术细节。

详细介绍2025年最新的Vercel Analytics接入方式,包括完整的集成流程、高级配置、性能优化和最佳实践。让您的网站获得强大的数据洞察能力。

记录为个人博客添加目录功能的完整开发过程,包括技术选型、实际代码实现和遇到的问题解决。基于 Next.js + TypeScript + Intersection Observer 的实战经验。

本文将带你从零开始学习Next.js,了解其核心概念和最佳实践,构建你的第一个现代Web应用。

深入探讨React Hooks的最佳实践,包括性能优化、自定义Hook设计等高级技巧。

探索TypeScript的高级类型特性,包括条件类型、映射类型、模板字面量类型等。

热门标签

Next.js(28)
React(13)
性能优化(11)
TypeScript(9)
Mermaid(8)
Playwright(6)
Markdown(6)
MCP(5)
前端架构(4)
最佳实践(4)
Vercel(4)
Cloudflare(3)
架构设计(3)
缓存策略(3)
Notion API(3)
用户体验(3)
博客优化(3)
Performance(3)
svg-pan-zoom(2)
NextAuth.js(2)
状态管理(2)
OAuth(2)
Python(2)
技术债务(2)
iframe(2)
前端调试(2)
Notion(2)
Node.js(2)
Web Vitals(2)
Monorepo(2)
问题排查(2)
工程化(2)
remark(2)
代码高亮(2)
前端开发(2)
Zod(1)
前端安全(1)
数据验证(1)
Gemini(1)
CLI(1)
proxy(1)
setup(1)
SVG(1)
AI编程(1)
调试方法论(1)
Authentication(1)
AI辅助开发(1)
架构重构(1)
认证系统(1)
身份认证(1)
多因素认证(1)
安全配置(1)
Wrangler(1)
NextAuth(1)
Auth.js(1)
身份验证(1)
无密码登录(1)
FastAPI(1)
OpenMemory(1)
AI开发(1)
项目重构(1)
认证安全(1)
bcrypt(1)
系统重构(1)
问题调试(1)
Model Context Protocol(1)
FastMCP(1)
OpenWeather API(1)
httpx(1)
学习日记(1)
AI协议(1)
技术学习(1)
问题修复(1)
正则表达式(1)
Claude(1)
AI智能体(1)
百宝箱(1)
产品开发(1)
tag-cloud(1)
标签(1)
经验总结(1)
前端排查(1)
依赖管理(1)
可视化(1)
API(1)
Serverless(1)
Waitlist(1)
AI 创作(1)
MVP(1)
技术选型(1)
数据库优化(1)
MySQL(1)
索引设计(1)
性能调优(1)
银行系统(1)
图片渲染(1)
静态资源管理(1)
Edge Request(1)
多项目管理(1)
部署策略(1)
Web Performance(1)
SSG(1)
前端导出(1)
异常处理(1)
Canvas(1)
工程实践(1)
CSS布局(1)
Flexbox(1)
Namesilo(1)
DNS(1)
子域名(1)
域名解析(1)
Web Scraping(1)
Error Handling(1)
JavaScript(1)
Development(1)
Production(1)
Lighthouse(1)
生产环境(1)
动态导入(1)
问题解决(1)
Architecture(1)
技术决策(1)
pnpm(1)
workspace(1)
Cursor(1)
浏览器自动化(1)
故障排查(1)
开发工具(1)
AST 解析(1)
目录功能(1)
Bug 修复(1)
unified(1)
开发体验(1)
tsx(1)
实战(1)
SEO(1)
结构化数据(1)
重构(1)
代码质量(1)
UX设计(1)
React组件(1)
Analytics(1)
数据分析(1)
性能监控(1)
Intersection Observer(1)
教程(1)
Hooks(1)
类型系统(1)
高级特性(1)