继续准备 NextJS 新官网项目

今天的工作任务是继续准备 NextJS 新官网项目需要的内容，由于采用了 App Router 模式开发，以往采用 Page Router 的开发经验也基本不能用了。感觉这玩意借鉴 Remix 的地方不少，你说那个 Client Component 和 Server Component 有啥不同，除了几个 Hooks 和 API 不能用，我是真没发现有啥明显区别，查看源代码，所谓的 Client Component 实际也是服务端渲染返回的。

我依旧是以实际需求驱动学习，主要是调研选择一些库，关于多语言方面，最终确认 next-international 这个库最符合目前项目的需求。TS 挺强大不说，我可以根据页面拆分文件，尽可能减少耦合程度，还能按需使用和渲染，不会将所有页面的翻译内容全部传给客户端。期间遇到的其他问题，下面简单列出自己的理解：

• 初步看了下 Zustand 的 整合文档

  • 需要结合 useRef 和 Provider 存储 Store 实例
  • 而不是直接声明在某一处变量里，估计是为了避免跨用户共享数据
  • Vue 3 那边的 Pinia 就开箱即用，直接安装一个插件就完了，不知道是不是类似的实现

• SEO 优化 generateMetadata 返回 Canonical 头，发现拿不到当前页面链接

  • 起初参考 此问题 第一个回答在思考这玩意怎么拿到完整请求链接
  • 后续看到第二个回答的 ./ 就能完美解决，NextJS 直接自己二次包装了
  • 我之前 RemixJS 的都是手写拼接的链接，也没去看有没有什么库，它主打的就是诚实！

• 项目加入多语言之后，404 页面访问异常出现白屏什么都不显示

  • 看到 Next.js 如何在 i18n 场景下处理 404 页面 这篇文章，并参考它提供的方案，解决页面返回 200 状态码的问题
  • 实际就是继续沿用 notFound 函数，只是重写了 404 页面内容本身