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，兼顾性能与用户体验。

功能亮点

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

快速开始

1.克隆仓库：git clone https://github.com/yunshenwuchuxun/yunshen-blogv1.git

2.安装依赖：yarn install

3.启动开发服务器：yarn dev

4.访问 http://localhost:3000 即可体验

适用人群

→开发者 - 寻找现代化博客模板
→技术写作者 - 需要 MDX 支持的内容平台
→个人站长 - 部署自己的博客站点