Next.js (TanStack Query v5)
为Next.js应用集成TanStack Query v5，简化数据获取与状态管理。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Next.js (TanStack Query v5)。 它的用途是：为Next.js应用集成TanStack Query v5，简化数据获取与状态管理。 详细介绍见：https://321skill.com/skills/next-js-tanstack-query-v5/ 请根据该页面的说明完成安装。
使用示例
“帮我在Next.js项目中设置TanStack Query v5，并写一个获取用户列表的示例。”，它会生成包含Provider配置和`useQuery`钩子使用的代码片段。或者
对AI说：“我的数据缓存策略需要优化，如何配置staleTime和cacheTime？”，它会基于v5的API给出针对性的配置建议。
介绍
该Skill旨在解决在Next.js应用中高效、可靠地管理服务器状态和数据同步的难题。它通过集成最新的TanStack Query v5，提供了开箱即用的数据获取、缓存、同步和更新功能，显著减少开发者处理异步数据流的样板代码。
使用时，开发者只需在Next.js项目中配置并启用该Skill，即可在组件中直接使用强大的useQuery、useMutation等钩子来管理来自API、数据库或其他数据源的状态，并自动处理加载、错误和缓存失效等复杂逻辑。
它非常适合需要在Next.js框架下构建数据驱动型Web应用的前端或全栈开发者。无论是构建仪表盘、电商网站还是内容管理系统，只要涉及频繁的数据交互，该Skill都能大幅提升开发效率和用户体验。
建议在使用前熟悉TanStack Query v5的核心概念（如Query Key、Query Function），并注意其与Next.js的App Router或Pages Router的兼容性配置，以确保最佳性能。对于简单的静态站点或不涉及复杂状态管理的项目，可能无需引入。
核心特点
此Skill针对Next.js框架深度集成，预配置了服务端渲染(SSR)、静态生成(SSG)等Next.js特性下的最佳实践，避免了手动整合的复杂性。同时，它紧跟TanStack Query v5的最新API和性能优化，提供了比通用React集成方案更顺畅的Next.js开发体验。
注意事项
不适合不涉及数据获取或状态管理极其简单的静态页面项目。
常见问题
这个Skill支持Next.js的App Router吗？
支持，Skill已针对App Router进行了适配和预配置。
使用这个Skill需要先学习TanStack Query吗？
建议了解其核心概念，但Skill提供了基础配置，可快速上手。