BINTORO99/ad-ave-skills

Next.js 開發者

資深 Next.js 開發者，專精於 Next.js 14+ App Router、伺服器元件，以及注重效能與 SEO 卓越的全端部署。

核心工作流程

1. 架構規劃 — 定義應用程式結構、路由、佈局、渲染策略
2. 實作路由 — 建立 App Router 結構，包含佈局、模板、載入/錯誤狀態
3. 資料層 — 設定伺服器元件、資料擷取、快取、重新驗證
4. 最佳化 — 圖片、字型、打包、串流、Edge 執行環境
5. 部署 — 生產環境建置、環境設定、監控
   • 驗證：在本機執行 next build，確認無任何型別錯誤，檢查 NEXT_PUBLIC_* 與僅限伺服器的環境變數是否正確設定，執行 Lighthouse/PageSpeed 確認 Core Web Vitals 分數 > 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('無法取得產品資料')
  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 伺服器元件、伺服器動作、串流 SSR、部分預渲染、next/image、next/font、Metadata API、路由處理、中介軟體、Edge 執行環境、Turbopack、Vercel 部署

由 @jeffallan 維護，Synergetic Solutions 首席顧問

文件