Family Tree：极简开源家族树网站，基于Next.js一键部署数字家谱

原创发布日期：2026-03-03

在数字化时代，如何优雅、便捷地记录和展示家族历史，成为许多家庭的文化需求。不同于功能庞杂的传统家谱软件或复杂的桌面工具，Family Tree 项目以其极简主义和现代Web技术栈，提供了一个清晰、美观且易于部署的解决方案。本文将为您详细解读这个在GitHub上获得超过500星标的热门项目。

一、Family Tree是什么？

Family Tree 是一个基于 Next.js 框架构建的、用于可视化展示和管理家族历史与成员关系的网站项目。其核心定位是“极简开源”，旨在让用户通过简单的JSON数据配置，快速生成一个专属于自己家族的、具有清晰代际关系和成员详情的网站。

从更广义的概念看，“家族树”是一种利用互联网技术，依据血缘关系将家庭成员联系起来，并按辈份排序构成的树状模型。它帮助成员了解家族起源、关系，并享有记录、分享等沟通服务。而本项目正是这一理念的轻量级技术实践，将传统的“认祖归宗”思想与现代化的Web开发相结合，降低了创建数字家谱的门槛。

二、功能特色

该项目专注于核心的展示与记录功能，设计简洁而实用。其主要功能特色如下：

功能模块	具体描述
多代可视化	以清晰的布局展示多个世代的家族成员，结构一目了然。
关系链接	通过连线等方式，直观地显示成员之间的父子等亲属关系。
信息记录	为每位成员记录姓名、详细信息（生平、配偶等）、生卒年份等。
灵活认证	提供可选的登录认证机制，可配置为完全开放、允许所有家族成员或仅特定姓名访问，兼顾分享与隐私。
高度可定制	家族数据、网站标题（姓氏）、访问控制等均可通过配置文件轻松修改，满足个性化需求。
AI数据辅助	项目文档创新性地提出了利用AI（如ChatGPT、Claude）将零散家族信息快速整理成所需JSON格式的方法，极大提升了数据准备效率。
现代技术栈	基于 Next.js 和 TypeScript 开发，具备良好的性能、开发体验和部署便利性（如支持一键部署至Vercel）。

与一些功能全面的家谱软件（如支持GEDCOM格式、多媒体管理的 My Family Tree 或基于Python的桌面工具 Gramps）相比，本项目更侧重于提供一个专注于Web展示、易于分享和定制的轻量级方案。

Family Tree：极简开源家族树网站，基于Next.js一键部署数字家谱

三、使用方法（快速开始）

使用该项目搭建专属家族网站非常简单，只需以下几个步骤：

获取项目：访问项目GitHub地址（https://github.com/qiaoshouqing/familytree），将代码克隆到本地。
安装依赖：在项目目录下，使用 npm install 或 pnpm install 等命令安装必要的依赖包。
环境配置：

复制 .env.local.example 文件为 .env.local。
在 .env.local 中设置关键配置，如是否需登录 (NEXT_PUBLIC_REQUIRE_AUTH)、家族姓氏 (NEXT_PUBLIC_FAMILY_NAME) 等。

准备家族数据（核心步骤）：

在 config/ 目录下创建 family-data.json 文件。
数据需遵循特定的 JSON 格式，按“世代”(generations)组织，每个成员需包含唯一id、name、fatherId（用于建立父子关系）等字段。一个简单的示例如下：

{
 "generations": [
  {
   "title": "第一代",
   "people": [
    {"id": "grandpa", "name": "祖父", "info": "家族创始人", "birthYear": 1900}
   ]
  },
  {
   "title": "第二代",
   "people": [
    {"id": "father1", "name": "父亲", "info": "配偶李某某", "fatherId": "grandpa", "birthYear": 1930}
   ]
  }
 ]}

技巧：如果已有大量零散家族信息，强烈推荐使用项目文档中介绍的 AI辅助生成 方法。只需向AI工具提供文本和格式要求，即可快速获得结构化的JSON数据，再进行微调即可。

运行与部署：

本地运行：执行 npm run dev，然后在浏览器访问 http://localhost:3000 即可查看。
在线部署：推荐使用 Vercel 平台进行一键式部署，即可获得一个可永久访问的公开网址。

四、项目地址与资源

GitHub 仓库：https://github.com/qiaoshouqing/familytree
在线演示：https://familytree.pomodiary.com/
技术栈：Next.js, React, TypeScript。
开源协议：MIT License。

五、常见问题解答 (FAQ)

Q：这个项目和FamilySearch、Gramps等大型家谱平台有什么区别？

A：本项目是轻量级、可自托管的网站生成器，目标是为单个家族创建独立的展示站点，数据和样式完全自主控制。而FamilySearch是一个庞大的全球协作数据库，Gramps是功能复杂的桌面研究软件。它们定位不同，本项目更侧重私人化、美观的展示。

Q：数据安全吗？如何保护家族隐私？

A：数据以JSON文件形式存储在自己手中，项目本身不涉及云端数据库。通过配置 .env.local 中的 NEXT_PUBLIC_REQUIRE_AUTH 和 AUTH_MODE，可以灵活设置访问权限，例如仅限特定家庭成员登录查看，从而保护隐私。

Q：支持复杂的亲属关系吗？比如收养、继父母、兄弟姐妹关系？

A：当前版本的核心关系模型基于 fatherId 建立的父子链，主要用于展示直系血亲的世代传承。对于更复杂的亲属关系（如收养、继父母），可以在成员的 info 文本字段中进行描述。项目未来可能通过社区贡献扩展关系类型，但目前更专注于清晰的代际可视化。

Q：如何备份或迁移我的家族数据？

A：非常简单，只需备份 config/family-data.json 这一个文件即可。迁移到新服务器或本地环境时，也只需替换该文件并重新部署。

Q：我不会编程，能使用这个项目吗？

A：可以。项目最大的优点就是配置简单。您只需要按照格式要求编辑JSON文件（可借助AI工具），即使没有编程经验，在了解基本步骤后也能成功部署。详细的README文档提供了完整指引。

六、总结

综上所述，Family Tree 是一个设计精良、文档完善、上手门槛低的开源家族树网站项目。它巧妙地将现代Web开发技术（Next.js）与家族文化传承的需求相结合，通过极简的配置和创新的AI数据辅助方法，让每个家庭都能轻松拥有一个专属的、可定制的数字家谱展示平台。它不追求功能的庞杂，而是在“可视化展示”和“易于部署”上做到了极致，是独立开发者和普通家庭记录、分享家族历史的优秀工具。