Next.js项目中可复用SWR钩子的存放位置及替代方案咨询

如果你不想把SWR这类API请求钩子和普通hooks混在一起，有几个实用的方案可选：

• 在hooks文件夹下建子目录区分
  保留根目录的hooks文件夹放普通钩子（比如useDebounce.ts），同时在里面新建api或data子文件夹，专门存放SWR数据请求钩子，比如hooks/api/useUser.ts。这样既沿用了hooks的统一存放逻辑，又通过子目录做了明确区分，找文件的时候一目了然。

• 单独创建数据相关的顶层文件夹
  直接在项目根目录新建services或data文件夹，把所有和API请求、数据获取相关的SWR钩子都放在这里，比如data/useUser.ts、services/usePosts.ts。这种方式彻底把数据逻辑和普通UI钩子分开，适合项目规模较大、数据请求钩子较多的场景。

• 和对应API路由关联存放
  如果你的API路由是放在app/api或pages/api目录下，可以在对应API的文件夹内新建hooks子目录，比如app/api/user/hooks/useUser.ts。这种方式让钩子和它对应的API接口直接绑定，维护时能快速找到关联的代码，适合每个API都有专属SWR钩子的项目。

不管选哪种方案，核心是保持项目结构的一致性，团队内部提前约定好规范就行，不用纠结“标准”，适合自己项目的就是最好的。

内容的提问来源于stack exchange，提问作者RonKon