Next.js 构建博客
以 GitHub Issues 为数据源，用 Next.js 搭建个人博客的完整过程：pnpm workspace 初始化与数据抓取、App Router 页面渲染与 SSG 静态导出，图片防盗链和动态加载等问题的处理，图片预览与访问量统计的补充，以及 GitHub Actions 自动构建部署。
共 6 篇更新于 2023-12-27
01Next.js 构建博客之资源抓取
Next.js 博客系列开篇记录如何用 pnpm workspace 初始化 MonoRepo，安装 axios、dayjs、dotenv、fs-extra 等依赖，在 sideEffect 中封装 GitHub API，通过个人 token 在开发环境调用 issues 和 labels 接口，并递归分页抓取数据保存到本地，以应对分页未知与调用限额。
2023-12-01
02Next.js 构建博客之博客搭建
把上一节抓取的 GitHub Issues 数据接入 Next.js，用 App Router 的 layout 复用左右布局，首页与分页共用 Content 组件，详情页通过动态路由 [id] 取文章并用 bytemd 渲染 Markdown 内容。
2023-12-01
03Next.js 构建博客之打包SSG
为解决客户端渲染的首屏速度和 SEO 问题，博客改用静态导出。文章用 generateStaticParams 枚举动态路由参数，配置 output: "export"，并通过 generateMetadata 生成各页面的动态标题。
2023-12-08
04Next.js 构建博客之常见问题处理
梳理 Next.js 构建博客时遇到的两类问题：图片防盗链导致的 403，用 fetch 设置 no-referrer 重新获取图片；next/dynamic 跳过 SSR、延迟加载与自定义 loading 的使用场景，以及用 Suspense 剥离客户端组件。
2023-12-15
05Next.js 构建博客之功能拓展
给 Next.js 博客补上两项功能：用 react-viewer 做客户端渲染的图片点击预览，通过监听 .markdown-body 的点击事件定位图片索引；访问量统计接入不蒜子，在路由变化时重新拉取数据。
2023-12-26
06Next.js 构建博客之自动构建
文章介绍如何用 GitHub Actions 自动构建并部署 Next.js 博客，配置 nextjs.yml 工作流，在 push 和 issues 事件触发后安装 pnpm 依赖、恢复缓存并执行构建，最后将静态文件发布到 GitHub Pages。工作流包含 build 与 deploy 两个 job，并限制并发部署。
2023-12-27