AgentSkillsCN

Next.js Patterns

Next.js App Router、服务器动作和路由的最佳实践和模式。

SKILL.md
--- frontmatter
name: Next.js Patterns
description: Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.

Next.js Patterns

App Router

We use the Next.js 15 App Router located in app/.

Pages

  • •Location: app/[route]/page.tsx
  • •Component: Default export function.
  • •Client vs Server: Use "use client" directive at the top for components requiring state (useState, useEffect) or browser APIs. otherwise default to Server Components.

Layouts

  • •Location: app/layout.tsx (Root), app/[route]/layout.tsx (Nested).
  • •Purpose: Wrappers for pages, holding navigation, fonts, and metadata.

Navigation

  • •Use Link from next/link for internal navigation.
  • •Use useRouter from next/navigation for programmatic navigation (inside Client Components).
tsx
import Link from "next/link";
import { useRouter } from "next/navigation";

// Link
<Link href="/dashboard">Dashboard</Link>

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

Data Fetching

  • •Server Components: Fetch directly using await fetch() or DB calls.
  • •Client Components: Use useEffect or SWR/TanStack Query (if added later). Currently using standard fetch in useEffect.

Font Optimization

  • •We use next/font/google (e.g., Poppins) in app/layout.tsx.
  • •Variable fonts are passed to body className.

Metadata

  • •Define export const metadata: Metadata = { ... } in page.tsx or layout.tsx for SEO.