前端工程进阶学习手记

用 Next.js 做一个纯静态 AI 知识站

用 App Router、静态数据和无刷新路由搭建个人垂直知识站的基础架构。

2026-04-2418 min read

返回列表

Step 1

选择静态导出优先的架构

个人知识站的访问路径简单，内容以阅读为主，静态导出可以获得稳定、便宜和极速的部署体验。

const nextConfig = {
  output: "export",
  images: { unoptimized: true }
};

Step 2

用结构化数据驱动页面

教程、视频、工具和项目都放进 TypeScript 数据模型，页面只负责渲染。等内容变多后，可以平滑迁移到 MDX 或 CMS。

这一节以流程图和实操截图为主，适合在阅读时对照操作。

Step 3

把搜索作为全局入口

轻量站点不需要复杂账号系统，但需要足够快的检索。Command K 能让旧内容再次被找到。

useEffect(() => {
  const onKeyDown = (event: KeyboardEvent) => {
    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
      event.preventDefault();
      setOpen(true);
    }
  };
}, []);