SuperAPI AI 工具集

nextjs-fullstack-patterns

编程与开发

查看项目

更新于 10-15 09:41

技能介绍

用途

nextjs-fullstack-patterns 是一份现代 Next.js 应用的生产级实践模式集合,用于指导开发者按 App Router 的约定搭建全栈应用,覆盖从路由、组件划分到数据获取、认证、数据库和部署的完整链路。

主要能力

App Router 基础

介绍基于文件的路由组织方式,示例目录包含 layout.tsx(根布局,必需)、page.tsx(首页)、loading.tsx(加载 UI)、error.tsx(错误边界)、not-found.tsx(404 页面)、globals.css(全局样式)、(marketing) 路由组(不影响 URL)、dashboard 嵌套布局与子路由、api/route.ts 接口路由以及 [slug]/page.tsx 动态路由。文件约定表列出各文件的用途:page.tsx 提供路由的唯一 UI,layout.tsx 提供保留状态的共享 UI,template.tsx 类似布局但会重新挂载,loading.tsx 为 Suspense 加载 UI,error.tsx 为错误边界,not-found.tsx 为 404 UI,route.ts 为 API 端点。

服务端与客户端组件

默认使用服务端组件,可直接访问数据库并在组件内使用 async/await;客户端组件需添加 'use client' 指令,用于事件处理、useState/useEffect、浏览器 API 与交互。资料给出各自适用场景对照表(数据获取、访问后端资源、敏感数据、大依赖、SEO 内容归服务端;事件处理、状态钩子、浏览器 API、交互、实时更新归客户端),并演示服务端组件包裹客户端岛(Client island)的组合模式。

数据获取

演示在服务端组件中直接 fetch,并说明缓存选项:cache: 'force-cache'(默认缓存)、cache: 'no-store'(不缓存,动态)、next: { revalidate: 60 }(ISR,每 60 秒重新验证)。另介绍使用 Promise.all 的并行数据获取,以及用 Suspense 配合 fallback 实现流式渲染。

Server Actions 与表单

展示 'use server' 动作函数处理 FormData、写入数据库后调用 revalidatePath 与 redirect;表单通过 action 属性直接绑定动作。配合 useFormStatus 实现提交中状态按钮禁用,配合 useActionState 管理动作状态、错误与 pending。

API 路由

展示 app/api/posts/route.ts 中的 GET/POST 处理函数(使用 NextRequest、NextResponse),以及动态路由处理器 app/api/posts/[id]/route.ts 通过 params 获取 id、查询并在未找到时返回 404 JSON。

认证模式

中间件认证:middleware.ts 读取 cookie token,未登录访问 /dashboard 时重定向到 /login,并通过 config.matcher 限定匹配路径。Auth Context 模式:使用 cookies() 与 React cache 包装 getUser,在页面中获取用户并在无用户时重定向。

数据库模式

Prisma 客户端单例写法(开发环境挂载到 globalThis 避免重复实例),以及基于 React cache 的数据访问层封装示例(getPosts、getPost,含排序与关联加载)。

错误处理与 SEO

客户端错误边界组件接收 error 与 reset,提供重试按钮;使用 notFound() 处理资源不存在。元数据支持静态导出 metadata 对象,以及通过 generateMetadata 基于参数动态生成 title 与 description。

项目结构与参考

推荐目录结构:app/、components/ui、components/features、lib/(db.ts、auth.ts、utils.ts)、actions/、types/、hooks/、public/。参考资料包括 references/deployment-checklist.md(生产部署)、references/performance-patterns.md(优化技巧)、references/testing-patterns.md(Next.js 应用测试)。

使用方式

该技能以模式与代码示例形式提供,开发者可按需参考对应章节,将示例代码应用到自己的 Next.js 项目中。资料未提供具体的安装命令或调用步骤。

适用场景

适用于构建生产级 Next.js 全栈应用:需要 App Router 路由组织、服务端/客户端组件划分、缓存与流式数据获取、表单动作、API 路由、认证与数据库接入、SEO 元数据及错误处理的开发场景。

限制

资料为模式参考,未说明支持的 Next.js 具体版本、依赖安装方式、收费或授权信息;示例中涉及的 db、validateAndFetchUser 等均为占位实现,需使用者自行补全。