跨仓库全自动构建项目并部署到服务器
最近，Vercel 又又对价格进行了调整，让 Hobby 越来越不够用了，所以放弃了使用 Vercel，转向私有服务器部署 Next.js 项目。 对于私有服务器的部署体验是非常不友好的。第一，没有 Vercel 这样的全自动部署，也不能及时回滚。第二，Next.js…
为什么是 RSC (二）
渐进式渲染# Important
渐进式渲染，或者称作流式渲染。这不是一个只能在 RSC 中可以享受到的特征，这种渲染模式和 Suspense、 renderToPipeableStream 或 renderToReadableStream 有关。
但是在 Next.js…
Shiki 性能优化 - 按需加载语法解析
Shiki 是一个非常优秀的代码高亮库。 https://github.com/shikijs/shiki
众所周知，代码高亮库包含了众多的语言解析器，导致加载比较缓慢，并且加载太多无用的解析器造成大量流量浪费。
这一节我们来实现按需加载 Shiki 需要的语言解析器。
动态加载…
为什么是 RSC (一）
React 19 会正式引入 React Server Component (RSC) 的概念，Client Component 和 Server Component 从此将会正式分离。Next.js 从 13 版本就开始支持 Server Component。那么为什么是…
INFP-T的内心世界、个人站点更新
超共鸣！INFP-T 的内心剧场# 在网上看到这样一个视频，简直说的就是我了。
https://www.bilibili.com/video/BV13F4m1F7Cf
社交五分钟，复盘一整天，晚上睡觉都在想。甚至在群里说了句话没人回，都要思考是不是自己说错了啥…
利好 SharedWorker 实现跨页面单例 WebSocket
在之前的文章中，我详细的介绍了站点的实时人数是如何实现的？，在方案中，我留下了一个悬念，如何使用 SharedWorker 在页面之间共享 Socket 实例，实现跨页面单例 WebSocket。 动机#
探索这个问题的背景是无意间在知乎看到了 WebSocket 的一个问题…
一次构建多处部署 - Next.js Runtime Env
我们一般通过控制 env 的方式去做到 "Build once, deploy many" 哲学。但是在 Next.js 中，环境变量分为两种，一个种是可被用于 Client 侧的 NEXT_PUBLIC_ 开头的环境变量，另一个种是只能被用于 Server 侧的环境变量…
站点的实时人数是如何实现的？
经常光顾我站的读者应该都看到过我站底部有显示当前在线的人数。在不久之前我还为其增加了显示当前正在阅读具体哪篇文章的人数排行，并且在具体的某篇文章左侧增加时间线，用于展示当前所有正在阅读此文章的读者阅读进度。 如果你看过我站的开源项目的话大概知道此站是由 Mix Space…
2024 年，该如何写一个全面兼容的 NPM 库
最近，把 rc-modal 做成了一个库。写代码倒是不难，无非就是把原本的代码封装抽象一下。倒是发包，和作为使用者如何使用这个包难住了。 首先，我们知道现在一个 npm 包如果不做 ESM Pure 的话，你需要考虑兼容 CJS/ESM，node 老版本和新版本（吃不吃…
缓存标头和利用边缘网络加速访问
本文以 Cloudflare + Vercel 为例。 了解缓存标头#
在生产中，我们通常会利用 Redis 去缓存接口数据。对于前端应用来说，我们一般会利用内容分发网络（CDN）去缓存页面和其他静态资源。
我们知道 HTTP 标头 cache-control 可以用来强缓存资源…
嘿，请看这里
最近在写一本小册。 聊点不一样的 Next.js
大概有人已经看过了。
如果你有任何意见请告诉我。也可以在底下留言。
目前正在编写中，处于免费开放试读阶段。
请给我动力让我能够继续编写下去。谢谢您。
此文由 Mix Space 同步更新至 xLog
原始链接为 https…
Server Action & Streamable UI
Note 此小节启发于 https://sdk.vercel.ai/docs/concepts/ai-rsc
以下代码在 Next.js 14.1.2-canary.3 中可以工作，其他版本或许会有改动
此文章首次发布于我正在编写的 聊点不一样的 Next.js 小册…
编程夜话与影游旅程
网站的新变化# 年间这几天，夜不能寐，总想快点实现一些想法。起因是：https://x.com/ctnicholasdev/status/1754889044423741926?s=20
然后我也有了实现这个功能的想法。
现在他来了。虽然可能不太准。你可以通过页面左侧查看…
NextJS/React 加载远程组件
前言# 写过文档的大佬们都知道 MDX 这个东西，对原本的 Markdown 进行了扩展，可以在 Markdown 中直接使用框架组件（React，Vue 等等）。
现在也有很多静态生成的博客使用 MDX 去编写博文，在博文中内嵌了 React 组件，在一些需要交互式的场景中…
24M1
这段日子一直在家里，也不知道干了啥，这就快到年底了。 技术#
写了 2 篇文章。
https://innei.in/posts/programming/modular-request-data-management-concept
https://innei.in/posts…
模块化的请求数据统一管理的构想
在一个复杂的业务场景下，一个页面中被拆分多个组件，或者是多个组件共同组成一个独立的模块而不受到其他模块的影响。如下图所示。 Copy
{"type":"excalidraw","version":2,"source":"http://localhost:2323…
关于 React Native 的 WebView 编辑器问题记录
本篇文章主要解决两个问题： WebView 编辑器 Toolbar 的吸附键盘 WebView 编辑器焦点元素被虚拟键盘遮挡
Important
这篇文章可能只适用于 React Native ~0.72
背景#
最近在写 React Native，需要实现一个文本编辑器…
穿越云南，穿梭银幕
出行# 公司组织了一次团建，前往云南大理和丽江的为期四天的旅游。
这也是我第一次来到离家两千多公里的中国西部地区。由于我长期都是在家远程工作，并没有和其他同事见过面。作为 I 人又紧张又激动。
我是从上海出发，由于航班的延误，第一天的行程我没有赶上，到达大理之后，已经是晚上饭点…