sakilanwar12/nextjs-typescript-skills

Next.js 效能

規則

1. 圖片：一律使用 next/image，並指定明確的 sizes；priority 僅用於 LCP 英雄區塊。字型：使用 next/font（不採用會阻塞渲染的 Google <link>）。
2. 先測量再最佳化：使用 @next/bundle-analyzer、next build 輸出、Lighthouse。先修復最大的區塊。
3. 對於重量級的客戶端專用小工具（圖表、編輯器），使用 dynamic(() => import(...), { ssr: false })。盡可能將初始 JS 保持在 200KB gz 以下。
4. 積極快取：對於半動態頁面使用靜態 + revalidate (ISR)；使用 loading.tsx/Suspense 串流傳輸慢速部分，避免阻塞 TTFB。
5. 避免瀑布效應：在 RSC 中平行處理，記憶化重複的 fetch（每個請求自動去重），對昂貴的計算使用 unstable_cache。

模式

// next/image — 指定尺寸，預設為懶加載
import Image from 'next/image';
<Image src="/hero.jpg" alt="儀表板" width={1200} height={630} priority sizes="100vw" />
<Image src="/avatar.png" alt="使用者" width={64} height={64} sizes="64px" />

// next/font — 自託管，零 CLS
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en" className={inter.className}><body>{children}</body></html>;
}

// 重量級客戶端小工具 — 程式碼分割
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('@/components/chart'), { ssr: false, loading: () => <p>正在載入圖表…</p> });

// ISR
export const revalidate = 60;

// next.config.js — 分析器
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' });
module.exports = withBundleAnalyzer({});
// ANALYZE=true next build

檢查清單

• 英雄區塊圖片是否已設定 priority + sizes，其他圖片是否懶加載？
• 是否使用了 next/font，且沒有外部字型連結？
• 重量級元件是否已動態匯入？
• 是否已分析 Bundle，且最大的匯入是有正當理由的？
• 對於可快取的頁面是否已設定 ISR/revalidate？
• 是否已在 Lighthouse 中檢查 LCP/CLS/INP？