SuperAPI AI 工具集

next-js-patterns

前端与建站

查看项目

更新于 10-15 16:45

技能介绍

用途:这是一份针对项目内 Next.js 开发的最佳实践与模式说明,重点覆盖 App Router、Server Actions 与 Routing。

主要能力与约定:项目使用位于 app/ 的 Next.js 15 App Router。页面放在 app/[route]/page.tsx,采用默认导出的函数组件;需要 useState、useEffect 或浏览器 API 的组件在顶部加 "use client",否则默认使用 Server Components。布局位于 app/layout.tsx(根布局)和 app/[route]/layout.tsx(嵌套布局),用于包裹页面并承载导航、字体和 metadata。

使用方式:内部导航使用 next/link 的 Link,例如 <Link href="/dashboard">Dashboard</Link>;在客户端组件中做程序化跳转使用 next/navigation 的 useRouter,例如 router.push('/login')。数据获取方面,Server Components 可直接用 await fetch() 或数据库调用;Client Components 目前用 useEffect 内的标准 fetch,也可使用 useEffect 或 SWR/TanStack Query(若后续引入)。字体优化使用 app/layout.tsx 中的 next/font/google(如 Poppins),并将可变字体传给 body 的 className。SEO 元数据在 page.tsx 或 layout.tsx 中通过 export const metadata: Metadata = { ... } 定义。

适用场景与限制:适合在采用该 App Router 结构的 Next.js 项目内统一页面、布局、导航和数据获取写法。资料未提供 Server Actions 的具体用法示例、版本兼容要求、性能或安全注意事项,这些方面暂未提供。