#优质博文 #react #前端 #next #新动态 #AI
React Status #425

AI 摘要：本期 React Status 虽因复活节缩短篇幅：5 个团队的高级 React 实战案例、Dan Abramov 对服务端-客户端数据传递的思考、AI 聊天界面开发指南等。

1. 专题文章
• 《Advanced React in the Wild》
• Addy Osmani 和 Hassan Djirdeh 汇总 5 个工程团队的 React 极限优化案例，涵盖性能、Core Web Vitals 和缓存等实战成果。
• 《JSX Over the Wire》
• Dan Abramov 探讨服务端到客户端数据传递的演进，对比 REST 与 BFF（Backend For Frontend）模式，提出基于 React 组件树的 ViewModel 设计思路。
• 《React.js AI Chat with OpenAI API》
• Robin Wieruch 为 OpenAI 的模型（例如新的仅限 API 的 GPT 4.1 模型）创建自己的流式聊天 UI，提供了一些入门指南。

2. 工具与库更新
• Next.js 15.3（Turbopack 生产构建 alpha 支持）
• react-photo-sphere-viewer（360° 照片查看组件） 一个演示
• Agent Hooks（将 React Hooks 变成 LLM 工具）

3. 社区动态
• Grep 搜索引擎从 CRA 迁移至 Next.js —— Vercel 团队分享从 Create React App 迁移的技术细节。
• TC39 撤回 records/tuples 提案。

author Peter Cooper

overreacted.io

JSX Over The Wire — overreacted

Turning your API inside-out.

#优质博文 #react #前端 #next #auth
Authorization in Next.js

If you take one thing away from this tutorial, it should be that authorization should be as close as possible to your sensitive data. This means that you should have authorization checks in your API, Service, and Data Access Layers. This is the most important part of your application and should be implemented in a way that is secure and maintainable.

AI 摘要：本文深入探讨了在 Next.js 应用中实现授权的多层次策略，重点围绕 React Server Components 和 Server Actions 展开。作者强调授权应尽可能靠近数据源（如 API 层、服务层和数据访问层），并详细分析了路由、UI 和中间件中的授权实现方案及其权衡，同时指出中间件授权的性能隐患和局限性。

1. 数据访问授权
• 核心原则：授权应在 API 层作为读写操作的第一道防线，通过自定义查询函数和服务端动作（Server Actions）实现。
• 代码示例：
• getPosts 和 createPost 函数中通过 getAuth 校验用户会话，未授权时抛出错误或重定向。
• 使用 cache 优化会话验证性能，避免重复数据库查询。
• 分层架构：
• 服务层：处理业务逻辑和精细权限（如角色/所有者校验）。
• 数据访问层：作为最后防线，但建议权限逻辑集中在服务层。

2. 路由授权
• 页面组件检查：在 Server Component 的入口（如 PostsPage ）调用 getAuthOrRedirect 实现基础防护
• 布局组件优化：
• 通过 AuthLayout 集中管理路由组（如 (authenticated)）的授权，提升开发效率但存在安全风险（恶意用户可能绕过布局直接访问页面）
• 权衡策略：建议结合后端授权（策略1）或在页面组件重复校验（策略2）
• 多角色扩展：如 AdminLayout 实现管理员路由隔离

3. UI 授权
• 根据 useAuth 动态隐藏/禁用 UI 元素（如删除按钮），但强调这仅是辅助手段，核心安全仍需依赖后端校验

4. 中间件授权
• 性能问题：避免中间件中直接查询数据库，仅做轻量级检查（如会话 Cookie 存在性）
• 边缘运行时限制：不支持部分 Node.js 功能（如 Prisma ORM 需适配）
• 建议将关键授权逻辑保留在 API/服务层

author Robin Wieruch

www.robinwieruch.de

Authorization in Next.js

Learn about authorization in Next.js when using React Server Components, Server Actions, and Next's App Router ...

#前端 #插件推荐 #vscode #资源推荐 #tools

#工具推荐 如果你在使用 #Hexo、#Hugo、#Astro、#Next.js、#VitePress 等静态博客生成器，推荐你安装 VSCode 的 Front Matter 插件，为你的博客带来可视化的 CMS 管理。

写作模式下可以为 Markdown 编辑带来快捷键操作、效率提高很多，而且还可以帮你检查 SEO。

Source Twitter @ccbikai

https://frontmatter.codes/

好啊，好啊，这个好啊，我突然又不想抛弃 hexo 了

frontmatter.codes

Headless CMS right in your code editor | Front Matter

Headless CMS running in Visual Studio Code that helps managing your static sites. Supports Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and more.

cosine - 前端人の日常频道

试了试 vscode插件版TONGYI Lingma ，肯定后边会有限制 但是至少现在反应很快（）补全也不错，我感觉达到可替换codeium的水平了，中文支持挺好，先用一阵子试试看

#优质博文 #typescript #TRPC #全栈 #Next
Typescript 全栈最值得学习的技术栈 TRPC

AI摘要：本文介绍了Typescript全栈工程师值得学习的技术栈TRPC。TRPC是基于TypeScript的远程过程调用框架，旨在简化客户端与服务端之间的通信过程，并提供高效的类型安全。文章详细讲解了TRPC的特点，如自动类型安全、敏捷高效的开发者体验、不依赖特定框架、出色的自动补全功能和轻量级打包大小。同时，文章还探讨了TRPC的应用场景，指出它可以作为REST/GraphQL的替代品，尤其适用于前后端共享代码的TypeScript全栈项目。最后，文章通过实例演示了如何在Next.js项目中使用TRPC进行接口调用，包括定义服务端和客户端、使用useQuery和useMutation实现CRUD操作等。

Tencent

Typescript 全栈最值得学习的技术栈 TRPC-腾讯云开发者社区-腾讯云

如果你想成为一个 Typescript 全栈工程师，那么你可能需要关注一下 tRPC 框架。