Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0e4a53c9b7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
50d041f to
88f1fda
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 88f1fda31b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6db52b905f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Deploying storybook-rsbuild-v2 with
|
| Latest commit: |
c040a20
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1e190f0f.storybook-rsbuild-v2.pages.dev |
| Branch Preview URL: | https://feat-framework-next.storybook-rsbuild-v2.pages.dev |
Deploying storybook-rsbuild with
|
| Latest commit: |
c040a20
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e3ab28f3.storybook-rsbuild.pages.dev |
| Branch Preview URL: | https://feat-framework-next.storybook-rsbuild.pages.dev |
storybook-addon-modernjs
storybook-addon-rslib
storybook-builder-rsbuild
storybook-html-rsbuild
storybook-next-rsbuild
storybook-react-rsbuild
storybook-react-native-web-rsbuild
storybook-vue3-rsbuild
storybook-web-components-rsbuild
rsbuild-plugin-react-native-web
commit: |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a7816cced0
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a4a16ebb7b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 47f1f0ca65
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 85da3200d4
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d6d3c58220
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
93c6688 to
1a16b24
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1a16b2424f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 55ac33e062
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9b962d71ae
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0de8d510ae
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
0de8d51 to
22013ff
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 22013ff7b2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e10547b65f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 82db2045ec
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f48510861a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8e599ff7c4
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
8e599ff to
e436d6c
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e436d6cb94
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Define behavior in user terms instead of leaking bridge internals: drop unexplained 'bridge' terminology, NormalModule/DefinePlugin/IPC details, and the AGENTS.md four-party-contract link. Rename two sections (Custom webpack settings, Custom loaders (SVGR)) and convert the per-field carry-over info block to a table plus prose. Fix two Rspress directive parsing issues: a callout whose content starts with a list renders as raw text, and callout titles cannot contain backticks — demote the postcss block to a heading and the mock caveats to plain content. Claude-Session: https://claude.ai/code/session_017U7Ds8tunz37W53JmwCkGU
parameters.nextjs.image.loader was silently overwritten by the framework default loader whenever the component itself passed no loader prop, while the docs advertise loader in the nextjs.image parameters table. Precedence is now prop > per-story parameter > framework default, in both the next/image and next/legacy/image mocks. Deliberate divergence from the upstream port (upstream skips straight to its default), marked with an in-file comment. Reported by Codex review on PR #471. Claude-Session: https://claude.ai/code/session_017U7Ds8tunz37W53JmwCkGU
…mmand A bare next-rspack install pulls the registry's latest, which the startup check rejects whenever the project's next is not the newest supported release; and the matrix-selected @rsbuild/core was missing from the install command entirely. Show a fully version-qualified example and explain how to adapt it. Reported by Codex review on PR #471. Claude-Session: https://claude.ai/code/session_017U7Ds8tunz37W53JmwCkGU
… storybook 10.5.0
…sandbox to 16.2.3
…devDeps to 16.2.3
…bject route params
…orce exact next-rspack pairing
5e9bbdf to
e735289
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e735289c20
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| this.emitFile(outputPath, content) | ||
|
|
||
| if (disableStaticImages) { | ||
| return `const src = '${outputPath}'; export default src;` |
There was a problem hiding this comment.
Serialize emitted image paths before generating JavaScript
When images.disableStaticImages is enabled and an imported image's path contains a valid JavaScript delimiter such as an apostrophe (for example kid's.png), interpolating outputPath directly into this single-quoted module produces invalid JavaScript and aborts the Storybook build. Serialize the value with JSON.stringify, as the StaticImageData branch already does.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fcb6e00b52
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| import('next/constants.js'), | ||
| import('next/dist/trace/index.js'), | ||
| import('next/dist/server/config.js'), | ||
| import('next/dist/build/webpack-config.js'), | ||
| import('next/dist/lib/find-pages-dir.js').catch(() => null), |
There was a problem hiding this comment.
Resolve Next internals from the selected project
When nextConfigPath targets a different workspace package than the one containing Storybook, these bare dynamic imports resolve relative to storybook-next-rsbuild rather than projectDir. Consequently, the invariant can validate the target app's next/next-rspack pair while extraction actually invokes another hoisted or peer-resolved Next copy, producing rules and plugins for the wrong version or failing to find its matching next-rspack; resolve these specifiers through a createRequire rooted at the selected project.
AGENTS.md reference: packages/framework-next/AGENTS.md:L170-L172
Useful? React with 👍 / 👎.
| const congruentUser = sameTest.find((u) => | ||
| rulesCongruentForDedup(r, u), | ||
| ) |
There was a problem hiding this comment.
Preserve distinct loaders on congruent rules
When next.config.webpack() and Storybook's webpackFinal intentionally add different loaders for the same test and scope, rulesCongruentForDedup returns true without comparing either rule's use/loader, and this branch deletes the Next-config rule. Webpack/Rspack normally composes such loader rules, so configurations such as a transform in Next config plus a separate instrumentation loader in webpackFinal silently lose the first transform; only deduplicate rules whose loader behavior is actually equivalent.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7e5b2e0b54
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| ) | ||
| return `@font-face { | ||
| font-family: ${id}; | ||
| src: url(.${localFontPath}); |
There was a problem hiding this comment.
Emit local font files before referencing them
When a component uses next/font/local, this generated CSS points the browser at a project-relative source path such as /src/fonts/foo.woff2, but the loader never imports or emits that file. Rsbuild therefore does not include the font in its output, and a static Storybook build returns 404 unless the user separately exposes the source directory through staticDirs, contradicting the documented no-configuration behavior. Emit the font as a bundler asset and use its public URL in the generated @font-face rule.
Useful? React with 👍 / 👎.
| export interface NextJsParameters { | ||
| nextjs?: { | ||
| /** Next.js navigation configuration for next/navigation (app directory). */ | ||
| navigation?: Partial<NextRouter> |
There was a problem hiding this comment.
Type App Router parameters with their supported shape
When a typed story uses the documented App Router configuration, such as navigation: { segments: [['address', '0xdeadbeef']] }, satisfies Meta rejects it because segments is not a NextRouter property; App Router action overrides such as refresh are similarly absent while Pages Router-only fields are accepted. The documentation currently has to suppress errors for its segments example, so define a dedicated navigation parameter type matching the pathname/query/segments fields and actions consumed by AppRouterProvider and createNavigation.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c040a20e74
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| navigationAPI = { | ||
| ...navigationActions, | ||
| bfcacheId: '0', |
There was a problem hiding this comment.
Align the mocked bfcache ID with the e2e contract
When the Next.js sandbox renders its default navigation story, useRouter() receives this object directly from AppRouterContext, so the page displays bfcacheId: 0; however, e2e/tests/nextjs.spec.ts waits for bfcacheId: _b_0_. The Next.js e2e suite therefore deterministically times out at that assertion. Return the intended _b_0_ value here or update the test if '0' is the actual contract.
AGENTS.md reference: AGENTS.md:L98-L107
Useful? React with 👍 / 👎.
Summary
Adds
storybook-next-rsbuild— a new Storybook framework package for Next.js, powered bynext-rspack.Bridge, don't simulate
Rather than manually reconstructing Next.js's build pipeline the way
@storybook/nextjs(webpack) and@storybook/nextjs-vitedo, this framework invokes Next.js's owngetBaseWebpackConfig()withNEXT_RSPACK=trueand cherry-picks six fields (alias,fallback,defines,resolveLoader,rawRules,rawPlugins) into Rsbuild viarsbuildFinal. The loader chain, SWC options, aliases, and defines are all produced by Next.js itself, so they follow Next.js releases automatically.This shifts maintenance from tracking 35+
next/dist/*internal paths to adapting one function signature per Next.js major. Bridging is structurally possible only on the Rspack side (Rspack is webpack-API-compatible; Vite/Turbopack are not).See
packages/framework-next/AGENTS.mdfor the full design guide: the four-party contract (Next.js / Rspack / Rsbuild / Storybook) and who wins each conflict, design trade-offs, and a shim catalogue with a "remove when" condition for every shim.What the bridge covers
builtin:swc-loaderis rewired to Next.js's loader chain so'use client',server-only, the JSX runtime, andnext/dynamicbehave natively.react/react-domaliases are stripped so React stays a singleton..css/.scssstay on Rsbuild's loaders. The only Next.js CSS concern kept isnext/font, whose synthetictarget.cssis routed to a dedicated font loader ported from@storybook/nextjs(injects@font-face/class CSS at runtime). A root-absolute /data:/https:url()passthrough filter mirrors Next'scssFileResolve.getBaseWebpackConfig({ dev })is called in the same mode Storybook builds for, so prod never emits dev artefacts — deleting the fragile post-hoc React-Refresh stripping that used to re-leak$ReactRefreshRuntime$into prod via every newoneOfbranch.next.configdeltas: userwebpack()mutations are diffed and forwarded — appended rules (bare loader names viaresolveLoader.modules), mutated Next rules,resolve.alias,resolve.fallback— withforwardNextConfigPlugins: falseby default (user plugins crash rspack IPC).optimizePackageImports: the__barrel_optimize__?names=…!=!<pkg>matchResource(which bypasses Rsbuild's.tsx?rule) is routed through the SWC shim chain so TS-source barrels (e.g.@mui) compile instead of being parsed as raw JS.fs/path/… get afalsefallback floor;node:-prefixed imports are normalized to bare names before resolution (StripNodeProtocolPlugin), so they resolve to empty modules instead of crashing at render.@rsbuild/coreis a peer, with a runtime invariant (check-rspack-invariant.ts) that aborts when its@rspack/corediffers from the onenext-rspackbrings in.Runtime decorators
Routing, head-manager, images, styled-jsx, and export-mocks are ported from
@storybook/nextjs-viteand carry// Port: <upstream-path>/// Adapted from <upstream-path>markers, so upstream sync is a one-line grep.Regression coverage distilled from a community gauntlet
A set of real-world community Next.js projects (transit, oak, console, proposalsapp, anticapture, safe-wallet, t-performance-dash, usaco-guide) was used as an out-of-tree build gauntlet. Because those projects aren't committed, their regression value is distilled into permanent tests so the bridge can't silently regress:
isRuntimeCssUrl,withRuntimeUrlFilter,makeFontRule,makeBarrelRule,mergeFallback,ruleTestSignature,NODE_BUILTINS_FALLBACK), each case tied to the gauntlet project that surfaced it.sandboxes/nextjsstories + Playwright e2e for: App Router + Pages Router,next/font(Google + CSS-variable),next/image(local/remote/fill/blur/priority),next/dynamic,next/navigation+next/head, CSS Modules, global CSS, root-absolute &data:CSS URLs, styled-jsx, styled-components,@emotion, Tailwind, SCSS modules,optimizePackageImports,transpilePackages, and usernext.configwebpack deltas (SVGR loader, alias, fallback, DefinePlugin).sandboxes/nextjs-barrel(TS re-export barrel) andsandboxes/nextjs-transpiledreproduce the__barrel_optimize__-over-TS andtranspilePackagescases as committed fixtures.Docs
website/docs/en/guide/framework/next.mdx(with a Simplified Chinese mirror atwebsite/docs/zh/guide/framework/next.mdx) — organized around a configuration mental model (who owns what: Next.js compiles JS/TS & resolves modules, Rsbuild owns the CSS pipeline, Storybook owns the preview & React singleton). Covers setup, the@rsbuild/core↔next-rspackversion matrix, supportednext/*features, routing & navigation, styling, mocking, runtime config, and known limitations. Wherever runtime behavior matches upstream it links out to the official@storybook/nextjs-vitedocs instead of re-documenting — the one thing that never carries over is build/bundler config (drive it throughnext.config.ts+rsbuildFinal/webpackFinal, notviteFinal).Compatibility
next@^15.3.0 || ^16.0.0,next-rspack(kept on the same version asnext),react@^18 || ^19,storybook@^10.3.5.@rsbuild/core@^1.3.6is a peer dependency, version-matched to the@rspack/corethatnext-rspackbrings in (enforced at startup bycheck-rspack-invariant.ts).Test plan
All boxes below except the
pnpm devsmoke check are verified green by CI on the current HEAD (lint,check,check-dependency-version,build,build:sandboxes,test,build:test,e2eacross Node 20/22 × ubuntu/macos/windows).sandboxes/nextjsstories render without runtime errors (asserted bye2e+build:sandboxes)next/navigation) and Pages Router (next/router) stories both worknext/font,next/image,styled-jsx, CSS Modules render correctlypnpm --filter @sandboxes/nextjs devruns the underlying Next.js app without errors (manual smoke check — not run in CI)pnpm exec rstest packages/framework-next(bridge-primitive unit tests) passespnpm e2e nextjs.spec.tspassespnpm lint,pnpm check,pnpm check-dependency-versionpasspnpm buildandpnpm build:sandboxespass