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"中