Next.js: Handle legacyBehavior prop in Link mock component

[yatishgoel]

Closes #33861

What I did

Fixed the Next.js Link mock component to properly handle the legacyBehavior prop. Previously, MockLink always rendered its own <a> tag, which caused nested <a> tags when users passed legacyBehavior with a child <a> element.

When legacyBehavior is true, the mock now uses React.cloneElement to inject props (href, onClick, ref) onto the child element instead of wrapping it in an <a>, matching the real Next.js Link behavior.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run a sandbox with a Next.js template
2. Create a story using <Link href="/about" legacyBehavior><a>About</a></Link>
3. Verify it renders a single <a> tag (not nested <a> tags)
4. Verify the click action is still logged in the Actions panel
5. Also verify that non-legacy <Link href="/about">About</Link> still works as before

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• New Features
  • Added legacyBehavior support to the Link component mock, enabling proper handling of child elements with ref, href, and onClick passthrough when legacy behavior is enabled.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

Adds legacyBehavior support to the mock Next.js Link component. When enabled, the component resolves the child element, constructs merged props with ref and onClick handling, conditionally injects href, and returns the cloned child. Otherwise, standard anchor rendering is used.

Changes

Cohort / File(s)	Summary
Link component legacyBehavior support code/frameworks/nextjs/src/export-mocks/link/index.tsx	Introduces conditional logic for legacyBehavior mode: resolves child element, constructs childProps with ref, prevents default onClick while delegating to child's onClick before invoking linkAction, conditionally injects href based on passHref or child anchor state, and returns cloned child element with merged props.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Next.js: Fix Link component override in appDirectory configuration #31251 — Updates the same mock Link component to handle Next.js Link's legacyBehavior mode with href and onClick passthrough logic.

✨ Finishing Touches

• 📝 Generate docstrings

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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