Communitygithub.com

YepAPI/skills

App Router、伺服器元件及現代 Next.js 15 模式 — 沒有 Pages Router 的幻覺。

skills 是什麼?

這個技能提供了一套專門針對 Next.js 15 的開發規則,強制使用 App Router 和 Server Components。它幫助開發者避免使用已廢棄的 Pages Router 模式(如 `getServerSideProps`、`getStaticProps` 等),並引導採用現代最佳實務,例如使用 `generateMetadata()` 處理動態後設資料、使用 Server Actions 進行資料變更,以及正確使用 `next/image` 和 `next/link`。此技能適用於任何支援基於 markdown 的技能檔案的 AI 編碼代理(如 Claude Code、Cursor 等),以確保產出的 Next.js 程式碼更加一致、高效且遵循框架的最新慣例。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/nextjs

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Next.js 15

規則

  • 總是使用 App Router(app/ 目錄),絕不使用 Pages Router(pages/)
  • 預設使用 Server Components — 僅在必要時(狀態、副作用、瀏覽器 API)才加入 "use client"
  • 使用 generateMetadata() 處理動態後設資料,而非 <Head>
  • 使用 Server Actions 進行資料變更,對於簡單的表單不要使用 API 路由
  • 使用 next/image 並指定適當的 width/height 或 fill — 絕不要使用原生的 <img>
  • 使用 next/link — 內部導航絕不要使用原生的 <a>
  • 路由處理常式放在 app/api/[route]/route.ts 中 — 匯出具名函式(GET、POST)
  • 佈局放在 layout.tsx、載入狀態放在 loading.tsx、錯誤邊界放在 error.tsx
  • 使用 unstable_cache 或 revalidateTag 進行 ISR — 不要使用舊式的 getStaticProps/getServerSideProps
  • 環境變數:僅客戶端使用時需加上 NEXT_PUBLIC_ 前綴

避免

  • getServerSideProps、getStaticProps、getStaticPaths — 這些屬於 Pages Router
  • _app.tsx、_document.tsx — 這些屬於 Pages Router
  • 從 next/router 引入 useRouter — 請改用 next/navigation
  • next/head — 請使用 generateMetadata 匯出
  • 不必要地將 Server Components 包裹在 "use client" 中

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

相關技能