// 危険: 半透明背景でのmutedテキスト
<section className="bg-black/45">
  <p className="text-slate-400">...</p>  // コントラスト不足の可能性
</section>

// 安全: 十分な不透明度 + 白テキスト
<section className="bg-black/60">
  <p className="text-white">...</p>
</section>

npm run dev
lighthouse http://localhost:3000 --only-categories=accessibility --view

# Lighthouse CLI（ローカル）
npx lighthouse https://example.com --view --preset=desktop
npx lighthouse https://example.com --view --preset=perf --emulated-form-factor=mobile

# Bundle分析
npm run build
npx @next/bundle-analyzer

// BAD: 不要なクライアントコンポーネント
'use client'
export function StaticContent() {
  return <div>This doesn't need to be a client component</div>
}

// GOOD: Server Componentのまま
export function StaticContent() {
  return <div>Server rendered, zero JS</div>
}

// BAD: サイズ未指定
<img src="/hero.jpg" alt="Hero" />

// GOOD: next/image + priority + sizes
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority  // LCP要素には必須
  sizes="(max-width: 768px) 100vw, 1200px"
/>

// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',  // CLSを防ぐ
  preload: true,
})

// BAD: 常に読み込み
import HeavyComponent from './HeavyComponent'

// GOOD: 必要時に読み込み
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false,  // クライアントのみで必要な場合
})

// BAD: 全体が待機
export default async function Page() {
  const data = await fetchSlowData()
  return <Content data={data} />
}

// GOOD: 部分的にストリーミング
import { Suspense } from 'react'

export default function Page() {
  return (
    <div>
      <Header />  {/* すぐに表示 */}
      <Suspense fallback={<Skeleton />}>
        <SlowContent />  {/* 後からストリーミング */}
      </Suspense>
    </div>
  )
}

// BAD: ウォーターフォール
const user = await getUser()
const posts = await getPosts(user.id)
const comments = await getComments(posts[0].id)

// GOOD: 並列実行
const [user, settings] = await Promise.all([
  getUser(),
  getSettings(),
])