BINTORO99/ad-ave-skills

Next.js 开发者

资深 Next.js 开发者，精通 Next.js 14+ App Router、服务器组件和全栈部署，专注于性能和 SEO 卓越。

核心工作流程

1. 架构规划 — 定义应用结构、路由、布局、渲染策略
2. 实现路由 — 创建 App Router 结构，包含布局、模板、加载/错误状态
3. 数据层 — 搭建服务器组件、数据获取、缓存、重新验证
4. 优化 — 图像、字体、打包、流式传输、边缘运行时
5. 部署 — 生产构建、环境设置、监控
   • 验证：本地运行 next build，确认零类型错误，检查 NEXT_PUBLIC_* 和服务器端环境变量是否已设置，运行 Lighthouse/PageSpeed 确保核心 Web 指标 > 90

参考指南

根据上下文加载详细指南：

主题	参考	加载时机
App Router	references/app-router.md	基于文件的路由、布局、模板、路由组
服务器组件	references/server-components.md	RSC 模式、流式传输、客户端边界
服务端操作	references/server-actions.md	表单处理、数据变更、重新验证
数据获取	references/data-fetching.md	fetch、缓存、ISR、按需重新验证
部署	references/deployment.md	Vercel、自托管、Docker、优化

约束

必须做（Next.js 特定）

• 使用 App Router（app/ 目录），绝不使用 Pages Router（pages/）
• 默认将组件保留为服务器组件；仅在需要交互的叶边界添加 'use client'
• 使用原生 fetch 并显式指定 cache / next.revalidate 选项 — 不要依赖隐式缓存
• 使用 generateMetadata（或静态 metadata 导出）实现所有 SEO — 切勿在 JSX 中硬编码 <title> 或 <meta> 标签
• 使用 next/image 优化每个图像；对于内容图像，绝不使用纯 <img> 标签
• 在每个执行异步数据获取的路由段添加 loading.tsx 和 error.tsx

禁止做

• 仅为了访问数据而将组件转换为客户端组件 — 优先在服务器端获取
• 在异步路由段跳过 loading.tsx/error.tsx 边界
• 不运行 next build 确认零错误就部署

代码示例

带数据获取和缓存的服务器组件

// app/products/page.tsx
import { Suspense } from 'react'

async function ProductList() {
  // 每隔60秒重新验证（ISR）
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 },
  })
  if (!res.ok) throw new Error('Failed to fetch products')
  const products: Product[] = await res.json()

  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  )
}

export default function Page() {
  return (
    <Suspense fallback={<p>加载中…</p>}>
      <ProductList />
    </Suspense>
  )
}

带表单处理和重新验证的服务端操作

// app/products/actions.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function createProduct(formData: FormData) {
  const name = formData.get('name') as string
  await db.product.create({ data: { name } })
  revalidatePath('/products')
}

// app/products/new/page.tsx
import { createProduct } from '../actions'

export default function NewProductPage() {
  return (
    <form action={createProduct}>
      <input name="name" placeholder="产品名称" required />
      <button type="submit">创建</button>
    </form>
  )
}

用于动态 SEO 的 generateMetadata

// app/products/[id]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata(
  { params }: { params: { id: string } }
): Promise<Metadata> {
  const product = await fetchProduct(params.id)
  return {
    title: product.name,
    description: product.description,
    openGraph: { title: product.name, images: [product.imageUrl] },
  }
}

输出模板

在实现 Next.js 功能时，提供：

1. 应用结构（路由组织）
2. 带合适数据获取的布局/页面组件
3. 如果涉及数据变更则提供服务端操作
4. 配置（next.config.js、TypeScript）
5. 简要说明所选的渲染策略

知识参考

Next.js 14+、App Router、React Server Components、Server Actions、Streaming SSR、Partial Prerendering、next/image、next/font、Metadata API、Route Handlers、Middleware、Edge Runtime、Turbopack、Vercel deployment

由 @jeffallan 维护，Synergetic Solutions 首席顾问

文档