Yun Shen Blog

基于 Next.js 16 与 React 19 构建的现代个人博客平台

项目简介

Yun Shen Blog 是一款精心打造的个人博客平台，采用 Next.js 16 App Router 与 React 19 构建，结合 Tailwind CSS v4 实现响应式设计。博客以 MDX 作为内容格式，支持丰富的代码高亮与自定义组件渲染。平台集成了 Lenis 平滑滚动、GSAP 与 Motion 动画库，配合 View Transition API 实现的主题切换，带来流畅的浏览体验。部署于 Vercel，内置 Analytics 与 Speed Insights，兼顾性能与用户体验。

博客首页与设计风格预览

Yun Shen Blog 以现代个人博客为目标，整体围绕简洁排版、流畅动效与稳定内容呈现展开。封面图展示的是项目首页的整体视觉风格，也对应这个博客最核心的产品形态：把内容、导航、动画和主题体验整合到一个统一界面里。

功能亮点

MDX 博客系统

基于 MDX 的内容管理，支持 rehype-pretty-code 语法高亮、自定义组件与 frontmatter 元数据

流畅动画体验

集成 Lenis 平滑滚动、GSAP 复杂动画与 Motion 声明式动效，交互自然流畅

主题切换

深色/浅色模式切换，基于 View Transition API 实现丝滑过渡效果

响应式设计

Tailwind CSS v4 驱动的自适应布局，在桌面端与移动端均有良好表现

性能优化

Turbopack 开发构建、React Compiler 编译优化、Vercel Edge 部署

SEO 友好

自动生成元数据、静态路由预生成、结构化内容组织，搜索引擎友好

技术栈

框架

• Next.js 16 (App Router)
• React 19

样式

• Tailwind CSS v4
• Biome 格式化

内容

• MDX
• next-mdx-remote
• rehype-pretty-code

动画

• GSAP
• Motion
• Lenis

部署

• Vercel
• Vercel Analytics
• Speed Insights