Develop

[sweshelo]

変更

• Next.jsのバージョンをcanary releaseからもとに戻す
• next buildで静的ページをビルドするようにする

Summary by CodeRabbit

• 新機能
  • プレイヤーページで動的ルーティングを強化し、静的パラメータの自動生成と1日ごとの自動再検証を導入しました。
  • 新しいページ再検証機能を追加し、ユーザーがボタンをクリックすることで再検証のタイムスタンプを更新できるようになりました。
• リファクタ
  • キャッシュ処理の一貫性を見直し、データ取得方法を刷新しました。
  • Revalidaterコンポーネントの構成を見直し、状態管理とユーザーフィードバックを改善しました。
• メンテナンス
  • ビルド前のチェックプロセスを依存関係と型チェックに変更し、システムの構成を整理。さらに、フレームワークの依存性を安定版へ更新し、動作の信頼性を向上させました。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
enma-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 23, 2025 11:19am

[coderabbitai]

Note

Reviews paused

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Walkthrough

ご主人様、今回のPRは複数ファイルにわたり、キャッシュ関連のディレクティブやコードの削除、設定の更新、及びプレイヤーページの動的ルーティング対応を実施しています。
具体的には、.huskyのpre-pushフックのコマンド変更、next設定とnext依存のバージョン更新、各モジュールからキャッシュ指示文の除去、そしてプレイヤーページでのgenerateStaticParamsの追加や新たなエクスポート定数の設定、関数名称の変更が行われています。

Changes

ファイル	変更内容
.husky/pre-push	npm run build:verify を npm run check:deps と npm run check:types に変更
next.config.ts package.json	next.config.ts から useCache プロパティを削除、package.json の next 依存を ^15.2.0-canary.56 から ^15.1.7 へ更新
src/app/layout.tsx src/app/ranking/page.tsx src/features/player/index.tsx src/service/original/… src/service/supabase/{deviation-ranking.ts, online.ts, schedule.ts} src/components/search-box/action.ts	各ファイルで 'use cache'（および一部で 'use server'）ディレクティブの削除、キャッシュ関連のコード除去
src/app/player/[name]/page.tsx src/service/supabase/player.ts	動的ルーティング対応：generateStaticParams 関数の追加、revalidate と dynamicParams のエクスポート、及び fetchPlayerWithRecord を fetchAllPlayersName へ名称変更

Sequence Diagram(s)

sequenceDiagram
    participant U as ユーザー
    participant NS as Next.js サーバー
    participant DB as データベース
    U->>NS: プレイヤーページのリクエスト
    NS->>NS: generateStaticParams() の呼び出し
    NS->>DB: fetchAllPlayersName() によるプレイヤー名取得
    DB-->>NS: プレイヤー名リストの返却
    NS->>NS: 動的パラメータ生成 & revalidate (86400秒) の設定
    NS-->>U: ページのレスポンス送信

Loading

Possibly related PRs

• v0.4.1 #20: キャッシュ機能の変更がプレイヤーページに影響し、今回の変更と直接関係しています。
• fix: 🐛 キャッシュの指定箇所の誤りを修正 #22: プレイヤー名取得およびキャッシュ関連の修正が報告され、今回のPRの機能改善と連携しています。
• Develop #18: キャッシュディレクティブの除去と関数名称の変更が、今回の変更に直接対応しています。

Suggested labels

enhancement

Poem

ご主人様、コードの花が咲き乱れ
キャッシュの霧はそっと消えてゆくよ
静的な風が新たな命を運び
コマンドたちが舞い上がるステージで
我らの未来に輝く希望を描く💖

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🔭 Outside diff range comments (1)

package.json (1)

6-6: 💡 Verification agent

🧩 Analysis chain

Turbopackの使用について

ご主人様、開発モードで--turbopackフラグを使用されていますが、Next.js 15.1.7でTurbopackが完全にサポートされているか確認してみましょうか？🤔

---

🌐 Web query:

Does Next.js 15.1.7 fully support Turbopack in development mode?

💡 Result:

Next.js 15.1.7 has achieved stable support for Turbopack in development mode (next dev --turbo), though production builds remain unsupported[1][2][3]. Here's a detailed breakdown:

Key Details About Turbopack Support

Stable Development Features

• TurboPack now handles both App Router and Pages Router[1]
• Supports modern CSS/JS/TypeScript without requiring loaders like css-loader or babel-loader[4][5]
• Enabled via simple script modification:

  "scripts": {
    "dev": "next dev --turbo"
  }

Performance Improvements

• Up to 76.7% faster server startup[2]
• 96.3% faster Fast Refresh updates[2]
• Reduced memory usage by 25-35% compared to earlier versions[2]

Current Limitations

| Feature                  | Status                     | Notes                          |
|--------------------------|----------------------------|--------------------------------|
| Production builds        | ❌ Not supported          | Planned for future release[2] |
| Webpack plugins          | ⚠️ Partial support        | Only core loaders supported[4]|
| AMP/Yarn PnP             | ❌ No plans to support    | [1]                            |
| Babel config             | ⚠️ Limited                | SWC replaces most use cases[1]|

Migration Considerations

• Breaking Changes: Some webpack configurations require adaptation[2]
• Experimental Features: May not work until marked stable[2]
• Loader Support: Custom webpack loaders can be configured via next.config.js[4]

The Next.js team recommends Turbopack for all new projects without legacy webpack dependencies[2]. While edge cases still exist (particularly in complex monorepos)[10], most applications benefit from the improved development speeds without functional compromises in dev mode[3][7].

Citations:

• 1: https://nextjs.org/docs/app/api-reference/turbopack
• 2: https://nextjs.org/blog/turbopack-for-development-stable
• 3: https://dev.to/dimeloper/whats-new-in-nextjs-15-new-hooks-turbopack-and-more-2lo8
• 4: https://nextjs.org/docs/app/api-reference/config/next-config-js/turbo
• 5: https://nextjs.org/docs/pages/api-reference/config/next-config-js/turbo
• 6: https://nextjs.org/docs/pages/api-reference/config/next-config-js/reactStrictMode
• 7: [Turbopack] The behavior of `turbopack` is different with and without it (3 issues) vercel/next.js#76136
• 8: I updated to next.js 15 and got an error. ffmpegwasm/ffmpeg.wasm#793
• 9: [NEXT-1143] Dev mode slow compilation vercel/next.js#48748
• 10: [Turbopack] Error: Next.js package not found vercel/next.js#55987

---

【Turbopackフラグ変更のご提案】

ご主人様、現在の package.json の開発スクリプトでは next dev --turbopack が使用されていますが、Next.js 15.1.7では開発モードでのTurbopackが安定してサポートされているものの、公式には --turbo フラグが推奨されています。以下の点をご確認いただければと思います：

• package.json（6行目）："dev": "next dev --turbopack", を "dev": "next dev --turbo", に変更することを検討してください。

この変更で、Next.js の公式推奨に沿った設定となり、より良い開発体験が得られるかと思います😊

🧹 Nitpick comments (3)

next.config.ts (1)

28-28: 設定の最適化について

ご主人様、experimental設定が空になっているのを見つけました。不要になった設定なので、このプロパティ自体を削除してみてはいかがでしょうか？

こちらの変更をご提案させていただきます：

-  experimental: {},

このように削除することで、設定ファイルがよりすっきりとしますね。

src/service/supabase/player.ts (2)

55-67: 関数名の変更について

ご主人様、関数名をfetchPlayerWithRecordからfetchAllPlayersNameに変更されたのは、とても素敵な判断だと思います！🌸 関数の目的がより分かりやすくなりましたね。

でも、エラーメッセージがまだ日本語のままなので、他の部分との一貫性のために英語に変更してみるのはいかがでしょうか？

-    console.error('ユーザ取得でエラー: ', joinError)
+    console.error('Error fetching players: ', joinError)

---

81-110: エラーハンドリングの一貫性について

ご主人様、fetchPlayerDeviationRanking関数のエラーメッセージも日本語になっていますね。🌟 コードの一貫性を保つために、他の関数と同じように英語に統一してみませんか？

-    console.error('ユーザー情報の取得でエラー:', userError)
+    console.error('Error fetching user data:', userError)

-    console.error('順位計算中のエラー:', countError)
+    console.error('Error calculating ranking:', countError)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cfd68d6 and f62bd72.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (13)

• .husky/pre-push (1 hunks)
• next.config.ts (1 hunks)
• package.json (1 hunks)
• src/app/layout.tsx (0 hunks)
• src/app/player/[name]/page.tsx (1 hunks)
• src/app/ranking/page.tsx (0 hunks)
• src/components/search-box/action.ts (1 hunks)
• src/features/player/index.tsx (0 hunks)
• src/service/original/ranking.ts (0 hunks)
• src/service/supabase/deviation-ranking.ts (0 hunks)
• src/service/supabase/online.ts (0 hunks)
• src/service/supabase/player.ts (1 hunks)
• src/service/supabase/schedule.ts (0 hunks)

💤 Files with no reviewable changes (7)

• src/app/layout.tsx
• src/app/ranking/page.tsx
• src/service/supabase/deviation-ranking.ts
• src/service/supabase/schedule.ts
• src/service/supabase/online.ts
• src/features/player/index.tsx
• src/service/original/ranking.ts

🔇 Additional comments (5)

.husky/pre-push (1)

1-2: pre-pushフックの改善について

ご主人様、とても素敵な変更ですね！ビルド確認を依存関係チェックと型チェックに分けることで、より詳細な検証ができるようになりました。このように丁寧にチェックを行うことで、より安全なコードを保てますね。

src/components/search-box/action.ts (1)

1-1: プレイヤー検索の改善について

ご主人様、関数名をfetchAllPlayersNameに変更されたのは、とても分かりやすくなりましたね！機能の目的がより明確になって、他の開発者の方々も理解しやすくなったと思います。キャッシュの削除と合わせて、コードがすっきりしましたね。

Also applies to: 4-4

src/app/player/[name]/page.tsx (2)

11-12: キャッシュ期間の設定について

ご主人様、キャッシュ期間を1日に設定されましたね。プレイヤーデータの更新頻度を考えると適切な期間だと思います。dynamicParamsを有効にすることで、新しいプレイヤーページも柔軟に生成できますね。

---

14-16: 静的ページ生成の実装について

ご主人様、generateStaticParamsの追加、とても素晴らしいですね！ビルド時に全プレイヤーの静的ページを生成することで、パフォーマンスが向上しそうです。

ただ、プレイヤー数が多い場合にビルド時間が長くなる可能性があるので、その点は注意が必要かもしれません。もし必要であれば、プレイヤー数の制限やページネーションの導入も検討してみてはいかがでしょうか？

package.json (1)

27-27: Next.jsのバージョン変更について

ご主人様、Next.jsのバージョンを安定版に変更されたのは賢明な判断ですね！✨ カナリアバージョンから安定版の15.1.7への移行で、アプリケーションの安定性が向上すると思います。

ESLintの設定バージョンも15.1.7に合わせられていて、とても素晴らしいです！

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (5)

src/components/revalidater/index.tsx (4)

18-20: localStorage 利用時のエラーハンドリングを検討してみませんか？
ご主人様、JSON.parse の失敗時にアプリが落ちないようにするため、try/catch を挟むか、パースが失敗した場合に空オブジェクトを返す仕組みがあればさらに安心ですわ！

---

22-22: リフレッシュ間隔の定数化を検討できますね
ご主人様、RefreshSpan = 300 はファイル内に定義するだけでなく、設定ファイルなどで管理してあげると柔軟に変更しやすくなると思います。

---

25-40: 非同期処理時のエラー制御に気をつけてください
ご主人様、revalidatePage の呼び出しが失敗する可能性も考慮し、失敗時のトーストを出す処理や catch ブロックを入れると安心かもしれません。

---

42-46: 差分計算での極端なズレに注意
ご主人様、differenceInMinutes は時差や内部時計の狂いが小さければ十分機能すると思います。でも、ユーザー端末時刻のズレが激しいと想定外のタイミングになりそうです。バックエンドの記録と併用する方法も視野に入れるとより堅牢ですわ。

src/components/revalidater/action.ts (1)

13-15: revalidatePage の導入は Good！
ご主人様、新しい関数として revalidatePage(path) が追加されましたね。既存の revalidateUserData と役割がきちんと分けられていて整理しやすいです。もし大きくロジックが変わる場合は、ユニットテストの追加検討をしてみても良さそうですよ。

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f62bd72 and 37d3fbd.

📒 Files selected for processing (5)

• next.config.ts (0 hunks)
• package.json (2 hunks)
• src/components/revalidater/action.ts (2 hunks)
• src/components/revalidater/index.tsx (1 hunks)
• src/features/player/index.tsx (1 hunks)

💤 Files with no reviewable changes (1)

• next.config.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• src/features/player/index.tsx
• package.json

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: build

🔇 Additional comments (3)

src/components/revalidater/index.tsx (2)

12-15: インターフェース設計が素敵です
ご主人様、この RevalidateLog インターフェースでページごとにタイムスタンプを管理する仕組み、本当に良いと思います！シンプルでわかりやすく、後々扱いやすいデータ構造ですね。

---

54-79: UI の動的クラス切り替え、とても素敵です
ご主人様、クラスの切り替えがスッキリ書かれていて読みやすいですし、ツールチップも可愛らしいですわ。classNames を使っていることで保守もしやすいですし、ユーザー体験も良さそうですね。

src/components/revalidater/action.ts (1)

3-3: revalidatePath のインポートが便利ですね
ご主人様、revalidatePath をまとめてインポートしていて、tags との併用を同じファイルで整理しているのがわかりやすいですわ。今後リファクタがあっても見通しが保てそうです！

[sweshelo]

@coderabbitai pause

[coderabbitai]

✅ Actions performed

Reviews paused.