SuperAPI AI 工具集

nextjs-patterns

前端与建站

查看项目

更新于 10-15 17:20

技能介绍

用途:提供 Next.js 15 App Router 的常用模式参考,覆盖前端页面、API 路由、服务端组件、客户端组件和中间件。

文件结构:app 下通过 layout.tsx、page.tsx、loading.tsx、error.tsx、not-found.tsx 组织根布局、页面、加载与错误边界;动态路由 [id]、分组 (auth) 和 api 目录按约定映射 URL。

主要能力:服务端组件默认可直接 async/await 获取数据,支持 searchParams;客户端组件以 'use client' 声明,可用 useState、useRouter 并调用 router.refresh() 刷新服务端组件。API Route Handlers 用 NextRequest/NextResponse 实现 GET/POST,配合 Zod 校验并处理 400/404。middleware.ts 结合 next-auth/jwt 的 getToken 做登录页与受保护路由的重定向,并用 config.matcher 限定范围。NextAuth.js 通过 PrismaAdapter 与 GoogleProvider 配置,导出 handlers 供 app/api/auth/[...nextauth]/route.ts 使用。Server Actions 以 'use server' 声明,可用 revalidatePath 与 redirect。加载与错误状态由 loading.tsx 和 error.tsx 实现。数据获取可设置 next.revalidate 做 ISR,或用 cache: 'no-store' 保持最新,也可用 Promise.all 并行请求。

限制:资料未提供安装命令、依赖版本约束、定价、平台效果或完整使用步骤。