构建高性能疫情信息枢纽：Next.js实战与Web Vitals优化
1. 项目概述：一个由社区驱动的疫情信息枢纽
去年，当疫情信息在网络上如潮水般涌现，却又零散、混乱、难以实时核实时，我和一群开发者、设计师、内容志愿者共同参与了一个名为Warga Bantu Warga（意为“居民互助”）的开源项目。它的核心目标非常纯粹：将散落在各处、特别是那些以 Google 文档形式流转的、关于医疗设施、氧气供应、药物信息的宝贵数据，转化成一个高性能、高可访问性、且信息实时更新的网站，让任何有需要的人，无论身处印尼的哪个角落，使用何种设备，都能快速、准确地获取救命信息。
这个项目不是一个商业产品，而是一个完全由志愿者驱动的社会倡议。我们面临的挑战是多维度的：数据源是动态变化的 Google 表格，用户可能在使用低端安卓机和缓慢的 2G 网络，而信息的准确性又直接关系到生命健康。因此，从第一天起，我们的技术选型和开发原则就异常清晰——性能、可访问性和信息的实时性，这三者必须成为项目的基石，任何花哨但不实用的功能都必须为它们让路。我们选择了 Next.js 作为全栈框架，用 Tailwind CSS 快速构建 UI，并通过一套严格的自动化工作流来保障代码质量和部署可靠性。在接下来的内容里，我将详细拆解我们是如何从零构建这个站点，并确保它在严苛的真实环境下稳定运行的。
2. 核心架构与设计原则解析
在启动一个公益技术项目时，最忌讳的就是盲目堆砌技术。Warga Bantu Warga 的成功，很大程度上归功于我们在项目初期就确立并坚守的一系列核心设计原则。这些原则不是空泛的口号，而是直接指导了我们每一个技术决策和代码提交。
2.1 核心原则：性能、可访问性与实时性
我们的原则可以概括为“三要三不要”，这直接塑造了项目的技术面貌。
首要原则：性能为王我们服务的用户遍布印尼群岛，网络条件和设备性能差异巨大。一个在雅加达光纤网络下秒开的页面，在巴布亚的乡村可能因为资源过大而完全无法加载。因此，我们将Google Core Web Vitals作为衡量网站健康度的金标准。具体来说，我们重点关注：
- LCP (最大内容绘制)：确保首屏主要内容（如信息列表）快速加载。我们通过 Next.js 的静态生成（SSG）和图片优化来达成。
- FID (首次输入延迟)：确保页面可交互性，避免用户点击搜索或筛选时卡顿。这要求我们严格控制 JavaScript 包体积，并谨慎引入第三方脚本。
- CLS (累积布局偏移)：防止页面元素在加载时突然跳动，提供稳定的视觉体验。我们在开发中会使用 Chrome DevTools 的 Performance 面板和 Lighthouse CI 进行持续监控。
核心原则：人人可访问可访问性（A11y）不是可选项，而是必需品。我们的信息必须能被所有人获取，包括使用屏幕阅读器的视障人士、只能使用键盘导航的用户等。这意味着：
- 语义化的 HTML 结构（正确使用 `