🧹 [画像の表示をnext/imageの<Image>コンポーネントに移行]

[is0692vs]

🎯 What:
apps/web/src/app/papers/[id]/paper-detail-client.tsx 内の <img> 要素を next/image の <Image> コンポーネントに置き換えました。

💡 Why:
Next.jsの組み込みESLintルール（@next/next/no-img-element）の警告を解消するためです。ネイティブの <img> 要素の代わりに <Image> コンポーネントを使用することで、LCP（Largest Contentful Paint）や帯域幅の使用を最適化でき、コードベースの保守性と標準準拠性が向上します。今回利用しているURLは URL.createObjectURL で生成されるblob URLであるため、Next.jsのデフォルトの画像最適化を回避しつつコンポーネントを利用できるように unoptimized プロパティを付与しています。

✅ Verification:

• pnpm run lint を実行し、該当ファイルにおける @next/next/no-img-element の警告が解消されたことを確認しました。
• pnpm run typecheck および pnpm run test を実行し、既存の機能やテストに影響がないことを確認しました。

✨ Result:
Lint警告が解消され、コードの品質とNext.js標準への準拠性が向上しました。動作の変更はありません。

---

PR created automatically by Jules for task 16172116166113650431 started by @is0692vs

Greptile Summary

このPRは、論文詳細ページの画像プレビューを Next.js の画像コンポーネントへ移行します。

• <img> を next/image の <Image> に置き換え。
• blob URL のプレビュー向けに unoptimized を指定。
• 任意の画像比率に合わせて full-width と auto-height の表示を明示。

Confidence Score: 5/5

この変更は安全にマージできそうです。

• No blocking issues found in the changed code.

Important Files Changed

Filename	Overview
apps/web/src/app/papers/[id]/paper-detail-client.tsx	画像プレビューを <Image> に移行し、blob URL の表示に必要な非最適化とレスポンシブ表示を指定しています。

_{Reviews (3): Last reviewed commit: "Merge branch 'staging' into code-health/..." | Re-trigger Greptile}

Context used:

• Knowledge Base — Paper Upload, Storage, and Viewing Flow

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
open-shelf	Ignored		Jul 22, 2026 4:30am

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[coderabbitai]

Warning

Review limit reached

@is0692vs, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 16 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 950aaee8-e692-4d7b-927a-79134647f520

📥 Commits

Reviewing files that changed from the base of the PR and between d4ad43b and 9d4faa5.

📒 Files selected for processing (6)

• .Jules/palette.md
• apps/web/src/app/papers/[id]/paper-detail-client.tsx
• apps/web/src/components/feed-button.tsx
• apps/web/src/components/header.tsx
• apps/web/src/components/markdown-editor.tsx
• apps/web/src/components/pdf-viewer.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch code-health/use-next-image-in-paper-detail-16172116166113650431

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

このリポジトリでは staging 先行フローを採用しています。PR のターゲットを staging に変更しました。staging で動作確認後、staging → main の PR を作成してください。

[is0692vs]

@greptile review

[is0692vs]

ボットによる制限メッセージおよびstaging環境へのターゲット変更のコメントを確認しました。現時点で人間のレビュアーからの追加の修正要求やフィードバックはないため、本PRは修正の対応完了とさせていただきます。必要に応じてさらに修正が必要な場合はお知らせください。

[is0692vs]

@greptile review

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!