我是一个全栈程序员,已经尝试过各种框架来制作我的博客,包括但不限于 VitePress、Halo、Astro 等。最终,我还是选择了我最熟悉的 Next.js。
这并不是因为它是「最好的博客框架」,而是因为它最符合我的需求。
我的博客不仅仅用来写文章,它还是我的技术实验室。我会在这里尝试新的动画、新的交互、新的数据库架构、新的 AI 能力,甚至会把它当作一个完整的 Web 应用来开发。
因此,我需要的并不是一个优秀的静态博客生成器,而是一个拥有完整生态、足够灵活且几乎没有上限的全栈框架。
#!/app/page.tsx
export default function RootPage() {
return <>Hello Next.js🎉</>
}Halo 是一个基于 Java 的博客框架,它提供了丰富的功能和完善的后台管理系统。
然而,我并不喜欢 Java。对于一个个人博客而言,为了运行它还需要维护一整套 Java 服务,无论是部署还是后期维护,对我来说都有些过于笨重。
另外,它的主题开发体验也并不理想。
如果只是换个配色倒还好,但如果想彻底重构页面,就需要重新学习 Halo 的模板体系,并继承别人写下的大量 CSS 类名和变量。
最让我难受的是——它们几乎都不用 Tailwind CSS。
而我现在已经完全习惯了 Utility First 的开发方式,再回到传统 CSS 的开发体验,确实很难适应。
VitePress 是一个非常优秀的静态站点生成器。
如果只是写文档,它几乎是我的首选。
它拥有极快的构建速度、优秀的 SEO,以及极佳的 Markdown 支持。
理论上来说,它甚至可以只依赖 Markdown 文件生成完整的网站,不需要任何后端服务。
但是问题也正出现在这里。
我的博客并不是完全静态的。
例如:
这些能力虽然都能够在 VitePress 中实现,但大多需要自行拼装各种插件,或者编写大量客户端代码去请求接口。
随着功能越来越多,它更像是在一个静态网站生成器上不断打补丁。
而我更希望框架本身就能够很好地支持这些动态能力。
很多人都会说 Next.js 有很多功能。
但真正吸引我的,并不是某一个功能,而是它们能够组合起来。
例如首页的文章列表几乎不会变化,可以直接使用 SSG,获得接近纯静态网站的访问速度。
文章详情页又包含评论、阅读量、点赞等动态内容,可以使用 SSR 或缓存策略进行渲染。
而像评论区、阅读量这样的局部动态数据,又能够通过 React Server Components 与 Partial Prerendering (PPR) 进行流式加载。
以前我需要自己思考:
现在更多时候,我只需要思考一句话:
这份数据应该什么时候更新?
剩下的大多数工作,都可以放心交给 Next.js。
我认为这是近年来 React 最大的一次架构升级。
以前写 React,大部分页面都会经历这样的流程:
浏览器下载 JavaScript → Hydration(水合)→ 请求接口 → 再次渲染页面。
而现在,很多事情都可以直接发生在服务器。
例如:
export default async function Page() {
const posts = await getPosts()
return <PostList posts={posts} />
}整个页面甚至不需要任何客户端 JavaScript。
数据库查询、Markdown 渲染、权限判断等逻辑,都可以直接放在服务端完成。
真正需要交互的时候,再写一个 Client Component 即可。
这种开发体验,让我感觉像是在写传统服务端模板,却拥有 React 的组件化开发方式。
这是我最喜欢的新特性之一。
博客页面真正动态的内容其实并不多。
例如:
如果整个页面 SSR,那么为了几个数字,每次请求都要重新渲染整个页面。
如果全部交给客户端请求,又会看到页面不断出现 Loading、闪烁等体验问题。
PPR 正好解决了这个矛盾。
静态内容立即返回。
动态内容通过 Suspense 以流式方式发送。
用户既能快速看到页面,又能够在后台完成动态数据加载。
这种体验非常自然,也让我第一次觉得 SSR 与 CSR 并不是非此即彼,而是能够真正结合起来。
这一点,几乎是我最终选择 Next.js 最重要的原因。
很多博客框架都会告诉你:
「推荐这样开发。」
如果你的需求刚好符合,它们会很好用。
但一旦需求开始复杂,就会发现很多地方根本改不了。
而 Next.js 更像是一块乐高积木。
我可以自由组合自己喜欢的任何技术。
例如我的博客目前已经集成或计划集成:
未来如果我想加入:
几乎都不需要迁移框架。
它不会限制我的想法,而是能够承载我的各种尝试。
很多人觉得 Server Component 会让 React 变复杂。
但我反而觉得,它让组件职责变得更加清晰。
服务器负责:
客户端负责:
例如:
'use client'
export function LikeButton() {
const [liked, setLiked] = useState(false)
// ...
}只需要一句 'use client'。
剩下的事情,全部交给 Next.js。
相比以前整个页面都运行在客户端,我觉得这种方式更加自然,也更加符合 Web 本来的运行模式。
随着 AI 编程越来越成熟,我越来越觉得,一个框架是否适合 AI,也成为了重要的衡量标准。
而 Next.js 无疑是目前 AI 生态最完善的前端框架之一。
官方不仅提供了:
几乎所有主流 AI Coding Agent,也都优先支持 Next.js。
很多以前需要查半天文档才能完成的功能,现在一句 Prompt 就能够生成完整的页面。
AI 已经成为开发流程的一部分,而 Next.js 则是目前与 AI 协作体验最好的框架之一。
我并不认为 Next.js 是所有博客最好的选择。
如果只是写一份文档,我依然会推荐 VitePress。
如果只是个人记录,Astro、Eleventy 都是非常优秀的静态博客方案。
如果更喜欢开箱即用,Halo、WordPress 等成熟 CMS 依旧拥有庞大的生态。
但是对于我来说,博客从来都不仅仅是一堆 Markdown。
它还是我的实验场。
我会不断尝试新的动画、新的交互、新的数据库架构、新的 AI 能力,甚至把它当作新的技术试验田。
而 Next.js 几乎不会因为我的想法而限制我。
它可以是一份文档站,也可以是一套博客系统;可以是一个作品集,也可以成长为一个完整的平台。
正因如此,在尝试了许多框架之后,我最终还是回到了 Next.js。
因为它不仅仅是一个博客框架,更是一个能够承载我所有想法的平台。