Token导航 LogoToken导航TokenDH.com
中转站排行榜
研究检索操作浏览器github未标认证来源可访问许可证需确认审计异常

nextjs-16（Next.js 16 搜索）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

899

周安装

36

GitHub Stars

11

下载量

291
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：nextjs-16（Next.js 16 搜索）
来源仓库：https://github.com/fusengine/agents
仓库路径：skills/nextjs-16
安装命令：
npx skills add https://github.com/fusengine/agents --skill nextjs-16
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills
npx skills add https://github.com/fusengine/agents --skill nextjs-16

简介

用于辅助前端页面、组件和样式开发。nextjs-16 属于研究检索类 Skill，可作为该场景下的辅助能力补充。

  • 适合生成或审查 React、Next.js 相关代码。
  • 需要结合项目现有设计系统和路由方式使用。
  • 避免生成孤立片段，涉及页面改动应配合预览检查。
  • 建议先确认构建方式和视觉效果再实施改动。

SKILL.md

Next.js 16 Expert

Production-ready React framework with Server Components, streaming, and Turbopack.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

  1. fuse-ai-pilot:explore-codebase - Analyze existing routes, components, and patterns
  2. fuse-ai-pilot:research-expert - Verify latest Next.js 16 docs via Context7/Exa
  3. mcp__context7__query-docs - Check breaking changes v15→v16

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

  • Building new React applications with server-first architecture
  • Need Server Components for optimal performance and SEO
  • Implementing streaming and progressive rendering
  • Migrating from Next.js 14/15 to version 16
  • Using proxy.ts for route protection (replaces middleware)
  • Leveraging Turbopack for faster development builds

Why Next.js 16

FeatureBenefit
Turbopack default2-5x faster builds, 10x faster HMR, Webpack deprecated
Cache ComponentsExplicit caching with use cache directive
proxy.tsFull Node.js runtime, replaces Edge middleware
React CompilerAutomatic memoization, no manual useMemo/useCallback
React 19View Transitions, useEffectEvent, Activity component
App RouterNested layouts, parallel routes, intercepting routes

Breaking Changes from v15

Critical Migration Points

  1. proxy.ts replaces middleware.ts - Full Node.js runtime, not Edge
  2. Turbopack ONLY - Webpack completely deprecated and removed
  3. use cache directive - Replaces Partial Prerendering (PPR)
  4. React 19 required - New hooks and View Transitions API
  5. Async params/searchParams - Must await dynamic route params

SOLID Architecture

Module-Based Structure

Pages are thin entry points importing from feature modules:

  • app/page.tsx → imports from modules/public/home/
  • app/dashboard/page.tsx → imports from modules/auth/dashboard/
  • modules/cores/ → Shared services, utilities, configurations

File Conventions

  • page.tsx - Route UI component
  • layout.tsx - Shared UI wrapper
  • loading.tsx - Suspense loading state
  • error.tsx - Error boundary
  • not-found.tsx - 404 handling

Core Concepts

Server Components (Default)

All components are Server Components by default. Use 'use client' directive only when needed for interactivity, hooks, or browser APIs.

Caching Strategy

  • use cache - Mark async functions for caching
  • cacheTag() - Tag cached data for targeted revalidation
  • cacheLife() - Control cache duration (stale, revalidate, expire)
  • revalidateTag() - Invalidate cached data on-demand

Data Fetching

Server Components fetch data directly. Use fetch() with native caching or database queries. No need for getServerSideProps or getStaticProps.

Reference Guide

NeedReference
Initial setupinstallation.md, project-structure.md
Migration v15→v16upgrade.md, middleware-migration.md
Routingapp-router.md, routing-advanced.md
Cachingcaching.md, cache-components.md
Server Componentsserver-components.md, directives.md
React 19 featuresreact-19.md, react-compiler.md
Route protectionproxy.md, security.md
SEO/Metadatametadata.md, metadata-files.md
Forms/Actionsforms.md, data-fetching.md
Deploymentdeployment.md, environment.md

Best Practices

  1. Server Components first - Only add 'use client' when necessary
  2. Colocate data fetching - Fetch data where it's used
  3. Streaming with Suspense - Wrap slow components in Suspense
  4. proxy.ts over middleware - Full Node.js runtime for auth
  5. Cache explicitly - Use use cache for expensive operations
  6. Parallel routes - Load independent UI sections simultaneously

Performance

Build Optimization

  • Turbopack - Incremental compilation, instant HMR
  • React Compiler - Automatic memoization
  • Tree shaking - Unused code elimination
  • Code splitting - Automatic route-based splitting

Runtime Optimization

  • Streaming - Progressive HTML rendering
  • Partial hydration - Only hydrate interactive components
  • Image optimization - Automatic WebP/AVIF conversion
  • Font optimization - Zero layout shift with next/font

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

36.53%
按下载量换算106

Claude

29.29%
按下载量换算85

Cursor

19.38%
按下载量换算56

Gemini CLI

9.18%
按下载量换算27

安全审计

Gen Agent Trust Hub

未通过

Socket

通过

Snyk

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果，不能写成本站确认安全。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/fusengine/agents

SKILL.md 来源

github.com

/fusengine/agents/tree/main/skills/nextjs-16

skills-sh

skills.sh

/fusengine/agents/nextjs-16

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

nextjs-15（Next.js 15 搜索）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

下一个 Skill

nextjs-16-app-router（Next.js 16 应用 router）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。