NextJS: Support as prop in next/link mock

[yatishgoel]

Closes #35145

What I did

The next/link mock in @storybook/nextjs and @storybook/nextjs-vite destructured the as prop but never used it, so the rendered anchor always used the raw href. As a result, a dynamic link like:

<Link href="/users/[id]" as="/users/123">User</Link>

rendered <a href="/users/[id]"> in Storybook instead of the resolved <a href="/users/123"> that a real Next.js app produces. This made it impossible to inspect/verify the final URL when hovering or inspecting links.

The fix computes the anchor href from as ?? href, resolving as as either a string or a UrlObject using the same logic already applied to href. When as is not provided, behavior is unchanged (it falls back to href). The change is applied identically to both frameworks:

• code/frameworks/nextjs/src/export-mocks/link/index.tsx
• code/frameworks/nextjs-vite/src/export-mocks/link/index.tsx

Regression tests were added next to each mock covering the as string, the as UrlObject, and the href fallback cases.

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

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Run a Next.js sandbox: yarn task --task sandbox --start-from auto --template nextjs-vite/default-ts
2. Open the sandbox's Link story file (template/stories/Link.stories.tsx) and add a story that uses both href and as, e.g.:

   <Link href="/users/[id]" as="/users/123">User</Link>

3. Open Storybook in your browser and navigate to that story.
4. Inspect the rendered anchor element (or hover the link) and confirm the href is the resolved /users/123 (not the /users/[id] template).
5. Confirm a link with only href (no as) still renders its href unchanged.

Documentation

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

No documentation changes are required — this aligns the mock's behavior with the existing, already-documented Next.js Link as prop.

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

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• 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

• Tests

  • Added comprehensive test coverage for Next.js Link mock component, validating URL resolution behavior with and without the as prop parameter.

• Bug Fixes

  • Corrected Link mock implementation to properly handle the as prop as a URL override, with appropriate fallback to href resolution and query parameter serialization.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b801a0dd-97d1-4761-8936-214c8c9d049a

📥 Commits

Reviewing files that changed from the base of the PR and between 135e436 and 352996a.

📒 Files selected for processing (4)

• code/frameworks/nextjs-vite/src/export-mocks/link/index.test.tsx
• code/frameworks/nextjs-vite/src/export-mocks/link/index.tsx
• code/frameworks/nextjs/src/export-mocks/link/index.test.tsx
• code/frameworks/nextjs/src/export-mocks/link/index.tsx

---

📝 Walkthrough

Walkthrough

This PR adds support for the as prop in the Next.js Link mocks for both nextjs and nextjs-vite frameworks. The component now treats as as an override for the link target, resolving the final URL from as ?? href. Object-form URLs are stringified with pathname, query parameters, and hash components. Both implementations are covered by comprehensive tests.

Changes

Link mock as prop support

Layer / File(s)	Summary
nextjs-vite Link mock as prop implementation and tests code/frameworks/nextjs-vite/src/export-mocks/link/index.tsx, code/frameworks/nextjs-vite/src/export-mocks/link/index.test.tsx	The MockLink component destructures the as prop and resolves the target URL from as ?? href. hrefString is built from the resolved value for both string and object forms. Tests verify as string resolution, as object resolution with query serialization, and fallback to href.
nextjs Link mock as prop implementation and tests code/frameworks/nextjs/src/export-mocks/link/index.tsx, code/frameworks/nextjs/src/export-mocks/link/index.test.tsx	The MockLink component now destructures as and computes resolvedHref as as ?? href. hrefString is derived from resolvedHref with pathname, query, and hash handling. Tests verify as string and object resolution including query parameters, and fallback behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• storybookjs/storybook#34736: Earlier PR that added the MockLink component to nextjs-vite framework, which this PR extends with as prop support.

---

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

[storybook-app-bot]

Package Benchmarks

^{Commit: 66cf992, ran on 16 June 2026 at 14:25:38 UTC}

No significant changes detected, all good. 👏