Next.js开发模式Skill next-js-patterns

---

name: next-js-patterns description: 本项目Next.js应用路由器、服务器操作和路由的最佳实践与模式。

Next.js 模式

应用路由器

我们使用位于 app/ 目录下的 Next.js 15 应用路由器。

页面

• 位置: app/[路由]/page.tsx
• 组件: 默认导出的函数。
• 客户端 vs 服务器: 对于需要状态（useState, useEffect）或浏览器 API 的组件，在顶部使用 "use client" 指令。否则默认使用服务器组件。

布局

• 位置: app/layout.tsx（根布局），app/[路由]/layout.tsx（嵌套布局）。
• 目的: 页面的包装器，用于存放导航、字体和元数据。

导航

• 使用 next/link 中的 Link 进行内部导航。
• 使用 next/navigation 中的 useRouter 进行程序化导航（在客户端组件内部）。

import Link from "next/link";
import { useRouter } from "next/navigation";

// Link
<Link href="/dashboard">仪表板</Link>

// Router
const router = useRouter();
router.push('/login');

数据获取

• 服务器组件: 直接使用 await fetch() 或数据库调用进行获取。
• 客户端组件: 使用 useEffect 或 SWR/TanStack Query（如果后续添加）。目前使用 useEffect 中的标准 fetch。

字体优化

• 我们在 app/layout.tsx 中使用 next/font/google（例如 Poppins）。
• 可变字体传递给 body 的 className。

元数据

• 在 page.tsx 或 layout.tsx 中定义 export const metadata: Metadata = { ... } 用于 SEO。