Next.js 技能提升

使用 Next.js 应用路由（Next.js 13+）的指南。当从页面路由迁移到应用路由、创建布局、实现路由、处理元数据或构建 Next.js 13+ 应用程序时使用。适用于应用路由迁移、布局创建、路由模式或 Next.js 13+ 开发。

Vercel AI SDK v5 实现模式的指南，包括 generateText、streamText、useChat 钩子、工具调用、嵌入和 MCP 集成。当实现 AI 聊天界面、流式响应、工具/函数调用、文本嵌入或处理 convertToModelMessages 和 toUIMessages 时使用。

在 Next.js 中使用 useSearchParams 钩子与 Suspense 边界的模式。涵盖在访问客户端组件中的 URL 查询参数时所需的 'use client' 指令和 Suspense 包装器的组合。当构建搜索界面、过滤器、分页或任何需要重新加载的功能时使用。

在 Next.js 应用路由中选择服务器组件和客户端组件的指南。对于 useSearchParams（需要 Suspense + 'use client'）、导航（链接、重定向、useRouter）、cookies/headers 访问和 'use client' 指令至关重要。当提示提到 useSearchParams、Suspense 时激活。

(空)

Next.js 应用路由动态路由和路径参数的指南。当构建依赖于 URL 段（ID、别名、嵌套路径）的页面、访问 `params` 属性或通过标识符获取资源时使用。帮助避免过度嵌套，默认使用最简单的路由结构（例如，`app/[id]`）。

用于在 Next.js 服务器组件中实现导航的指南，使用 Link 组件和 redirect() 函数。涵盖服务器和客户端导航方法之间的区别。在服务器组件中添加链接、重定向或导航逻辑时使用，无需将其转换为客户端组件。

高级 Next.js 应用路由模式的指南，包括路由处理程序、并行路由、拦截路由、服务器操作、错误边界、草稿模式和使用 Suspense 的流式传输。对于服务器操作（action.ts、actions.ts 文件，'use server' 指令）至关重要。

专注于使用 URL 参数在 Next.js 中获取数据的模式。涵盖创建动态路由（[id]、[slug]）以及在服务器组件中访问路由参数以从 API 获取数据。在构建基于 URL 显示单个项目（如产品页面、博客文章、用户资料）的页面时使用。

用于客户端组件调用服务器操作以设置 Cookie 的模式。涵盖一个包含用户交互（如点击、表单提交）的客户端组件与一个服务器操作的两个文件模式，以修改 Cookie。在构建身份验证、偏好设置或会话管理等功能时使用。