最近在写一本小册。 [聊点不一样的 Next.js](https://nextjs-book.innei.in) 大概有人已经看过了。 如果你有任何意见请告诉我。也可以在底下留言。 目前正在编写中,处于免费开放试读阶段。 请给我动力让我能够继续编写下去。谢谢您。
最近,Vercel 又又对价格进行了调整,让 Hobby 越来越不够用了,所以放弃了使用 Vercel,转向私有服务器部署 Next.js 项目。 对于私有服务器的部署体验是非常不友好的。第一,没有 Vercel 这样的全自动部署,也不能及时回滚。第二,Next.js 项目构建需要非常大的内存和 CPU 资源,一般的轻量服务器可能在构建过程中不是爆堆就是宕机了。 目标 利用 GitHub 去构建一个通用产物,不受构建时的环境变量影响。(后者你可以通过 [一次构建多处部署 - Next.js Runtime Env ](https://innei.in/posts/tech/...
现代 Web 中,在页面之间跳转对内容增加动画并不少见。 比如,我在「手记」中在页面中切换中加入了纸张划出的效果。 页面动画的时间控制在 500ms 之内,既不会感觉很慢也不会很快。 因为我需要使用 Spring 动画去拟合一个更加真实的动画,使用了 Framer Motion 去制作动画。 页面过度动画非常好用,有效避免了切换内容时的突兀感。 很快我注意到,如果过渡效果出现在页面第一次进入时,会变得非常奇怪。也许这个动画应该消失,**因为用户第一次进入页面也许...
渐进式渲染 [!IMPORTANT] 渐进式渲染,或者称作流式渲染。这不是一个只能在 RSC 中可以享受到的特征,这种渲染模式和 Suspense、 renderToPipeableStream 或 renderToReadableStream 有关。 但是在 Next.j...
Shiki 是一个非常优秀的代码高亮库。 https://github.com/shikijs/shiki 众所周知,代码高亮库包含了众多的语言解析器,导致加载比较缓慢,并且加载太多无用的解析器造成大量流量浪费。 这一节我们来实现按需加载 Shiki 需要的语言解析器。 动态加载 开始之前,我们需要先进行一些准备工作。 Shiki 组件的定义类似这样的。 import { bundledLanguages, getHighlighter } from 'shiki' import t...
React 19 会正式引入 React Server Component(RSC) 的概念,Client Component 和 Server Component 从此将会正式分离。Next.js 从 13 版本就开始支持 Server Component。那么为什么是 RSC?优势到底何在?这一章节我们来探讨一下这个问题。 规避水合错误 RSC 的出现减少了 水合错误 (Hydration Error) 的发生,如果你只使用 Server Component 去描述所有的组件的,那么水合错误也不会发生。 首先我们来复习一下,为什么会出现水合错误。 我们知道在传统 SSR 架构...
在某些长列表场景中,为了优化渲染性能,一般会采用虚拟列表,虚拟列表会将超过一定可视范围的 DOM 节点移除通过 padding 或者绝对定位去填充高度。 在被移除的节点上,是无法应用选区的。假设现在有场景我们需要一个长列表中的复制文本的需求,为了性能又要兼顾使用虚拟列表。此时我们使用原生选区滚动超过一定范围之后,之前的选区就丢失了,导致复制的内容不完全。 下面是一个简单的例子,你可以亲自尝试一下。 import=https://cdn.jsdelivr.net/npm/@innei/react-cdn-components@0.0.12/dist/compone...
在服务端渲染中,页面预渲染需要的数据一般由服务器提供。在 Next.js 框架中,可分为两种。Next.js 作为全站框架,获取数据直接在 Next.js 服务中调用方法;或者借助外部 API 服务,通过 HTTP 或者其他方式获取数据。 在获取数据的过程中,可能会出现异常,例如网络请求超时、服务端异常等。这时候,我们需要对异常进行处理,以保证页面的正常渲染。 编写一个简单的数据接口和页面渲染 下面是一个简单的例子。这是一个简单的获取 posts 接口实现。 import { NextRespo...
在之前的文章中,我详细的介绍了站点的实时人数是如何实现的?,在方案中,我留下了一个悬念,如何使用 SharedWorker 在页面之间共享 Socket 实例,实现跨页面单例 WebSocket。 动机 探索这个问题的背景是无意间在知乎看到了 WebSocket 的一个问题,其中有回答提到 WebSocket 连接过于占用服务器资源。当页面重复打开很多个时,每个页面都会建立 WebSocket 连接,确实无意间的增大了服务器压力。虽说这个问题...
我们一般通过控制 env 的方式去做到 "Build once, deploy many" 哲学。但是在 Next.js 中,环境变量分为两种,一个种是可被用于 Client 侧的 NEXT_PUBLIC_ 开头的环境变量,另一个种是只能被用于 Server 侧的环境变量。前者会在 Next.js 构建时被注入到客户端代码中,导致原有代码被替换,那么也就意味着我们控制 env 并不能做到一次构建多处部署。一旦需要部署到不同的环境并且修改 env,我们就需要重新构建一...