Skip to content

Fix remaining legacyBehavior deprecation warnings in Link components #65

@Codehagen

Description

@Codehagen

Fix remaining legacyBehavior deprecation warnings in Link components

🐛 Issue Description

We're getting deprecation warnings for legacyBehavior in Next.js Link components throughout the codebase. This attribute is deprecated and will be removed in a future Next.js release.

⚠️ Current Warnings

`legacyBehavior` is deprecated and will be removed in a future release. A codemod is available to upgrade your components:

npx @next/codemod@latest new-link .

Learn more: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#remove-a-tags-from-link-components

📍 Affected Files

Based on a search through the codebase, the following files still contain legacyBehavior:

  • src/app/(blog)/blog/(post)/[slug]/page.tsx
  • src/components/sections/hero.tsx
  • src/components/sections/shipping-velocity-client.tsx
  • src/components/sections/main-features.tsx
  • src/components/blog-author.tsx
  • src/components/prismui/timeline.tsx
  • src/components/blog-card.tsx
  • src/components/drawer.tsx
  • src/components/docs/table-of-contents.tsx
  • src/components/blog/mdx.tsx
  • src/components/blog/blog-card.tsx
  • src/components/blog/category-card.tsx
  • src/components/blog/logos.tsx
  • src/components/blog/blog-layout-hero.tsx
  • src/components/blog/author.tsx
  • src/components/blog/table-of-contents.tsx
  • src/components/blog/integrations.tsx
  • src/components/blog/customers.tsx
  • src/components/docs-nav.tsx
  • src/components/sidebar-nav.tsx
  • src/registry/section/pricing.tsx
  • src/registry/example/pricing-basic.tsx

🔧 Solution

Option 1: Run the official codemod (Recommended)

npx @next/codemod@latest new-link .

Option 2: Manual fixes

Remove legacyBehavior from Link components. For components with multiple children, ensure proper structure:

Before:

<Link href="/example" legacyBehavior>
  <span>Title</span>
  <div>Content</div>
</Link>

After:

<Link href="/example">
  <span>Title</span>
  <div>Content</div>
</Link>

✅ Acceptance Criteria

  • All legacyBehavior attributes removed from Link components
  • No deprecation warnings in console
  • All Link components function correctly after changes
  • Registry components are updated and rebuilt (pnpm build:registry)
  • No broken navigation or routing

🔍 How to Test

  1. Run the development server: pnpm dev
  2. Navigate through the site (docs, blog, components)
  3. Check browser console for deprecation warnings
  4. Verify all links work correctly
  5. Test registry components installation

📚 Additional Context

  • Next.js introduced this deprecation to simplify Link component usage
  • The new Link component can handle multiple children without legacyBehavior
  • Some components may need registry rebuilding after changes
  • This affects both main components and registry exports

🎯 Priority

Medium - While not breaking functionality now, this will become a breaking change in future Next.js versions.


Environment:

  • Next.js: 15.4.1
  • React: 18.3.1
  • Node.js: 20.x

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions