Nextjs: Add Next v16 support #32791
Nextjs: Add Next v16 support #32791
Conversation
yannbf
added
feature request
nextjs
ci:daily
📝 WalkthroughWalkthroughAdds a new CircleCI story-tests job and wires it into existing workflows with adjusted parallelism; reformats the main CircleCI config; expands Next.js peer support to v16 and updates a vite plugin dependency; adds Next.js v15 sandbox templates; and fixes an import path in a renderer story. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant WF as CircleCI Workflow
participant Build as build job
participant Stories as stories-tests job
participant Workspace as Workspace
participant Store as store_test_results
rect rgb(220,235,255)
WF->>Build: trigger (concurrent/required)
Build-->>WF: success
end
rect rgb(235,255,220)
WF->>Stories: start (requires: build)
Stories->>Workspace: attach workspace
Stories->>Stories: checkout (shallow)
Stories->>Stories: run yarn test (parallelism 2)
Stories->>Store: write JUnit to test-results/junit-${CIRCLE_NODE_INDEX}.xml
Stories->>Store: store_artifacts & test-results
Stories-->>WF: success/failure
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (3)
Comment |
|
View your CI Pipeline Execution ↗ for commit 1ef78b6
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
.github/workflows/generate-sandboxes.yml (1)
77-127: Incomplete testing setup:generate-mainjob should be commented out per instructions.The comment block at lines 7-14 instructs developers to "Comment out the whole 'generate-main' job starting at line 77" during testing. However, the job remains uncommented in this PR, which will cause both the
generate-nextandgenerate-mainjobs to run, defeating the purpose of the temporary testing workflow.This suggests either the testing instructions were not fully followed, or the changes were not properly reverted before submitting the PR.
Apply this diff to comment out the
generate-mainjob:- generate-main: + # generate-main: name: Generate to main runs-on: ubuntu-latest steps:(Or fully remove the job if you've completed testing and are reverting all temporary changes.)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (9)
.circleci/config.yml(1 hunks).circleci/src/jobs/stories-tests.yml(1 hunks).circleci/src/workflows/daily.yml(1 hunks).circleci/src/workflows/merged.yml(2 hunks).circleci/src/workflows/normal.yml(2 hunks).github/workflows/generate-sandboxes.yml(2 hunks)code/frameworks/nextjs-vite/package.json(2 hunks)code/frameworks/nextjs/package.json(1 hunks)code/lib/cli-storybook/src/sandbox-templates.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/frameworks/nextjs/package.jsoncode/frameworks/nextjs-vite/package.jsoncode/lib/cli-storybook/src/sandbox-templates.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/lib/cli-storybook/src/sandbox-templates.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/lib/cli-storybook/src/sandbox-templates.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/lib/cli-storybook/src/sandbox-templates.ts
🧠 Learnings (1)
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Applied to files:
.circleci/src/workflows/daily.yml
⏰ 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). (5)
- GitHub Check: Danger JS
- GitHub Check: daily
- GitHub Check: Core Unit Tests, windows-latest
- GitHub Check: Generate to main
- GitHub Check: Generate to next
🔇 Additional comments (15)
.github/workflows/generate-sandboxes.yml (1)
1-1: PR appears incomplete — verify readiness for review and merge.Based on the PR objectives, this PR has several completeness gaps:
- The "What I did" section of the contribution template is empty
- Automated test checkboxes are unchecked (stories, unit tests, integration, e2e)
- Manual testing section is empty
- Documentation updates are not indicated
- No linked issue number provided
Combined with the temporary testing configuration above, this suggests the PR may still be in active development. Please confirm whether this PR is ready for review or if it needs more work before it can be merged.
code/frameworks/nextjs/package.json (1)
130-130: LGTM! Next.js 16 peer dependency added.The peer dependency update correctly adds Next.js 16 support while maintaining backward compatibility with versions 14.1.0 and 15.0.0.
code/frameworks/nextjs-vite/package.json (2)
97-97: LGTM! Next.js 16 peer dependency added.The peer dependency update correctly adds Next.js 16 support, consistent with the change in
code/frameworks/nextjs/package.json.
86-86: Based on the npm registry and GitHub investigation:Verify and document Next.js version requirement before final release.
The pinned canary version
2.1.0--canary.62.972e98b.0is confirmed as a pre-release, with stable version 2.0.8 available. As of October 2025, @storybook/nextjs-vite only supports Next.js 14 or 15, and Next.js 16 support is still being worked on.While the canary version suggests Next.js 16 compatibility work is underway, the decision to pin a pre-release in a framework package warrants:
- Confirming this project requires Next.js 16 (or that stable 2.0.8 is insufficient)
- Documenting the stability status and any known issues
- Establishing a timeline to migrate to stable once released
code/lib/cli-storybook/src/sandbox-templates.ts (3)
180-201: Review template configuration and version constraints.The new Next.js 15 webpack template looks mostly good, but there are a couple of items to verify:
Version constraint: Line 183 uses
create-next-app@^15.5, which is more restrictive than thenextjs-vite/15-tstemplate at line 272 that uses@^15. Is the.5patch requirement intentional for the webpack version?skipTasks alignment: This template skips
vitest-integration(line 200), which is consistent with the webpack-basednextjs/14-tstemplate (line 178).Verify that the version constraint
@^15.5is intentional and required for the webpack-based Next.js 15 setup.
269-291: Verify skipTasks consistency for vitest-integration.The new Next.js 15 Vite template has a different
skipTasksconfiguration compared to similar templates:
nextjs-vite/15-ts(line 290): skips['e2e-tests', 'bench']nextjs-vite/14-ts(line 267): skips['e2e-tests', 'bench']nextjs/15-ts(line 200): skips['e2e-tests', 'bench', 'vitest-integration']nextjs/14-ts(line 178): skips['e2e-tests', 'bench', 'vitest-integration']The pattern shows that Vite-based templates don't skip
vitest-integration, while webpack-based ones do. This appears consistent, but please confirm this is intentional.
899-900: LGTM! Templates correctly registered in workflow cadences.The new Next.js 15 templates are properly added to the
mergedanddailyworkflow cadences, following the established pattern for progressive rollout.Also applies to: 913-914
.circleci/src/workflows/normal.yml (2)
24-26: LGTM! New stories-tests job properly integrated.The new
stories-testsjob is correctly added with a dependency on thebuildjob, consistent with the pattern used in themergedanddailyworkflows.
45-45: Parallelism rebalanced for better resource utilization.The parallelism adjustments appear reasonable:
e2e-production: reduced from 8 to 6e2e-dev: increased from 1 to 8The significant increase in
e2e-devparallelism (1→8) should improve test execution time.Also applies to: 49-49
.circleci/src/workflows/merged.yml (2)
24-26: LGTM! New stories-tests job properly integrated.The
stories-testsjob is correctly added to the merged workflow, maintaining consistency with thenormalanddailyworkflows.
37-37: Parallelism adjustments accommodate expanded test coverage.The parallelism updates across multiple jobs reflect the addition of new Next.js 15 templates and the
stories-testsjob:
create-sandboxes: increased to 19chromatic-sandboxes: increased to 16e2e-dev: increased to 14test-runner-production: increased to 14vitest-integration: increased to 6These adjustments should help maintain reasonable CI execution times with the expanded test matrix.
Also applies to: 41-41, 45-45, 49-49, 53-53, 57-57
.circleci/src/workflows/daily.yml (2)
24-26: LGTM! New stories-tests job properly integrated.The
stories-testsjob is correctly added to the daily workflow, completing the consistent rollout across all three main CI workflows.
34-34: Significant parallelism adjustments reflect expanded test matrix.The daily workflow shows substantial parallelism changes to accommodate the new templates and test job:
create-sandboxes: increased to 34 (from 30)chromatic-sandboxes: increased to 31 (from 27)e2e-production: decreased to 7 (from 25) — significant reductione2e-dev: increased to 29 (from 1) — major increasetest-runner-production: increased to 29 (from 25)vitest-integration: increased to 11 (from 9)The dramatic shift from
e2e-productiontoe2e-devparallelism suggests a strategic rebalancing of test coverage. This is reasonable if dev-mode testing has become more comprehensive.Also applies to: 41-41, 45-45, 49-49, 53-53, 57-57
.circleci/src/jobs/stories-tests.yml (1)
1-9: LGTM! Job configuration is well-structured.The job properly:
- Uses an xlarge Playwright executor with parallelism 2
- Performs shallow checkout for efficiency
- Attaches the workspace from the build job
- Stores test results and includes failure reporting/cancellation
Also applies to: 16-19
.circleci/config.yml (1)
1-1177: LGTM! Generated configuration file reflects source changes.This file appears to be a generated CircleCI config. The changes consist primarily of reformatting and indentation normalization, with the functional addition of the
stories-testsjob (lines 550-569) matching the source definition already reviewed in.circleci/src/jobs/stories-tests.yml.Since this is a generated file, the substantive review was performed on the source files in
.circleci/src/.
| - run: | ||
| command: | | ||
| cd code | ||
| TEST_FILES=$(circleci tests glob "**/*.{stories}.{ts,tsx,js,jsx,cjs}" | sed "/^e2e-tests\//d" | sed "/^node_modules\//d") | ||
| echo "$TEST_FILES" | circleci tests run --command="xargs yarn test --reporter=junit --reporter=default --outputFile=../test-results/junit-${CIRCLE_NODE_INDEX}.xml" --verbose | ||
| name: Run tests |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the glob pattern matches intended story files.
Line 13 uses the pattern **/*.{stories}.{ts,tsx,js,jsx,cjs}, which appears to have an extra set of braces around stories. This pattern would match filenames like:
Component.stories.ts✓Component.stories.tsx✓
However, the typical pattern for story files would be **/*.stories.{ts,tsx,js,jsx,cjs} (without braces around stories). The current pattern should still work but is unconventional.
Please verify:
- The glob pattern correctly matches all intended story test files
- Whether the braces around
{stories}are necessary
You can test the pattern with:
🏁 Script executed:
#!/bin/bash
cd code
# Test current pattern
echo "Files matched by current pattern:"
find . -name "*.stories.ts" -o -name "*.stories.tsx" -o -name "*.stories.js" -o -name "*.stories.jsx" -o -name "*.stories.cjs" | head -10
# Verify circleci glob works as expected
circleci tests glob "**/*.{stories}.{ts,tsx,js,jsx,cjs}" 2>/dev/null | head -10 || echo "Pattern test"Length of output: 549
---
🏁 Script executed:
```shell
#!/bin/bash
# Test glob pattern expansion to confirm both patterns are functionally equivalent
# Create test directory structure
TEST_DIR=$(mktemp -d)
mkdir -p "$TEST_DIR/test"
touch "$TEST_DIR/test/Component.stories.ts"
touch "$TEST_DIR/test/Component.stories.tsx"
touch "$TEST_DIR/test/Component.stories.js"
touch "$TEST_DIR/test/Component.stories.jsx"
touch "$TEST_DIR/test/Component.stories.cjs"
# Test pattern 1: current pattern with braces around {stories}
echo "Pattern 1 - With braces around {stories}: **/*.{stories}.{ts,tsx,js,jsx,cjs}"
cd "$TEST_DIR"
shopt -s globstar
shopt -s nullglob
files1=($(cd "$TEST_DIR" && ls -1d **/*.{stories}.{ts,tsx,js,jsx,cjs} 2>/dev/null))
echo "Matched: ${#files1[@]} files"
for f in "${files1[@]}"; do echo " $f"; done
# Test pattern 2: conventional pattern without braces around stories
echo ""
echo "Pattern 2 - Without braces around stories: **/*.stories.{ts,tsx,js,jsx,cjs}"
files2=($(cd "$TEST_DIR" && ls -1d **/*.stories.{ts,tsx,js,jsx,cjs} 2>/dev/null))
echo "Matched: ${#files2[@]} files"
for f in "${files2[@]}"; do echo " $f"; done
# Check if both patterns match the same files
echo ""
if [ "${#files1[@]}" -eq "${#files2[@]}" ]; then
echo "✓ Both patterns match the same number of files"
else
echo "✗ Patterns match different numbers of files"
fi
# Cleanup
rm -rf "$TEST_DIR"
Length of output: 379
🏁 Script executed:
#!/bin/bash
# Verify the actual codebase pattern behavior using find with glob
cd code
echo "=== Testing Pattern 1: **/*.{stories}.{ts,tsx,js,jsx,cjs} ==="
# Count matches using find with the exact extensions
find . -type f \( -name "*.stories.ts" -o -name "*.stories.tsx" -o -name "*.stories.js" -o -name "*.stories.jsx" -o -name "*.stories.cjs" \) 2>/dev/null | wc -l
echo ""
echo "=== Sample files from codebase ==="
find . -type f \( -name "*.stories.ts" -o -name "*.stories.tsx" -o -name "*.stories.js" -o -name "*.stories.jsx" -o -name "*.stories.cjs" \) 2>/dev/null | grep -E "(stories\.(ts|tsx|js|jsx|cjs))$" | head -5Length of output: 361
🌐 Web query:
Does CircleCI glob pattern support brace expansion with single items like {stories}?
💡 Result:
Short answer: No — CircleCI's globbing (used for paths/filters) follows Go's filepath.Match which supports *, ?, and [classes] but not brace expansion; a pattern like {stories} will not perform brace expansion. See CircleCI docs (patterns use Go filepath.Match). [1][2]
Sources:
[1] CircleCI configuration reference — patterns use Go's Glob/Match.
[2] Go path/filepath.Match pattern syntax (shows only '*', '?', and character classes).
Fix the glob pattern — braces are not supported by CircleCI's glob engine.
The pattern **/*.{stories}.{ts,tsx,js,jsx,cjs} is broken. CircleCI's circleci tests glob uses Go's filepath.Match, which does not support brace expansion. The bash test confirmed this: the pattern with {stories} failed to match test files, while the pattern without braces around stories matched all 5 files correctly.
The pattern needs to be rewritten. Go's filepath.Match supports *, ?, and [...] character classes, but not braces. To match multiple file extensions in CircleCI, use a pattern like **/*.stories.ts **/*.stories.tsx (separate patterns) or rely on a different filtering approach (e.g., post-process with sed).
Current pattern will find zero files in the CircleCI environment.
There was a problem hiding this comment.
@yannbf Here's the corrected code for lines 12-14:
command: |
cd code
TEST_FILES=$(circleci tests glob "**/*.stories.ts" "**/*.stories.tsx" "**/*.stories.js" "**/*.stories.jsx" "**/*.stories.cjs" | sed "/^e2e-tests\//d" | sed "/^node_modules\//d")
echo "$TEST_FILES" | circleci tests run --command="xargs yarn test --reporter=junit --reporter=default --outputFile=../test-results/junit-${CIRCLE_NODE_INDEX}.xml" --verboseThe key change is replacing the single pattern with brace expansion:
- ❌
"**/*.{stories}.{ts,tsx,js,jsx,cjs}"(doesn't work - CircleCI glob doesn't support braces) - ✅
"**/*.stories.ts" "**/*.stories.tsx" "**/*.stories.js" "**/*.stories.jsx" "**/*.stories.cjs"(works - separate patterns)
This passes each extension as a separate glob pattern to circleci tests glob, which will correctly find all story files and maintain compatibility with CircleCI's test splitting feature.
This reverts commit 01dd0e2.
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 532 | 532 | 0 |
| Self size | 950 KB | 950 KB | 0 B |
| Dependency size | 58.60 MB | 58.77 MB | 🚨 +164 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 124 | 124 | 0 |
| Self size | 4.10 MB | 4.10 MB | 🎉 -52 B 🎉 |
| Dependency size | 21.64 MB | 21.81 MB | 🚨 +164 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 157 | 157 | 0 |
| Self size | 31 KB | 31 KB | 0 B |
| Dependency size | 23.03 MB | 23.19 MB | 🚨 +160 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 114 | 114 | 0 |
| Self size | 37 KB | 37 KB | 🎉 -24 B 🎉 |
| Dependency size | 19.59 MB | 19.75 MB | 🚨 +160 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 272 | 272 | 0 |
| Self size | 25 KB | 25 KB | 🚨 +18 B 🚨 |
| Dependency size | 43.56 MB | 43.72 MB | 🚨 +160 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 109 | 109 | 0 |
| Self size | 38 KB | 38 KB | 0 B |
| Dependency size | 43.79 MB | 43.94 MB | 🚨 +149 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 187 | 0 |
| Self size | 927 KB | 928 KB | 🚨 +1 KB 🚨 |
| Dependency size | 79.92 MB | 80.08 MB | 🚨 +160 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 169 | 169 | 0 |
| Self size | 35 KB | 35 KB | 🎉 -42 B 🎉 |
| Dependency size | 76.35 MB | 76.51 MB | 🚨 +160 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/preset-react-webpack
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 170 | 170 | 0 |
| Self size | 21 KB | 21 KB | 🎉 -30 B 🎉 |
| Dependency size | 31.05 MB | 31.21 MB | 🚨 +160 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
Closes #
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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/coreteam 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
Chores