Fix(nextjs): Alias AppRouterContext to shared runtime to fix Link navigation

[pallaprolus]

Closes #30390

What I did

This PR addresses an issue where the Next.js Link component triggers a full page reload (often leading to a 404) instead of performing client-side navigation within Storybook when using Next.js 15.
The root cause was a context mismatch: The Link component in newer Next.js versions imports AppRouterContext from next/dist/shared/lib/app-router-context.shared-runtime.js, while Storybook was not explicitly aliasing this path to the same instance used by its Mock Provider. This resulted in two different Context objects, so Link couldn't see the router provided by Storybook.

Added a Webpack alias in [code/frameworks/nextjs/src/aliases/webpack.ts] to forcibly resolve next/dist/shared/lib/app-router-context and its .shared-runtime variant to the same module. This ensures that both the Consumer (Link) and the Provider (AppRouterProvider) share the exact same Context instance.

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!

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

• Chores
  • Updated Webpack configuration aliases for the Next.js framework.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds two new Webpack alias mappings to the Next.js configuration: a self-referential alias for the shared-runtime variant and a redirect mapping to route app-router-context imports to the shared-runtime version.

Changes

Cohort / File(s)	Summary
Webpack Configuration Alias Mappings code/frameworks/nextjs/src/aliases/webpack.ts	Added two alias entries: one self-referential mapping for next/dist/shared/lib/app-router-context.shared-runtime and one redirect mapping next/dist/shared/lib/app-router-context to the shared-runtime variant.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3e34a28 and e39986a.

📒 Files selected for processing (1)

• code/frameworks/nextjs/src/aliases/webpack.ts

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

• code/frameworks/nextjs/src/aliases/webpack.ts

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

• code/frameworks/nextjs/src/aliases/webpack.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

• code/frameworks/nextjs/src/aliases/webpack.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/frameworks/nextjs/src/aliases/webpack.ts

code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

• code/frameworks/nextjs/src/aliases/webpack.ts

🧠 Learnings (1)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: normal

🔇 Additional comments (1)

code/frameworks/nextjs/src/aliases/webpack.ts (1)

17-20: No changes needed—the alias configuration is correct as-is.

The redirect alias (lines 19-20) correctly forces both import paths to resolve to the same shared-runtime module, ensuring a singleton Context instance and fixing Link navigation. The self-referential alias (lines 17-18) is not redundant; it locks the resolution path to prevent interference from other alias patterns in Webpack's resolution order, which is a necessary pattern when multiple aliases could match.

---

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 and usage tips.}

[storybook-app-bot]

Package Benchmarks

^{Commit: e39986a, ran on 29 December 2025 at 14:19:13 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	49	49	0
Self size	20.19 MB	19.92 MB	🎉 -273 KB 🎉
Dependency size	16.52 MB	16.52 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	775 KB	775 KB	🎉 -152 B 🎉
Dependency size	67.24 MB	66.97 MB	🎉 -273 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	30 KB	30 KB	0 B
Dependency size	65.82 MB	65.54 MB	🎉 -273 KB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	50	50	0
Self size	999 KB	999 KB	0 B
Dependency size	36.71 MB	36.44 MB	🎉 -273 KB 🎉
Bundle Size Analyzer	node	node