#优质博文 #前端 #AI #MCP #工程化 #nextjs
Next.js DevTools MCP: Your Development Server Just Got Smarter

AI 摘要：本文介绍了由 Vercel 提供的 next-devtools-mcp 套件，它利用 Next.js 16+ 的内置 MCP (Model Context Protocol) 端点 /_next/mcp，让 AI 编码助手（如 Claude、Cursor、Gemini 等）直接访问开发服务器的实时运行数据，包括构建错误、运行错误、TypeScript 类型检查、页面路由、Server Action 定义、日志与配置，从而显著提升调试与代码生成的智能化水平。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. Next.js 16+ 的内置 MCP 支持
• 自 Next.js 16 起，框架内置 /_next/mcp 端点，可暴露实时的项目状态信息。
• 该端点支持 next-devtools-mcp 包进行自动发现与对接，无需额外配置。

2. 安装与集成方式
• 针对不同 AI 编辑器（Claude Code、OpenAI Codex、Google Gemini）提供简易的 npx 安装命令。
• 其他编辑器可通过在项目根目录添加 .mcp.json 文件实现集成。
• 重启开发服务器后，next-devtools-mcp 自动发现并连接 MCP 端点。

3. 实时错误访问与改进
• 在传统环境中，开发者只能复制错误日志手动传给 AI；
• 使用 MCP 后，Claude 等助手能自动获取错误堆栈、类型及关联代码文件；
• AI 可即时分析、修复并验证结果，大幅减少人工往返操作。

4. 内置工具与功能说明
• get_page_metadata：返回路由、组件与页面结构信息。
• get_project_metadata：暴露项目配置与依赖。
• get_server_action_by_id：查询特定 Server Action 定义。
• get_logs：访问开发服务器日志。
• nextjs_docs：查询官方文档并提供版本相关代码参考。
• upgrade_nextjs_16：运行 Next.js 16 升级代码改造。
• enable_cache_components：配置缓存组件并执行预检。
• browser_eval：通过 Playwright 集成运行浏览器测试。

5. 版本兼容与限制
• Next.js 16+ 获得完整支持，包括实时错误、状态与日志访问。
• Next.js 15 及更低版本仅支持部分功能，如升级脚本与文档查询。

author Trevor Lasn

trevorlasn.com

Next.js DevTools MCP: Your Development Server Just Got Sm...

The Next.js DevTools MCP connects Claude and Cursor to your running dev server. I use it every day.

#Newsletter #前端 #周刊更新
周刊第 13 期！多图警告～
九寨归来不看水
FE Bits Vol.13 ｜TypeScript 首次成为 GitHub 最常用语言、VoidZero A 轮融资 1250 万美元

#优质博文 #CSS #前端 #响应式 #容器查询 #布局 #course
Solved By Modern CSS: Section Layout

AI 摘要：本文作者 Ahmad Shadeed 通过一个常见的「版块布局」案例，展示了如何应用现代 CSS 技术（包括 :has()、container query、style query、clamp()、cqw 单位与 display: contents 等）解决传统响应式设计中无法灵活检测状态、复杂媒体查询以及无流畅排版的问题。文章从基础布局入手，逐步迭代到智能响应的组件结构，并探讨了 Safari 实验性支持的 random() 随机函数，以展现 CSS 的动态潜力。

author Ahmad Shadeed

Ishadeed

Solved By Modern CSS: Section Layout

Building a typical section design with modern CSS.

#优质博文 #前端 #JavaScript #标准化 #框架设计 #API #CSS #react
好文，No Directive！
Directives and the Platform Boundary | TanStack Blog

AI 摘要：本文由 Tanner Linsley 撰写，分析了当代 JavaScript 框架中兴起的 “use server”、“use client” 等自定义指令 (Directive) 趋势。这些指令表面上像平台特性，却缺乏标准规范，模糊了语言与框架的界线，引发生态混乱、工具负担与可移植性风险。作者主张：指令应保持极少且标准化，用于语言层；而具参数化、策略性或扩展需求的功能应采用显式 API（具来源 import、可组合与可版本化），以维持平台边界清晰和生态长远健康。

author Tanner Linsley

Tanstack

Directives and the Platform Boundary | TanStack Blog

A Quiet Trend in the JavaScript Ecosystem For years, JavaScript has had exactly one meaningful directive, "use strict". It is standardized, enforced by runtimes, and behaves the same in every environm...

#优质博文 #CSS #前端 #layout #容器查询 #新特性
Super Simple Full-Bleed & Breakout Styles

AI 摘要：本文详细介绍了如何在单栏布局中，通过现代 CSS（如 Grid、Container Query Units、border-image、伪元素等）创建“满屏延展”与“宽度突破”元素。作者比较了旧式 100vw 方法与基于 Grid 的新式做法，指出前者因滚动条计算问题较为落后，并展示了一个简单、可扩展的 Grid 结构可同时实现全宽元素、局部扩展元素，以及带全宽背景的局部内容。文章还讨论了细节问题如 box-sizing、负 margin、嵌套结构、浮动兼容性以及是否必须使用 Grid 等，最终总结：最佳方案依情景而定，但现代 CSS 已能极大简化此类复杂布局。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 背景与问题定义
• 起因来自 Reddit 讨论：如何实现内容区中部分元素「全宽（full-bleed）」或「突破（breakout）」布局
• 对比老方法（100vw+偏移）与新方法（基于 Grid 中央列与左右对称列）
• 旧方法缺陷：100vw 不计滚动条，易引发水平滚动条
• 新方法更现代、更具弹性

2. 基础布局（The Base Grid）
• 在 body 上设定单列 Grid，最大宽度限制为 min(100%, 60em)
• justify-content: center 居中内容
• 保留 content-box 内边距空间以确保文字留白
• 所有子元素（如标题、段落、图片）自然落入此单列结构

3. 实现 Full-Bleed 元素
• 将 html 设为 container-type: inline-size ，元素用 width: 100cqw 获取可用宽度（不含滚动条）
• 使用 justify-self: center 居中
• 注意：html 上不能有 margin、padding，否则影响计算基准
• 若中间有容器层级，可通过 var(--full-w) 传递容器宽度
• 对非图片元素设置 box-sizing: border-box; padding: .5em；对图片则避免 padding
• 替代方案：用负 margin（calc(50% - 50cqw)）调整横向位置

4. 实现 Breakout 元素
• 比主栏宽，但未满屏，宽度公式为 min(100cqw, 100% + 2*4em)
• 或使用负 margin 实现，适合文本类内容
• 可通过自定义属性 --dx 调整突破值（正为扩展，负为收缩）
• 实例展示诸如 .break-elem--mini、.break-elem--maxi 等不同宽度的组合

5. Full-Bleed 背景处理
• 使用 border-image 扩展背景至全屏，如 border-image: var(--img) fill 0/ / 0 50cqw
• 支持颜色填充、渐变、图像背景等
• 针对带角度渐变或复杂背景，可通过计算 50cqw - .5*var(--grid-w) 精确控制延展范围
• 针对窄屏问题，利用 max() 考虑边距，保证背景元素真正全宽
• 实图背景的更优方案：使用伪元素 ::before 绝对定位配合 inset 实现，可支持 background-size: cover

6. 组合使用与分离视觉样式
• 可组合类 .break-elem + .full-bleed-back 实现“突破+全宽背景”效果
• 视觉样式与布局样式分离（例如 .box 仅用于颜色与边框）
• 避免边框或背景与 full-bleed 背景冲突的示例

7. 嵌套与兼容性
• figure 与 img 示例：图片全宽但说明文字保持正常列宽
• 确保 img.full-bleed-elem { display: block } 可正确工作
• 为了跨浏览器兼容 justify-self 可作用 block 元素，暂时让 figure 定义自身为 Grid

8. 浮动元素兼容性
• 若需在同一布局支持浮动（float）图片等，可增加内容包装容器
• 替代 justify-self 为 margin-left: calc(50% - 50cqw) 以保持结构适应性

9. 最后思考：Grid 是否必要
• 若布局需求简单，可用 body 的 padding/margin + limited main 替代 Grid
• 若需要间距控制、自动对齐等特性，Grid 仍具优势
• 结论：取决于上下文，现代 CSS 为设计师提供了灵活的选择空间

author Ana Tudor

#优质博文 #前端 #AI #新动态
Octoverse: A new developer joins GitHub every second as AI leads TypeScript to #1：2025 年 GitHub 的年度报告，比较有意思，摘了其中几个点看看：

1. GitHub 总用户达 1.8 亿，年增 3600 万，创下历史最高增长率。每秒新增 1 名开发者，印度贡献 500 万以上新用户，占全球新增 14%。

2. 生成式人工智能如今已成为开发中的标准配置。超过 110 万个公共代码库正在使用 LLM SDK，其中仅过去 12 个月就新增了 693,867 个项目（同比增长 178%）。开发者们还合并了创纪录的 5.187 亿个拉取请求（同比增长 29%），80% 的新开发者在第一周就开始使用 Copilot。

3. TypeScript 首次成为 GitHub 最常用语言，超越 Python 和 JavaScript。即便如此，Python 在人工智能和数据科学工作负载方面仍然占据主导地位，而 JavaScript/TypeScript 生态系统的整体活跃度仍然高于 Python 本身。

4. 总计 3.95 亿个公共存储库托管了 11.2 亿次贡献和 5.187 亿次合并拉取请求。

还有很多很多数据，感兴趣的建议阅读原文。

The GitHub Blog

Octoverse: A new developer joins GitHub every second as AI leads TypeScript to #1

In this year’s Octoverse, we uncover how AI, agents, and typed languages are driving the biggest shifts in software development in more than a decade.

#优质博文 #CSS #前端 #新特性
Detect fallback positions with anchored container queries from Chrome 143

AI 摘要：本文介绍了 Chrome 143 支持的 anchored container queries，它解决了 CSS Anchor Positioning Level 1 规范中无法识别元素使用了哪种回退定位的问题。通过 container-type: anchored 和 @container anchored(fallback: …) 的新语法，开发者可以在纯 CSS 中检测锚定元素（如 tooltip 或 popover）使用的最终定位方式，并进行样式调整，无需借助 JavaScript。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 现有问题与功能背景
• CSS Anchor Positioning API 允许元素与锚对象绑定，并定义多个回退 (fallback) 定位方案。
• Level 1 规范中，浏览器自动调整位置但 CSS 本身无法得知采用了哪种回退方式。
• 导致样式无法自适应最终的显示状态（如 tooltip 箭头方向错误），过去常需借助 JavaScript 解决。

2. 新特性：Anchored Container Queries
• 来自 CSS Anchor Position Level 2 规范的新机制，引入 container-type: anchored。
• 该属性让定位元素成为可感知锚定状态的容器 (container)。
• 使用 @container anchored(fallback: …) 查询语法，可检测当前被应用的回退选项。
• 示例展示 tooltip 根据最终定位方向自动切换箭头符号与位置，实现完全基于 CSS 的适配。

3. 应用方式与优势
• 无需监听器或手动逻辑，即可通过 CSS 自主响应布局变化。
• 对 Popover API 的支持更自然，可隐式创建锚点。
• 扩展应用包括：动态改变菜单背景色、移动边框位置、调整圆角、根据回退位置触发动画。
• 极大提升组件的鲁棒性、上下文感知能力和可维护性。

4. 相关资源与规范
• Chrome Platform Status
• Spec: CSS Anchor Positioning Level 2

author Una Kravets

Chrome for Developers

Detect fallback positions with anchored container queries from Chrome 143  |  Blog  |  Chrome for Developers

#优质博文 #前端 #CSS #新动态 #浏览器
New in Chrome 142

AI 摘要：Chrome 142 引入了多项前端开发相关的新特性，包括用于滚动标记的 :target-before 与 :target-after 伪类、支持比较运算符的 CSS 样式容器查询 (style container queries) 与 if() 函数的范围语法 (range syntax)，以及可用于交互触发的 interestfor 属性。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 样式与选择器增强
• 新增 :target-before 和 :target-after 伪类，用于精确匹配滚动标记上下文中的前后状态，实现滚动位置的更直观样式反馈。
• 该伪类配合 :target-current 共同用于管理同组滚动标记的状态，可根据文档平面树 (flat tree order) 定义前后关系。

2. CSS 条件查询能力升级
• 样式容器查询与 if() 函数新增范围语法 (range syntax)，支持通过比较运算符（如 >、<）判断数值型样式变量。
• 可在样式级别进行动态比较，包括自定义属性、文字值 (literal) 与替代函数值 (attr()、env() 等)，前提是比较双方需为同一数据类型，如 <length>、<number>、<percentage> 等。
• 提供灵活的 CSS 逻辑表达方式，例如根据容器宽度或自定义属性值动态切换样式。

3. 新的用户交互机制：Interest Invokers
• 新增 interestfor 属性，可在 <button> 与 <a> 元素上声明“兴趣触发”行为。
• 用户通过长按、悬停或特殊快捷键表现出“兴趣”时，浏览器将触发目标元素的 InterestEvent，默认动作可显示或隐藏弹出层 (popover)。
• 为交互式组件提供无需脚本的原生事件机制，提高用户体验与无障碍交互能力。

4. 延伸阅读与订阅
• 文章并列出扩展资源，包括 Chrome 142 Release Notes、DevTools 更新、ChromeStatus、Release calendar 等。
• 鼓励开发者通过 YouTube、X、LinkedIn 等渠道订阅 Chrome Developers 更新，以持续获取版本迭代信息。

author Rachel Andrew

Chrome for Developers

New in Chrome 142  |  Blog  |  Chrome for Developers

The :target-before and :target-after pseudo-classes, range syntax for container queries, and more.

#碎碎念
只要 200 块钱就能收买一只贫困文科大学生妹妹，当义父！