fix(nextjs-vite): add Next.js 16 internal modules to optimizeDeps

[jshaofa-ui]

Summary

Fixes the ServerInsertedHTMLContext and RedirectStatusCode missing exports error when using Storybook with Next.js 16 + Vite 8 in dev mode.

Problem

Vite 8's esbuild pre-bundler doesn't correctly resolve Next.js 16's internal re-export chains from next/navigation. This causes a SyntaxError during development:

SyntaxError: The requested module '...node_modules/.cache/storybook/...' does not provide an export named 'ServerInsertedHTMLContext'

The issue only occurs in dev mode (esbuild pre-bundling) — production builds work fine because Rollup handles CJS/ESM interop differently.

Root Cause

next/navigation and related Next.js internal modules are not included in Storybook's optimizeViteDeps configuration, so Vite's pre-bundler doesn't process them correctly.

Fix

Added next/navigation and next/dist/client/components/redirect-error to the optimizeViteDeps array in code/frameworks/nextjs-vite/src/preset.ts.

Changes

• File: code/frameworks/nextjs-vite/src/preset.ts
• Change: Added 2 Next.js 16 internal modules to optimizeViteDeps

Testing

• Issue reproduction: https://github.com/JaeHye0k/storybook_next_vite_error_reproduction
• The fix forces Vite to pre-bundle Next.js navigation modules correctly
• No changes to production build behavior (Rollup already handles this correctly)

Fixes #34688

Summary by CodeRabbit

• Refactor
  • Updated Next.js and Vite preset configuration to improve build module handling and performance.
  • Enhanced build optimization for additional Next.js internal modules.

[coderabbitai]

Caution

Review failed

The head commit changed during the review from 32932a0 to a145f12.

📝 Walkthrough

Walkthrough

The Next.js-Vite preset module is refactored to define the core preset as a static object with builder and renderer paths resolved via import.meta.resolve, and extended dependency pre-bundling configuration for Next.js internal modules.

Changes

Next.js-Vite Framework Integration

Layer / File(s)	Summary
Core preset static structure with import.meta.resolve code/frameworks/nextjs-vite/src/preset.ts	The core preset export transitions from an async function that merged configuration to a static preset object defining builder and renderer via import.meta.resolve with TypeScript module path specifiers.
Vite dependency pre-bundling extensions code/frameworks/nextjs-vite/src/preset.ts	The optimizeViteDeps array is extended with next/navigation and next/dist/client/components/redirect-error to pre-bundle additional Next.js internal modules.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• storybookjs/storybook#33577: Both PRs add modules to the optimizeViteDeps array in the same preset file for Vite pre-bundling configuration.
• storybookjs/storybook#33875: Both PRs extend the optimizeViteDeps array in preset.ts to include framework-specific Next.js modules.

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

code/frameworks/nextjs-vite/src/preset.ts (1)

13-15: 💤 Low value

Unrelated refactoring: explicit file extensions.

These import changes are unrelated to the Next.js 16 dev-mode fix described in the PR objectives. While they align with the coding guideline to use explicit .ts extensions, they broaden the PR scope unnecessarily. Consider isolating unrelated refactoring to separate PRs for cleaner history.

As per coding guidelines, for TypeScript source in the repo, prefer explicit file extensions for relative code imports and exports.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/frameworks/nextjs-vite/src/preset.ts` around lines 13 - 15, The import
changes in preset.ts (normalizePostCssConfig, FrameworkOptions,
getNextjsVersion) introduce unrelated refactoring (adding explicit .ts
extensions) that should not be mixed with the Next.js 16 dev-mode fix; revert
those import edits so the PR only contains the intended bugfix, or move the
extension changes into a separate cleanup PR. Locate the imports for
normalizePostCssConfig, FrameworkOptions, and getNextjsVersion in preset.ts and
restore their previous import specifiers (remove the explicit .ts extensions) or
split the file changes into two commits/PRs so the refactor is isolated from the
bugfix.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@code/frameworks/nextjs-vite/src/preset.ts`:
- Around line 13-15: The import changes in preset.ts (normalizePostCssConfig,
FrameworkOptions, getNextjsVersion) introduce unrelated refactoring (adding
explicit .ts extensions) that should not be mixed with the Next.js 16 dev-mode
fix; revert those import edits so the PR only contains the intended bugfix, or
move the extension changes into a separate cleanup PR. Locate the imports for
normalizePostCssConfig, FrameworkOptions, and getNextjsVersion in preset.ts and
restore their previous import specifiers (remove the explicit .ts extensions) or
split the file changes into two commits/PRs so the refactor is isolated from the
bugfix.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9a02c733-e389-490f-8906-628ebe0e9c84

📥 Commits

Reviewing files that changed from the base of the PR and between b8748e4 and 2c8c5db.

📒 Files selected for processing (1)

• code/frameworks/nextjs-vite/src/preset.ts

[jshaofa-ui]

Thanks for the CodeRabbit review! The import extension changes in preset.ts were part of the broader refactor to use import.meta.resolve. I can split those into a separate commit if needed, but they're consistent with the Storybook coding guidelines for TypeScript source.

The core fix is the optimizeViteDeps additions for Next.js 16 internal modules. The import changes are a natural consequence of switching to import.meta.resolve for path resolution.

Could a maintainer review this PR? The fix addresses the ServerInsertedHTMLContext missing export issue reported in #34688.

[valentinpalkovic]

Thanks for the fix, @jshaofa-ui! After review, the root cause lives in the vite-plugin-storybook-nextjs package (the Vite plugin powering @storybook/nextjs-vite), not in Storybook's framework preset. The optimizeDeps.include list there is the correct, single place for these Next.js 16 pre-bundling entries.

I've ported your change to that repository with a changeset: storybookjs/vite-plugin-storybook-nextjs#NEW_PR (link to follow). Once it's released, the fix flows into Storybook automatically. Closing this in favor of that PR — appreciate the contribution and the clear root-cause writeup in #34688!

[valentinpalkovic]

Follow-up: the replacement PR is storybookjs/vite-plugin-storybook-nextjs#123 — storybookjs/vite-plugin-storybook-nextjs#123 (your change ported there with a changeset, credited to you).