Next.js + FastAPI Full-Stack Expert
专家指导使用Next.js前端和FastAPI后端构建全栈应用程序。在将React/Next.js与Python FastAPI集成、构建API路由或使用Python后端实现SSR/SSG时,请参考此指南。
把 Skill 的源码、资源快照、README、包体和安装信号放进一个可搜索、可筛选的公开目录。
专家指导使用Next.js前端和FastAPI后端构建全栈应用程序。在将React/Next.js与Python FastAPI集成、构建API路由或使用Python后端实现SSR/SSG时,请参考此指南。
提供结构化的Next.js知识:App Router模式、RSC使用、渲染/数据策略以及现代Next.js最佳实践。
基于运动的动画系统,适用于Next.js,并采用性能优化模式
在Next.js 15 (App Router)中构建新模块的完整工作流程,后端使用Supabase。当创建CRUD功能、数据管理模块或遵循5层架构(类型→服务→钩子→组件→页面)的任何新功能模块时,请使用此流程。涵盖了TypeScript类型、Supabase服务、React钩子、Shadcn/UI组件以及基于权限的路由。
使用Turborepo和pnpm工作区的Next.js单体仓库模式。在处理多包Next.js项目、跨包管理依赖项、优化构建流水线或配置Turborepo时应用此技能。
使用pr-creation-workflow、jira-git-integration和linting-workflow框架完成Next.js的PR工作流程
有观点的Next.js 14+项目结构和配置,用于搭建新项目。主动激活用于:(1) 设置新的Next.js项目,(2) 配置带有严格模式的tsconfig.json,(3) 建立文件夹结构模式。触发词:“新项目”,“脚手架”,“项目结构”
在构建Next.js应用路由器页面并决定使用服务器组件还是客户端组件时。
当用户想要为一个使用Vitest/Jest、React Testing Library和Playwright的Next.js(App Router)+ TypeScript + Tailwind + shadcn/ui项目设置、改进或运行前端测试(单元测试、组件测试和端到端测试)时,请使用此技能。
创建一个新的Next.js项目,采用FSD(Feature-Sliced Design)架构,TypeScript,Tailwind CSS,ESLint(扁平配置),Prettier和Husky。当用户要求创建/搭建/初始化一个具有FSD架构的Next.js项目时使用,或者当他们想要一个带有现代工具设置、适合生产的Next.js样板时。
适用于Next.js 14+的OpenTelemetry分布式追踪
创建一个运行在Bun上的Next.js应用,配置开发环境,并设置在推送到代码仓库时自动部署到Vercel。
Next.js/TypeScript项目用Gherkin场景自动生成技能。 用于以下情况:(1) 从用户故事创建BDD场景时 (2) 从PRD/规格书生成测试场景时 (3) 定义API端点的行为时 (4) 场景化页面跳转·UI交互时
当用户要求'构建Next.js应用'、'创建仪表板'、'设计登录页面'、'构建SaaS前端'、'创建React组件'、'为我的应用添加样式'、'设计系统'、'UI组件',或需要独特的前端设计时,应使用此技能。涵盖App Router、React Server Components、类型安全API、服务器操作以及现代样式设计。避免使用通用的'AI烂摊子'美学(如Inter字体、紫色渐变、可预测布局)…
在Next.js中使用URL参数获取数据的专注模式。涵盖创建动态路由([id],[slug])以及在服务器组件中访问路由参数以从API获取数据。当根据URL参数构建显示单个项目(如产品页面、博客文章、用户资料)的页面时使用。与nextjs-dynamic-routes-params互补,提供了一种简化且常见的模式。
在Next.js应用程序中实施SEO最佳实践。包括元数据、Open Graph标签、规范URL、站点地图生成、模式标记以及针对搜索排名的性能优化。
在Next.js 14应用路由器中实现支持SSR安全模式的localStorage持久化。当需要在localStorage中存储数据、处理水合错误、实现状态持久化或创建类型安全的存储工具时使用。
使用Neon Postgres对Next.js应用程序进行全面的性能分析和优化。识别前端、后端和数据库层中的瓶颈。
完整的Next.js集成模式,用于Clerk认证与App Router和Pages Router的结合。在Next.js中设置Clerk、配置认证中间件、实现受保护的路由、设置带有认证功能的服务端/客户端组件时使用;或者当用户提到Clerk Next.js设置、App Router认证、Pages Router认证或Next.js认证集成时使用。
本文档比较了Next.js应用程序的各种AWS部署选项,分析了成本、优势、局限性,并根据不同的使用场景提供了建议。
创建带有加载和错误状态的Next.js 16应用路由器页面。在被要求创建新的路由、页面或视图时使用。
每当用户希望在一个Next.js(App Router)+ TypeScript + Tailwind + shadcn/ui项目中分析、改进或实施性能最佳实践时,包括包大小、数据获取、缓存、流式传输、图片、字体以及客户端/服务器边界等方面,请使用此技能。
当用户想要在TypeScript + Tailwind + shadcn/ui项目中设计、重构或扩展Next.js App Router的路由、布局和导航模式(包括路由组、动态路由以及服务端/客户端组件边界)时,使用此技能。
根据设计规范生成可用于生产的Next.js/React组件。当您拥有一份设计规范文档,并需要创建带有Tailwind CSS样式、Vitest测试和Storybook文档的React/TypeScript组件时,可以使用此技能。