🧹 [code health improvement] Use next/image instead of <img> in PaperDetailClient#965
🧹 [code health improvement] Use next/image instead of <img> in PaperDetailClient#965is0692vs wants to merge 1 commit into
Conversation
Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
Warning Review limit reached
More reviews will be available in 57 minutes and 38 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
このリポジトリでは staging 先行フローを採用しています。PR のターゲットを |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces the native <img> tag with Next.js's <Image> component for rendering image previews. However, the reviewer pointed out that using <Image> with width={0} and height={0} will trigger runtime warnings in Next.js. Since the images are dynamic blob URLs and marked as unoptimized, it is recommended to revert back to the native <img> tag to avoid these validation issues.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| <Image | ||
| src={imagePreviewUrls[img.id]} | ||
| alt={img.filename} | ||
| className="h-auto w-full rounded" | ||
| loading="lazy" | ||
| width={0} | ||
| height={0} | ||
| sizes="100vw" | ||
| unoptimized | ||
| /> |
There was a problem hiding this comment.
Using the Next.js <Image /> component with width={0} and height={0} will trigger runtime console warnings/errors in Next.js because both properties must be positive integers greater than 0 (unless the fill layout is used).
Since the image source is a dynamically generated blob URL (URL.createObjectURL), it cannot be optimized by the Next.js image server anyway (which is why unoptimized was added). For temporary blob URLs or object URLs where dimensions are unknown, using a standard native <img> tag is the recommended and standard practice in Next.js. It avoids fake dimension properties and prevents Next.js runtime validation warnings.
<img
src={imagePreviewUrls[img.id]}
alt={img.filename}
className="h-auto w-full rounded"
loading="lazy"
/>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <Image | ||
| src={imagePreviewUrls[img.id]} | ||
| alt={img.filename} | ||
| className="h-auto w-full rounded" | ||
| loading="lazy" | ||
| width={0} | ||
| height={0} | ||
| sizes="100vw" | ||
| unoptimized | ||
| /> |
There was a problem hiding this comment.
width={0} / height={0} は Next.js の公式ドキュメントでは推奨されていない非公式な回避策です。画像の実寸が不明な場合は fill プロパティと相対配置の親コンテナを使う方法が公式推奨パターンです。現状でも動作はしますが、fill 方式を使うと将来の Next.js バージョンアップで互換性の問題が発生するリスクを回避できます。
| <Image | |
| src={imagePreviewUrls[img.id]} | |
| alt={img.filename} | |
| className="h-auto w-full rounded" | |
| loading="lazy" | |
| width={0} | |
| height={0} | |
| sizes="100vw" | |
| unoptimized | |
| /> | |
| <div className="relative w-full"> | |
| <Image | |
| src={imagePreviewUrls[img.id]} | |
| alt={img.filename} | |
| className="rounded" | |
| fill | |
| style={{ objectFit: "contain", position: "relative" }} | |
| unoptimized | |
| /> | |
| </div> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/app/papers/[id]/paper-detail-client.tsx
Line: 839-847
Comment:
`width={0}` / `height={0}` は Next.js の公式ドキュメントでは推奨されていない非公式な回避策です。画像の実寸が不明な場合は `fill` プロパティと相対配置の親コンテナを使う方法が公式推奨パターンです。現状でも動作はしますが、`fill` 方式を使うと将来の Next.js バージョンアップで互換性の問題が発生するリスクを回避できます。
```suggestion
<div className="relative w-full">
<Image
src={imagePreviewUrls[img.id]}
alt={img.filename}
className="rounded"
fill
style={{ objectFit: "contain", position: "relative" }}
unoptimized
/>
</div>
```
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
1 participant
🎯 What: Replaced the native
<img>tag with the Next.js<Image />component withinapps/web/src/app/papers/[id]/paper-detail-client.tsx.💡 Why: This improves the codebase's health and adheres to Next.js best practices by avoiding native
<img>usage. The image URL is sourced dynamically usingURL.createObjectURL, so the Next.js<Image />component was appropriately configured with theunoptimizedprop to bypass the Next.js image optimization server, preventing a crash. Responsive size attributes (width={0},height={0},sizes="100vw") alongside the existingh-auto w-fullstyling were preserved.✅ Verification:
bun x prettier --write.bun run lint, confirming no related errors exist.bun run vitest run apps/web.✨ Result: A safer, more optimized, and pattern-compliant handling of images within the Next.js client component without any alterations to existing behavior or previews.
PR created automatically by Jules for task 3537094053625830455 started by @is0692vs
Greptile Summary
blob: URL を使って動的に生成された画像プレビューの表示を、ネイティブの
<img>タグから Next.js の<Image />コンポーネントに置き換えたコード品質改善 PR です。unoptimizedプロパティで Next.js の画像最適化サーバーを経由しない設定になっており、blob: URL との組み合わせとして適切です。<img>→<Image unoptimized>へ置換。blob: URL は最適化サーバーが取得できないためunoptimizedの使用は正しい選択。loading="lazy"は削除されたが、<Image>のデフォルト動作が lazy loading のため機能的な変化はなし。width={0}/height={0}/sizes="100vw"はレスポンシブ対応のための回避策として動作するが、公式推奨のfillパターンへの移行を検討する余地あり。Confidence Score: 4/5
変更範囲は画像タグの置換のみで、動作への影響は最小限。
unoptimizedの使用により blob: URL との互換性も確保されている。unoptimizedで Next.js 最適化をバイパスしており blob: URL でも正常に動作する。width={0}/height={0}はコミュニティで広く使われる回避策だが非公式パターンであり、将来の Next.js バージョンで警告や動作変更が生じる可能性がある。apps/web/src/app/papers/[id]/paper-detail-client.tsx—width={0}/height={0}パターンについてfillへ移行するか確認を推奨。Important Files Changed
<img>を Next.js<Image />に置換。blob: URL のためunoptimizedを使用しており適切。width={0}/height={0}/sizes="100vw"の組み合わせはレスポンシブ表示のための一般的な回避策。loading="lazy"は削除されたが<Image>のデフォルトで lazy loading が維持される。Sequence Diagram
sequenceDiagram participant C as PaperDetailClient participant API as apiFetch participant B as Browser Blob participant IMG as Image unoptimized C->>API: "fetch image file" API-->>C: "Response (binary)" C->>B: "URL.createObjectURL(blob)" B-->>C: "blob: URL" C->>IMG: "src={blob: URL}" Note over IMG: "unoptimized=true Next.js最適化をバイパス" IMG-->>C: "img src=blob:... として描画"Prompt To Fix All With AI
Reviews (1): Last reviewed commit: "refactor: use next/image in PaperDetailC..." | Re-trigger Greptile