Personal Web Stack

从空项目开始,先搭好一个能继续长成个人小站的全栈底座。

这个 demo 采用 Next.js 一体化全栈方案,内置 SQLite、 API Route、前端直连第三方接口示例,以及适合个人网站长期维护的一键开发和部署脚本。

前后端

Next.js 16

数据库

SQLite

部署方式

Docker

Demo 01

SQLite 笔记面板

通过本项目后端的 Route Handler 读写 SQLite,展示一个最轻量但完整的 CRUD 起点。

打开笔记面板

Demo 02

前端直连第三方接口

在浏览器中直接请求 GitHub API,模拟你后面接入地图、天气、搜索等第三方服务的场景。

打开实验室

Deploy

镜像推送与远端更新

脚本会在本地构建 Docker 镜像,推到 Harbor,再远程重启 Docker 容器,适合个人站的低运维部署。

查看首页说明
架构方向

这套底座后面适合继续加什么

如果你后续要慢慢把它长成个人站点,可以继续往里挂内容页、工具页、 账号体系、后台管理、Webhook、定时任务,甚至接上 AI 能力。

保持一个仓库就够了

页面、接口、数据库访问层都在同一套 Next.js 项目里,开发时不用维护多套工程和重复配置。

后面加功能也不乱

如果要新增文章页、项目页、工具页或登录后台,可以继续沿用 App Router 和 Route Handler 的目录约定。

前端可直连,也可走后端

同一个站里同时兼容两种模式:既能走自己的 API,也能直接请求第三方接口,适配不同功能形态。

部署尽量收敛成一个动作

用 Docker 镜像把运行环境固定下来,再通过一条脚本完成推送和远端更新,减少环境漂移问题。