chore: remove deprecated legacyBehavior from Link component #4871
Conversation
SHUBHANSHU602
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
📝 WalkthroughWalkthroughThe PR removes the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4871--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/link.tsx (1)
22-28: Fix Prettier formatting to pass CI.The pipeline reports that Prettier expects the function parameters on a single line. Please run
npm run formatorprettier --write components/link.tsxto resolve this formatting issue.Expected format
-export default function LinkComponent({ - children, - locale, - target = '_self', - rel = '', - ...props -}: LinkComponentProps) { +export default function LinkComponent({ children, locale, target = '_self', rel = '', ...props }: LinkComponentProps) {
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/link.tsx
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
📚 Learning: 2024-10-11T11:32:30.226Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:95-119
Timestamp: 2024-10-11T11:32:30.226Z
Learning: In the `BlogPostItem` component (`components/navigation/BlogPostItem.tsx`), nesting `<a>` tags inside the parent `Link` component leads to hydration issues; therefore, we should avoid nesting `<a>` tags inside `Link` components in this component.
Applied to files:
components/link.tsx
📚 Learning: 2024-10-11T11:17:32.246Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/navigation/BlogPostItem.tsx:80-87
Timestamp: 2024-10-11T11:17:32.246Z
Learning: In the `BlogPostItem` component, the parent `Link` wraps the entire content, so inner `Link` components around the title and excerpt are unnecessary.
Applied to files:
components/link.tsx
📚 Learning: 2024-10-11T10:46:58.882Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/Avatar.tsx:35-44
Timestamp: 2024-10-11T10:46:58.882Z
Learning: In Next.js, when avoiding nested `<a>` tags due to hydration issues, use accessible non-link elements like `<button>` or `<span>` with appropriate roles, `tabIndex`, and event handlers to maintain accessibility and SEO.
Applied to files:
components/link.tsx
📚 Learning: 2024-10-11T07:38:35.745Z
Learnt from: akshatnema
Repo: asyncapi/website PR: 3262
File: components/newsroom/FeaturedBlogPost.tsx:90-92
Timestamp: 2024-10-11T07:38:35.745Z
Learning: In Next.js, nested `<a>` tags cause hydration issues due to invalid HTML. To fix this, avoid nesting `<a>` tags by replacing inner `<a>` tags with non-interactive elements like `<span>`, and use click handlers to maintain interactivity if needed.
Applied to files:
components/link.tsx
📚 Learning: 2025-12-29T14:21:28.216Z
Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:28.216Z
Learning: In the asyncapi/website repository, when you intentionally omit dependencies in React hooks (e.g., useEffect, useMemo), add an eslint-disable comment with an explanatory note above the line to justify the design choice. For example: // eslint-disable-next-line react-hooks/exhaustive-deps: intentionally omitting dependencies to avoid unnecessary re-runs. This helps reviewers understand the rationale and keeps lint guidance informative.
Applied to files:
components/link.tsx
🪛 GitHub Actions: PR testing - if Node project
components/link.tsx
[error] 22-22: Prettier formatting issue. Replace ⏎··children,⏎··locale,⏎··target·=·'_self',⏎··rel·=·'',⏎··...props⏎ with ·children,·locale,·target·=·'_self',·rel·=·'',·...props· prettier/prettier
[error] 84-84: Prettier formatting issue. Replace ⏎··href,⏎··children,⏎··target·=·'_self',⏎··rel·=·''⏎ with ·href,·children,·target·=·'_self',·rel·=·''· prettier/prettier
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (4)
components/link.tsx (4)
7-13: LGTM! Interface correctly updated for modern Next.js.The removal of
legacyBehaviorfrom the interface aligns with Next.js 15's deprecation of this prop and prepares the codebase for future Next.js versions where it will be removed entirely.
34-36: LGTM! Link components correctly updated for Next.js 15.All three Link usages (lines 34, 55, and 78) correctly omit the deprecated
legacyBehaviorprop and render children directly without wrapping them in<a>tags, which is the correct pattern for Next.js 13+.Also applies to: 55-57, 78-80
91-93: LGTM! LinkText correctly updated.The Link component usage correctly omits
legacyBehaviorand follows the modern Next.js Link API.
22-28: No remaininglegacyBehaviorusage found in codebase.Verification confirms that the
legacyBehaviorprop has been successfully removed from bothLinkComponentandLinkText. TheLinkComponentPropsinterface contains onlychildren,locale,href,target, andrelproperties. Zero matches found forlegacyBehaviorusage across the entire codebase.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4871 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 798 798
Branches 146 146
=========================================
Hits 798 798 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
What does this PR do?
This PR removes the deprecated
legacyBehaviorusage from the customLinkcomponent and aligns it with the modern Next.jsLinkAPI.The change ensures forward compatibility with upcoming Next.js versions where
legacyBehavioris removed.Why is this change needed?
legacyBehavioris deprecated in Next.js and scheduled for removalScope of this PR
✅ Only updates the custom
Linkcomponent❌ No formatting, config, localization, or unrelated changes
❌ No dependency or lockfile changes
Testing
Notes
This PR is intentionally minimal and scoped only to removing deprecated API usage.
Issue Number:-#4748
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.