dependency-upgrade

依存関係のアップグレードスキル

依存関係を一元管理するために、pnpm とカタログを使用します。

更新の確認

pnpm outdated                      # Check all outdated
pnpm -r outdated                   # Across workspace
pnpm -F @sgcarstrends/api outdated # Specific package
pnpm dlx taze --interactive        # Interactive upgrade

アップグレードの手順

1. カタログを更新する

# pnpm-workspace.yaml
catalog:
  next: ^16.0.0  # Upgraded from ^15.0.0
  react: ^19.0.0

パッケージは package.json 内で "package": "catalog:" と指定します。

2. インストールしてテストする

pnpm install
pnpm tsc --noEmit  # Type check
pnpm test          # Unit tests
pnpm biome check . # Lint
pnpm build         # Build
pnpm dev           # Manual testing

3. 互換性を破る変更を修正する

// Example: Next.js 16 async params
// Before
export default function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>;
}

// After
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <div>{id}</div>;
}

4. コミットする

git commit -m "chore(deps): upgrade Next.js to v16

- Upgrade Next.js 15 → 16
- Upgrade React 18 → 19
- Fix async params migration

BREAKING CHANGE: Requires Node.js 20+"

メジャーバージョンのアップグレード

Next.js

pnpm dlx @next/codemod@latest upgrade latest  # Run codemod
# Update catalog: next: ^16.0.0, react: ^19.0.0
pnpm install
# Fix: async params, async cookies/headers

TypeScript

# Update catalog: typescript: ^5.3.3
pnpm install
pnpm tsc --noEmit  # Fix type errors

Drizzle ORM

# Update catalog: drizzle-orm: ^0.30.0, drizzle-kit: ^0.20.0
pnpm install
pnpm -F @sgcarstrends/database db:generate  # If schema changed

セキュリティ更新

pnpm audit                 # Check vulnerabilities
pnpm audit --fix           # Auto-fix
# Or manually update vulnerable package in catalog

依存関係の競合

pnpm why package-name      # Check dependency chain
pnpm dedupe                # Deduplicate

オーバーライドは最終手段として使用します。

{ "pnpm": { "overrides": { "react": "^19.0.0" } } }

ロールバック

git reset --hard HEAD
# Or revert lockfile:
git checkout main -- pnpm-lock.yaml
pnpm install

トラブルシューティング

# Lockfile conflicts
rm pnpm-lock.yaml && pnpm install

# Build failures after upgrade
rm -rf node_modules .turbo dist .next && pnpm install && pnpm build

ベストプラクティス

1. カタログを使用する：pnpm-workspace.yaml でバージョンを一元管理します
2. 十分にテストする：アップグレード後にすべてのテストを実行します
3. 変更履歴を読む：アップグレード前に互換性を破る変更を確認します
4. 段階的にアップグレードする：一度にすべてを更新しないでください
5. 個別にコミットする：依存関係のアップグレードと機能を分けます
6. セキュリティ対応を自動化する：セキュリティパッチには Dependabot を使用します

参考資料

• pnpm カタログ：https://pnpm.io/catalogs
• Next.js Codemods：https://nextjs.org/docs/app/building-your-application/upgrading/codemods
• 脆弱性スキャンについては security スキルを参照してください