#优质博文 #前端 #nextjs #svg
基本是我们的方案，使用 SVGR。
How to import SVGs into your Next.js apps: A 2025 guide

AI 摘要：本文详细介绍了如何在 Next.js 应用中导入和使用 SVG 文件，探讨了多种方法及其优缺点，旨在帮助开发者在 2025 年的技术环境中更高效地处理 SVG 资源。文章从基础导入方式到高级优化技术，提供了全面的指南，特别指出了使用 next/image 组件的局限性，例如无法直接设置 SVG 的填充颜色等问题，并给出了相应的解决方案。

author Joseph Mawa

LogRocket Blog

How to import SVGs into your Next.js apps: A 2025 guide - LogRocket Blog

This article explores the different methods you can use to import and use SVGs in a Next.js application.

#优质博文 #前端
Why we ditched Next.js and never looked back

AI 摘要：Northflank 团队因 Next.js 的性能和开发体验问题放弃该框架，改用自建 React SSR 方案后实现 4-6 倍性能提升。

本文由云平台服务商 Northflank 团队撰写，分享了他们从 Next.js 迁移到自研 React SSR 方案的全过程。文章首先阐述了团队对性能、可靠性和开发体验的严苛要求，指出 Next.js 在营销站点和实时应用场景中的表现均未达预期。通过对比测试数据（如首屏渲染时间从 2.1s 缩短至 0.5s），团队验证了自研方案在性能上的显著优势。文中批评 Next.js 存在框架定位摇摆、缓存机制低效、编译过程复杂等问题，并揭露了其 Server Actions 功能隐藏的运维成本。最后，团队建议开发者根据实际需求选择技术栈，强调 SSR 并非必须依赖框架实现。

Conclusion
- 反对技术宗教化，提倡根据业务需求选择架构
- 指出 SSR 本质是技术决策而非框架依赖
- 预告后续将开源路由和渲染工具

#SSR #react #nextjs #性能优化

via Will Stewart, Tom Snelling

Northflank — Deploy any project in seconds, in our cloud or yours.

Why we ditched Next.js and never looked back | Blog — Northflank

When we started running into issues with Next.js, we did what any sane team would do: we tried to fix them. Then we tried again. Then we realized the problem was Next.js itself. So we pulled the plug.

#优质博文 #前端 #nextjs #SSR #性能优化 #vps
How much traffic can a pre-rendered Next.js site really handle?

我经常说类似这样的话：“一个预渲染的网站可以轻松地服务数百个并发用户”，因为，嗯，我从未见过它失败。

但是它实际上能处理多少流量呢？我的网站能否真正应对像 Hacker News 首页这样的流量激增？它与服务器端渲染相比如何？而且，为了避开 SSR，我们真的值得费尽周折吗？

我四处寻找关于 Next.js 性能的硬性数据，但令人惊讶的是，可靠的数字很难找到。因此，我在自己的网站上做了一些测试，结果并不像我所预期的。而且，时机恰到好处，我关于谷歌翻译干扰 React 的文章第二天就登上了 Hacker News 的首页。

AI 摘要：预渲染 Next.js 网站在高并发下进行性能测试，对比 SSR 表现，并探讨服务器升级选型问题。

文章内容
本文通过大量实验数据对比了 Next.js 预渲染与服务器端渲染（SSR）的性能。作者首先使用 k6 工具在 VPS 上对预渲染首页进行负载测试，结果显示单页面请求的性能远低于预期，仅能支撑有限的并发访问。文章详细解析了页面加载时各个请求（HTML、CSS、图片、JS 等）带来的额外流量负担，并通过 Docker 水平扩展进一步测试性能提升，结果有限。随后，作者观察到来自 Hacker News 的意外流量峰值，并由此探讨各种替代方案：Cloudflare、Vercel、家用服务器、VPS，最终转向性价比较高的 Dedicated Server。测试表明，专用服务器在处理请求数量和响应速度上均有显著提升，而 SSR 在相同配置下明显吃不消。最后，作者总结出预渲染模式在扩展性上具有明显优势，并预告将来针对“hug of death”现象及其他优化方案进行进一步探索。

via React Status 420

Martijn Hols

How much traffic can a pre-rendered Next.js site really handle? by Martijn Hols

How much traffic can a self-hosted Next.js site handle? I ran load tests, uncovered surprising limits, and compared pre-rendering with SSR.

#工具推荐 #前端 #组件库 #tailwind #react #nextjs #motion #落地页 #tools #动画

昨天群里看到的，相当漂亮的落地页酷炫组件库，且适用我的技术栈，加入知识库方便检索。

Aceternity UI 是一个前端UI组件库，专为快速构建美观网站而设计。用户可以通过复制粘贴组件代码，轻松集成到项目中，无需担心样式或动画。由 Next.js、React、TailwindCSS 和 Framer Motion，提供丰富的模板和组件，帮助开发者迅速提升网站外观和功能。

https://ui.aceternity.com/

#工具推荐 #前端 #css #tools #tailwind #nextjs #学习项目 #sanity

看了一下技术栈没细看，感觉应该是适合初学者学习的 Next + tailwind 的项目，先 mark 一下。

独立开发者导航站 开源啦！
free-directory-boilerplate.vercel.app

Github：The Open Source Directory Website Boilerplate

https://github.com/javayhu/free-directory-boilerplate

https://github.com/javayhu/free-directory-sanity

该项目代码仓库有2个，你可以简单理解为是前后端分离的实现形式。
稍微提一嘴，后来我在写Mkdirs模板时就重构改为了单仓库形式。

https://fixupx.com/javay_hu/status/1872794607278538862

from Twitter@javay_hu

GitHub

GitHub - javayhu/free-directory-boilerplate: The Open Source Directory Boilerplate

The Open Source Directory Boilerplate. Contribute to javayhu/free-directory-boilerplate development by creating an account on GitHub.

#优质博文 #前端 #react #nextjs
Managing search parameters in Next.js with nuqs

AI 摘要：本文介绍了如何在 Next.js 应用中使用 nuqs 库来管理搜索参数（即查询字符串）。nuqs 是一个类型安全的搜索参数状态管理库，允许开发者通过搜索参数将状态存储在 URL 中。这对于创建动态、可分享和可收藏的页面至关重要，有助于提升用户体验和 SEO 表现。文章详细讲解了 nuqs 的安装、基本用法，以及如何在 Next.js 的服务器组件中使用它。此外，还讨论了与 Zod 的集成，以及在不同场景下选择 nuqs 或其他状态管理解决方案的建议。

via Jude Miracle

LogRocket Blog

Managing search parameters in Next.js with nuqs - LogRocket Blog

Optimize search parameter handling in React and Next.js with nuqs for SEO-friendly, shareable URLs and a better user experience.

#优质博文 #前端 #nextjs
NextJS 到底好在哪？NextJS + Supabase，一起来感受一下

AI 摘要：这篇文章通过一个案例详细展示了 Next.js 在全栈开发中的应用，着重分析了其核心特性和优势。通过与 Supabase 的结合，作者实现了点赞按钮的功能，比较了纯客户端和 Next.js 的 React Server Component (RSC) 方案。文章指出，RSC 能有效减少初始加载时间，提高用户体验，并通过服务端渲染减少客户端包体积。

文章进一步阐述了 Next.js 在开发中的优势：它消除了许多副作用带来的代码复杂性，简化了逻辑，提升了代码可读性与执行效率。同时，Next.js 独特的服务端与客户端逻辑分离提高了页面首屏加载速度。尽管 Next.js 存在一定的学习门槛，尤其在解耦服务端和客户端逻辑上需要一定的开发经验，但作者认为它在开发体验与用户体验上的平衡，使其具备引领前端开发的潜力。

via 微信公众号 这波能反杀

Weixin Official Accounts Platform

NextJS 到底好在哪？NextJS + Supabase，一起来感受一下

#工具推荐 #前端 #css #tools #color #tailwind #nextjs
https://www.v2ex.com/t/1085585
爱色卡（ AISEKA ） - 一个简单的色彩管理工具 （网址：aiseka.com ）

这个页面挺简洁的，技术栈是 nextjs + trpc + tailwind + react-query 跟我高度重合，mark 一下看看

想学的应该也可以看看，这种小网站应该算挺适合学习的入门实例？ https://github.com/meetqy/aiseka

#优质博文 #前端 #nextjs #opengraph #svg

在 Vercel 部署一个 OpenGraph Image 服务

Satori ：将 HTML 和 CSS 转换为 SVG 的库。

AI 摘要：这篇文章介绍了如何使用 `satori` 在 Vercel 上部署一个 OpenGraph Image 服务。文章首先描述了使用 Fastify 作为基座服务，并通过 `satori` 库生成 OpenGraph 图片。具体步骤包括初始化项目、引入必要的依赖库（如 `satori` 和 `@resvg`）、封装字体和图片生成方法，以及在 Vercel 环境下的部署。还强调了如何处理远程图片、引入自定义字体以及确保图片链接的可访问性。最终通过 Fastify 路由生成和缓存 OpenGraph 图片。

via https://innei.in/

innei.in

在 Vercel 部署一个 OpenGraph Image 服务

这篇文章是实现 Follow 的 Separate main application and external pages and SEO support 这个 PR 的一部分技术细节，由于其中的技术细节较多，所以这将是系列文中的一篇。 用过 Next.js 的同学应该都知道，Next.js 自带

#优质博文 #前端 #nextjs #image
在搜索引擎奇怪的内容农场发现的好文章，觉得肯定有原文于是找了下看看发现是微信公众号的文章。

教你如何玩转Next Image

AI 摘要：本文详细介绍了如何使用 Next.js 中的 Next Image 组件来进行图像优化。Next Image 支持现代格式（如 webp、avif ），并根据不同屏幕尺寸生成优化版本，以提高性能。其核心架构由 React 组件、Image API 和 Image 优化器（Sharp 或 Squoosh）组成，优化图像加载、质量和缓存策略。

本文还澄清了一些常见误解，例如 Next Image 不进行图像裁剪，只调整尺寸；显示的图像宽度不等于加载的图像宽度等。同时提到，开发者可以直接使用 Image API 以便在特定场景中获得更灵活的图像控制。为了优化加载性能，文章还建议合理配置 deviceSizes 和 imageSizes，并通过 sizes 属性优化图像选择，从而提高 Lighthouse 的得分和整体性能。

via 微信公众号 前端新世界

Weixin Official Accounts Platform

教你如何玩转Next Image

如果你用过Next.js，那么很可能邂逅过Next Image组件。

#优质博文 #前端 #动画 #工程化 #nextjs #css #react
How I Built My Blog

AI 摘要：Josh W. Comeau 在博客文章中介绍了他如何使用 Next.js（App Router）、React 和 MDX 搭建他的新版博客。技术栈还包括 Linaria 处理 CSS、Shiki 实现代码高亮，以及 MongoDB 支持互动功能（如点赞按钮）。他分享了在迁移过程中遇到的挑战，特别是与 MDX v3 和样式相关的问题。同时，博客使用了 React Spring 和 Framer Motion 实现复杂的动画和自定义组件，提升了交互体验。

via Josh Comeau

Joshwcomeau

How I Built My Blog • Josh W. Comeau

I recently launched a brand new version of this blog, and in this post, I share how it’s built! We’ll examine the tech stack and see how all of the pieces fit together, as well as dig into some of the details to see how they work.

#优质博文 #阮一峰的科技周刊 #前端 #资源推荐 #tools

科技爱好者周刊（第 302 期）：创业虽然好，不敢推荐了

1. <span>元素可以干什么（英文） 📓 <span>是一个表示行内文本的 HTML 网页元素，本文收集了许多案例，你可以用它做各种各样的事情。 #css
2. 如何在 JavaScript 中快速读取文件（英文） 📓 作者列出了 JavaScript 读取文件的5种方法，并且比较了它们的性能差异。 #javascript
3. Sink 🧰 一个基于 Cloudflare 的短链接应用，带有访问统计。（@ccbikai 投稿） #短链接 #自部署
4. PicImpact 🧰 一个 Web 相册程序，基于 Next.js。（@besscroft 投稿） #nextjs
5. Gallery-Portfolio 🧰 一个开源的"瀑布流"照片展示程序，后端可以放在免费的 Cloudflare R2（或其他兼容 AWS S3 的存储），参见 Demo。（@linyuxuanlin 投稿）
6. widget-qrcode 🧰 一个网页二维码的 web component 组件，支持自定义二维码风格模板、前景、背景、logo等。（@mumuy 投稿）
7. cobalt 🧰 一个开源的视频下载网址，支持多个视频网站，包括 B 站、Youtube、instagram 和 Twitter。

【这期的 gallery 相关工具推荐还挺多的】

GitHub

【开源自荐】Sink - 基于 Cloudflare 带访问统计的短链系统 · Issue #4529 · ruanyf/weekly

特性 链接缩短 访问统计 Serverless 部署 自定义 Slug 🪄 AI 生成 Slug 链接有效期 演示 Sink.Cool Site Token: SinkCool 全站分析 链接管理 单个链接分析 开源 https://github.com/ccbikai/sink

#优质博文 #前端 #react #ssr #nextjs
Shiki 性能优化 - 按需加载语法解析

AI 摘要：这篇文章介绍了如何为 Shiki 代码高亮库实现按需加载语言解析器的功能，以减少加载时间和流量消耗。通过改造现有的组件代码，使其能够在需要时才加载特定的语言模块。此外，文章也探讨了在 Next.js 应用中如何处理 Shiki 组件的服务端渲染问题，以及如何避免页面在首次加载时的布局移动（CLS）。这些优化措施有助于提升页面性能和用户体验。

via innei

innei.in

Shiki 性能优化 - 按需加载语法解析

Shiki 是一个非常优秀的代码高亮库。 https://github.com/shikijs/shiki 众所周知，代码高亮库包含了众多的语言解析器，导致加载比较缓慢，并且加载太多无用的解析器造成大量流量浪费。 这一节我们来实现按需加载 Shiki 需要的语言解析器。 动态加载 开始之前

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 295 期）：巧妙的灯泡钟

1. 微信早期的消息收发架构（中文） 📓 本文是一篇简化的介绍，讲解微信刚刚建立时，怎么做到消息的收发。（@ryantang1991 投稿）
2. OPFS API 及工具介绍（中文） 📓 网页脚本如果要跟本地文件系统交互，是很不方便的。目前，浏览器有一个 OPFS API，为网页提供一个虚拟的本地文件系统，本文介绍它的用法。（@hughfenghen 投稿）
3. 如何用 CSP 防止 XSS 注入攻击（英文） 📓 本文讲解怎么使用浏览器的 CSP（内容安全策略），防止网页被 XSS （跨站点脚本注入攻击）。 #web安全
4. Superjson 🧰 安全地将JavaScript表达式序列化为JSON的超集，其中包括Dates、BigInts等。【完美修复了Next.js在 getServerSideProps 和 getInitialProps 中的序列化限制】 #nextjs
5. text2video 🧰 一个开源的文本转图文视频的软件。（@bravekingzhang 投稿） #AI
6. simple-mind-map（思绪思维导图） 🧰 一个开源的 Web 思维导图，试用 Demo。（@wanglin2 投稿）
7. Mist 🧰 这个工具可以在图片上面添加水印底纹，使得该图片无法再被 AI 模型作为训练材料。
8. 中国古代历史人物可视化 🧰 输入一个古代人物名（共收录52000+人物），就可以显示该人物的社会关系、亲戚关系和生平足迹图，上图是李白的生平足迹图，参见介绍文章。（@inspurer 投稿） #趣站
9. CSS 框架排名 🧰 这个网页按照 GitHub 的星星数量，为 CSS 框架排名。 #css
10. Lamucal 🧰 这个网站可以为任何歌曲生成和弦、节拍、歌词、旋律和标签，使用了 Hybrid-Net 模型。（@liufeigit 投稿)
11. Z2H 字贴 🧰 一个在线的字帖生成网站，支持中文和英文。（@liamwang 投稿）

#优质博文 #前端 #nextjs #react
Server Action & Streamable UI

AI 摘要：这篇文章探讨了在 Next.js 中使用 Server Action 和 Streamable UI 来实现流式UI更新的方法。通过 Server Action，可以在服务器端执行异步操作并流式传输结果到客户端，实现页面数据的实时更新。文章通过一个打字机效果的示例，展示了如何利用 React Suspense 和异步组件创建流式UI，实现动态内容的逐步显示。这种方法虽然可以带来流畅的用户体验，但需要考虑到服务器保持长连接的资源消耗和带宽压力。

via innei

nextjs-book.innei.in

Server Action & Streamable UI | 聊点不一样的 Next.js

#前端 #优质博文 #react #nextjs
NextJS/React 加载远程组件

AI 摘要：这篇文章介绍了如何在普通的Markdown中渲染远程组件。作者构想了一个名为RemoteComponentRender的逻辑，通过加载远程组件并将其嵌入到React中进行渲染。为了简化Markdown的语法，作者使用了CodeBlock进行扩展，并提供了一个新的DSL语法来定义远程组件的导入和渲染。文章还介绍了如何将React和ReactDOM附加到全局对象上，并提供了一个基础版的组件实现。最后，文章讨论了远程组件的构建和打包，并提供了一个使用Rollup进行构建的示例配置。

via innei

cn.innei.ren

NextJS/React 加载远程组件

前言 写过文档的大佬们都知道 MDX 这个东西，对原本的 Markdown 进行了扩展，可以在 Markdown 中直接使用框架组件（React，Vue 等等）。 现在也有很多静态生成的博客使用 MDX 去编写博文，在博文中内嵌了 React 组件，在一些需要交互式的场景中，在传统的 Markd