Nextjs-Vite: Add Next.js 15 support #29640
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 6a1bbc4. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
18 file(s) reviewed, 8 comment(s)
Edit PR Review Bot Settings | Greptile
| @@ -99,16 +99,16 @@ | |||
| "@storybook/react": "workspace:*", | |||
| "@storybook/test": "workspace:*", | |||
| "styled-jsx": "5.1.6", | |||
| "vite-plugin-storybook-nextjs": "^1.0.11" | |||
| "vite-plugin-storybook-nextjs": "1.1.0--canary.27.f775ea2.0" | |||
There was a problem hiding this comment.
style: using a canary version in production dependencies could be unstable - consider waiting for a stable release
|
|
||
| // mock utilities/overrides (as of Next v14.2.0) | ||
| export { headers } from './headers'; | ||
| export { cookies } from './cookies'; | ||
|
|
||
| // passthrough mocks - keep original implementation but allow for spying | ||
| const draftMode = fn(originalHeaders.draftMode).mockName('draftMode'); | ||
| const draftMode = fn(originalDraftMode ?? (headers as any).draftMode).mockName('draftMode'); |
There was a problem hiding this comment.
style: consider adding type assertion for headers.draftMode to avoid using any
| </p> | ||
| ); | ||
| })} | ||
| {(await cookies()).getAll().map(({ name, value }) => { |
There was a problem hiding this comment.
logic: potential race condition between getting cookies and rendering - cookies().getAll() is called on each render
|
|
||
| export const RSC = async ({ label }: { label: string }) => <>RSC {label}</>; | ||
|
|
||
| export const Nested = async ({ children }: any) => <>Nested {children}</>; |
There was a problem hiding this comment.
style: children prop uses 'any' type which loses type safety. Consider using PropsWithChildren or ReactNode type instead
| @@ -16,13 +16,13 @@ export async function accessRoute() { | |||
| } | |||
|
|
|||
| export async function logout() { | |||
| cookies().delete('user'); | |||
| (await cookies()).delete('user'); | |||
There was a problem hiding this comment.
style: check that cookie exists before attempting to delete it
| revalidatePath('/'); | ||
| redirect('/'); | ||
| } | ||
|
|
||
| export async function login() { | ||
| cookies().set('user', 'storybookjs'); | ||
| (await cookies()).set('user', 'storybookjs'); |
There was a problem hiding this comment.
style: verify cookie is set successfully before proceeding with redirect
| 'experimental-nextjs-vite/14-ts': { | ||
| name: 'Next.js Latest (Vite | TypeScript)', | ||
| script: |
There was a problem hiding this comment.
logic: template name 'Next.js Latest' is misleading since this is specifically for Next.js 14
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 46 | 46 | 0 |
| Self size | 19.24 MB | 19.08 MB | 🎉 -169 KB 🎉 |
| Dependency size | 14.29 MB | 14.29 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/experimental-nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 87 | 87 | 0 |
| Self size | 230 KB | 231 KB | 🚨 +161 B 🚨 |
| Dependency size | 31.03 MB | 31.30 MB | 🚨 +269 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 47 | 47 | 0 |
| Self size | 22 KB | 22 KB | 0 B |
| Dependency size | 33.54 MB | 33.37 MB | 🎉 -169 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
sb
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 48 | 48 | 0 |
| Self size | 1 KB | 1 KB | 0 B |
| Dependency size | 33.56 MB | 33.39 MB | 🎉 -169 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 390 | 390 | 0 |
| Self size | 483 KB | 483 KB | 🎉 -282 B 🎉 |
| Dependency size | 74.60 MB | 74.43 MB | 🎉 -172 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 270 | 270 | 0 |
| Self size | 612 KB | 612 KB | 0 B |
| Dependency size | 64.60 MB | 64.43 MB | 🎉 -169 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 105 | 105 | 0 |
| Self size | 1.11 MB | 1.11 MB | 🎉 -3 KB 🎉 |
| Dependency size | 42.54 MB | 42.37 MB | 🎉 -169 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
yannbf
force-pushed
the
yann/next-15-support-vite
branch
2 times, most recently
from
3521df0
to
81d586b
Compare
yannbf
force-pushed
the
yann/next-15-support-vite
branch
from
81d586b
to
1b72459
Compare
yannbf
force-pushed
the
yann/next-15-support-vite
branch
from
404771c
to
e762e5d
Compare
yannbf
force-pushed
the
yann/next-15-support-vite
branch
from
fc4db5e
to
8173350
Compare
This reverts commit 8173350.
yannbf
added
the
patch:yes
Nextjs-Vite: Add Next.js 15 support (cherry picked from commit 9794e35)
github-actions
bot
added
the
patch:done
Closes #
What I did
This PR adds Next.js 15 support to the nextjs-vite framework. This requires changes in the vite-plugin-next repo which are accounted for in storybookjs/vite-plugin-storybook-nextjs#27
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 pull request has been released as version
0.0.0-pr-29640-sha-e762e5df. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-29640-sha-e762e5dfyann/next-15-support-vitee762e5df1732031795)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=29640Greptile Summary
Added support for Next.js 15 in Storybook's experimental Next.js Vite framework, with key updates to package dependencies, compatibility layers, and template stories.
package.jsonto support Next.js 15 with peer dependencies^14.1.0 || ^15.0.0and updatedvite-plugin-storybook-nextjsto canary versionNextHeader.tsxandServerActions.tsxfor Next.js 15's asynchronous cookies/headers APIsdraftModeindraft-mode.compat.tsto handle Next.js version differencesexperimental-nextjs-vite/14-tswhile updatingdefault-tsfor latest Next.js version