技术2026年10月28日3 分钟

Next.js 14 博客重构：搭建属于自己的数字空间

基于 App Router 与服务端组件重构博客，搭配可视化块编辑器，搭建我的数字花园。

#Next.js #TypeScript #写作

GauLik_Zhang

最后更新于 2026年11月6日

过去几年，我的文章散落在各种笔记软件里。它们被标签、星标和搜索框管理着，却始终没有一个真正属于自己的房间。于是这个秋天，我决定把博客重新搭起来。

这次没有选择庞大的框架，也没有先写一堆配置。目标很简单：打开编辑器，像搭积木一样把文字、图片和视频放进去，然后发布。

为什么是 App Router？

Next.js 14 的 App Router 让「页面」重新变成了可以组合的东西。服务端组件负责读取数据与 SEO，客户端组件只处理真正需要交互的部分，比如主题切换、代码复制和后台拖拽。

这种边界感很舒服。页面默认是轻的，交互是明确的。

米色书房里的书桌与窗外阳光 — 理想中的写作角落：一张桌子、一点自然光，以及足够长的安静。

内容块，而不是 Markdown 语法

我希望写作时不用记住「三个反引号」或「两个星号」。每个段落、图片、视频和代码都是独立的块，可以拖动排序，也可以随时删除。数据最终仍然落成结构化的 JSON，清爽、可迁移。

工具应该退到内容背后。写作时只看见文字，编辑时只看见积木。

下面这段代码是文章详情页获取数据的方式。服务端直接读取本地 JSON，再交给 React 渲染；后台保存则走 Route Handler。

app/(site)/posts/[slug]/page.tsx

TypeScript

import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { getPublishedArticleBySlug } from "@/lib/articles-store";

type ArticlePageProps = {
  params: { slug: string };
};

export async function generateMetadata({
  params,
}: ArticlePageProps): Promise<Metadata> {
  const article = await getPublishedArticleBySlug(params.slug);

  return {
    title: article?.title,
    description: article?.excerpt,
  };
}

export default async function ArticlePage({ params }: ArticlePageProps) {
  const article = await getPublishedArticleBySlug(params.slug);
  if (!article) notFound();

  return <ArticleView article={article} />;
}

接下来

这个博客还会继续长大：RSS、全文搜索、评论、图片压缩。但至少现在，它已经能安放一篇文章了。

如果你也想搭一个，欢迎从「先写下第一篇」开始，而不是从「选一个完美框架」开始。

为什么是 App Router？

内容块，而不是 Markdown 语法

接下来

评论区