-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
Nextjs: New rsc vite framework #32412
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: kasper/nextjs-vite-rsc-base
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
69 files reviewed, 32 comments
|
||
export const RSC = async ({ label }: { label: string }) => <>RSC {label}</>; | ||
|
||
export const Nested = async ({ children }: any) => <>Nested {children}</>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Use proper typing for children prop instead of any
. Consider { children: React.ReactNode }
export const Nested = async ({ children }: any) => <>Nested {children}</>; | |
export const Nested = async ({ children }: { children: React.ReactNode }) => <>Nested {children}</>; |
@@ -0,0 +1,93 @@ | |||
Copyright 2020 The Rubik Filtered Project Authors (https://https://github.com/NaN-xyz/Rubik-Filtered) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
syntax: URL has double https:// protocol - should be https://github.com/NaN-xyz/Rubik-Filtered
Copyright 2020 The Rubik Filtered Project Authors (https://https://github.com/NaN-xyz/Rubik-Filtered) | |
Copyright 2020 The Rubik Filtered Project Authors (https://github.com/NaN-xyz/Rubik-Filtered) |
@@ -0,0 +1,118 @@ | |||
import React, { useRef, useState } from 'react'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Remove unused useRef
import
import React, { useRef, useState } from 'react'; | |
import React, { useState } from 'react'; |
<style jsx>{` | ||
button { | ||
background-color: ${backgroundColor}; | ||
} | ||
`}</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: styled-jsx may not work properly with React Server Components. Consider using CSS modules or external stylesheets for RSC compatibility.
|
||
if (overrides?.events) { | ||
Object.keys(routerEvents).forEach((key) => { | ||
if (key in routerEvents) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
logic: Logic error: should check key in overrides.events
instead of key in routerEvents
to properly override event handlers
if (key in routerEvents) { | |
if (key in overrides.events) { |
@@ -0,0 +1,22 @@ | |||
import { fn } from 'storybook/test'; | |||
|
|||
// biome-ignore lint/suspicious/noExplicitAny: <explanation> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: biome-ignore comment needs specific explanation - consider 'accepts any callback type for Next.js cache compatibility'
// biome-ignore lint/suspicious/noExplicitAny: <explanation> | |
// biome-ignore lint/suspicious/noExplicitAny: accepts any callback type for Next.js cache compatibility |
@@ -0,0 +1,8 @@ | |||
{ | |||
"name": "nextjs-vite", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
logic: Project name should be 'nextjs-vite-rsc' to match directory name and avoid conflicts with existing nextjs-vite framework
"name": "nextjs-vite", | |
"name": "nextjs-vite-rsc", |
test: { | ||
// This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058 | ||
// In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown. | ||
// We will also suspress console.error logs for re the console.error logs for redirect in the next framework. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
syntax: Typo in comment: 'suspress' should be 'suppress'
// We will also suspress console.error logs for re the console.error logs for redirect in the next framework. | |
// We will also suppress console.error logs for re the console.error logs for redirect in the next framework. |
} as Meta; | ||
|
||
export const SingletonStateGetsInvalidatedAfterRedirecting: StoryObj = { | ||
play: async ({ canvasElement, step }) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: The step
parameter is defined but never used in the play function
{Object.entries(params).map(([key, value]) => ( | ||
<li key={key}> | ||
{key}: {value} | ||
</li> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
logic: Potential runtime error if value
is an array - Object.entries(params)
can return [string, string | string[]]
but template expects string
View your CI Pipeline Execution ↗ for commit 5972849
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 2 | 🚨 +2 🚨 |
Self size | 0 B | 508 KB | 🚨 +508 KB 🚨 |
Dependency size | 0 B | 2.80 MB | 🚨 +2.80 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/addon-docs
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 18 | 🚨 +18 🚨 |
Self size | 0 B | 2.01 MB | 🚨 +2.01 MB 🚨 |
Dependency size | 0 B | 9.40 MB | 🚨 +9.40 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/addon-jest
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 2 | 🚨 +2 🚨 |
Self size | 0 B | 47 KB | 🚨 +47 KB 🚨 |
Dependency size | 0 B | 53 KB | 🚨 +53 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/addon-links
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 1 | 🚨 +1 🚨 |
Self size | 0 B | 15 KB | 🚨 +15 KB 🚨 |
Dependency size | 0 B | 5 KB | 🚨 +5 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/addon-onboarding
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 0 | 0 |
Self size | 0 B | 332 KB | 🚨 +332 KB 🚨 |
Dependency size | 0 B | 667 B | 🚨 +667 B 🚨 |
Bundle Size Analyzer | Link | Link |
storybook-addon-pseudo-states
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 0 | 0 |
Self size | 0 B | 23 KB | 🚨 +23 KB 🚨 |
Dependency size | 0 B | 686 B | 🚨 +686 B 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/addon-themes
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 1 | 🚨 +1 🚨 |
Self size | 0 B | 20 KB | 🚨 +20 KB 🚨 |
Dependency size | 0 B | 28 KB | 🚨 +28 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/addon-vitest
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 6 | 🚨 +6 🚨 |
Self size | 0 B | 495 KB | 🚨 +495 KB 🚨 |
Dependency size | 0 B | 1.49 MB | 🚨 +1.49 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/builder-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 11 | 🚨 +11 🚨 |
Self size | 0 B | 374 KB | 🚨 +374 KB 🚨 |
Dependency size | 0 B | 1.30 MB | 🚨 +1.30 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/builder-webpack5
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 186 | 🚨 +186 🚨 |
Self size | 0 B | 68 KB | 🚨 +68 KB 🚨 |
Dependency size | 0 B | 31.37 MB | 🚨 +31.37 MB 🚨 |
Bundle Size Analyzer | Link | Link |
storybook
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 48 | 🚨 +48 🚨 |
Self size | 0 B | 30.74 MB | 🚨 +30.74 MB 🚨 |
Dependency size | 0 B | 17.61 MB | 🚨 +17.61 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/angular
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 186 | 🚨 +186 🚨 |
Self size | 0 B | 134 KB | 🚨 +134 KB 🚨 |
Dependency size | 0 B | 29.60 MB | 🚨 +29.60 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/ember
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 191 | 🚨 +191 🚨 |
Self size | 0 B | 17 KB | 🚨 +17 KB 🚨 |
Dependency size | 0 B | 28.09 MB | 🚨 +28.09 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/html-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 14 | 🚨 +14 🚨 |
Self size | 0 B | 23 KB | 🚨 +23 KB 🚨 |
Dependency size | 0 B | 1.71 MB | 🚨 +1.71 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/nextjs
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 529 | 🚨 +529 🚨 |
Self size | 0 B | 928 KB | 🚨 +928 KB 🚨 |
Dependency size | 0 B | 58.28 MB | 🚨 +58.28 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 131 | 🚨 +131 🚨 |
Self size | 0 B | 4.00 MB | 🚨 +4.00 MB 🚨 |
Dependency size | 0 B | 21.45 MB | 🚨 +21.45 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/preact-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 14 | 🚨 +14 🚨 |
Self size | 0 B | 14 KB | 🚨 +14 KB 🚨 |
Dependency size | 0 B | 1.70 MB | 🚨 +1.70 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 164 | 🚨 +164 🚨 |
Self size | 0 B | 31 KB | 🚨 +31 KB 🚨 |
Dependency size | 0 B | 22.83 MB | 🚨 +22.83 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/react-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 121 | 🚨 +121 🚨 |
Self size | 0 B | 36 KB | 🚨 +36 KB 🚨 |
Dependency size | 0 B | 19.39 MB | 🚨 +19.39 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 272 | 🚨 +272 🚨 |
Self size | 0 B | 25 KB | 🚨 +25 KB 🚨 |
Dependency size | 0 B | 43.03 MB | 🚨 +43.03 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/server-webpack5
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 198 | 🚨 +198 🚨 |
Self size | 0 B | 17 KB | 🚨 +17 KB 🚨 |
Dependency size | 0 B | 32.62 MB | 🚨 +32.62 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/svelte-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 22 | 🚨 +22 🚨 |
Self size | 0 B | 59 KB | 🚨 +59 KB 🚨 |
Dependency size | 0 B | 26.95 MB | 🚨 +26.95 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 23 | 🚨 +23 🚨 |
Self size | 0 B | 49 KB | 🚨 +49 KB 🚨 |
Dependency size | 0 B | 27.01 MB | 🚨 +27.01 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 110 | 🚨 +110 🚨 |
Self size | 0 B | 38 KB | 🚨 +38 KB 🚨 |
Dependency size | 0 B | 43.82 MB | 🚨 +43.82 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/web-components-vite
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 15 | 🚨 +15 🚨 |
Self size | 0 B | 20 KB | 🚨 +20 KB 🚨 |
Dependency size | 0 B | 1.74 MB | 🚨 +1.74 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/cli
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 204 | 🚨 +204 🚨 |
Self size | 0 B | 879 KB | 🚨 +879 KB 🚨 |
Dependency size | 0 B | 81.70 MB | 🚨 +81.70 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/codemod
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 173 | 🚨 +173 🚨 |
Self size | 0 B | 35 KB | 🚨 +35 KB 🚨 |
Dependency size | 0 B | 76.77 MB | 🚨 +76.77 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/core-webpack
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 1 | 🚨 +1 🚨 |
Self size | 0 B | 12 KB | 🚨 +12 KB 🚨 |
Dependency size | 0 B | 28 KB | 🚨 +28 KB 🚨 |
Bundle Size Analyzer | Link | Link |
create-storybook
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 49 | 🚨 +49 🚨 |
Self size | 0 B | 1.52 MB | 🚨 +1.52 MB 🚨 |
Dependency size | 0 B | 48.35 MB | 🚨 +48.35 MB 🚨 |
Bundle Size Analyzer | node | node |
@storybook/csf-plugin
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 9 | 🚨 +9 🚨 |
Self size | 0 B | 9 KB | 🚨 +9 KB 🚨 |
Dependency size | 0 B | 1.27 MB | 🚨 +1.27 MB 🚨 |
Bundle Size Analyzer | Link | Link |
eslint-plugin-storybook
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 35 | 🚨 +35 🚨 |
Self size | 0 B | 139 KB | 🚨 +139 KB 🚨 |
Dependency size | 0 B | 3.41 MB | 🚨 +3.41 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/react-dom-shim
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 0 | 0 |
Self size | 0 B | 12 KB | 🚨 +12 KB 🚨 |
Dependency size | 0 B | 785 B | 🚨 +785 B 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/preset-create-react-app
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 68 | 🚨 +68 🚨 |
Self size | 0 B | 26 KB | 🚨 +26 KB 🚨 |
Dependency size | 0 B | 5.97 MB | 🚨 +5.97 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/preset-react-webpack
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 170 | 🚨 +170 🚨 |
Self size | 0 B | 26 KB | 🚨 +26 KB 🚨 |
Dependency size | 0 B | 30.55 MB | 🚨 +30.55 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/preset-server-webpack
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 10 | 🚨 +10 🚨 |
Self size | 0 B | 8 KB | 🚨 +8 KB 🚨 |
Dependency size | 0 B | 1.20 MB | 🚨 +1.20 MB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/html
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 2 | 🚨 +2 🚨 |
Self size | 0 B | 30 KB | 🚨 +30 KB 🚨 |
Dependency size | 0 B | 32 KB | 🚨 +32 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/preact
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 2 | 🚨 +2 🚨 |
Self size | 0 B | 17 KB | 🚨 +17 KB 🚨 |
Dependency size | 0 B | 32 KB | 🚨 +32 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/react
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 2 | 🚨 +2 🚨 |
Self size | 0 B | 872 KB | 🚨 +872 KB 🚨 |
Dependency size | 0 B | 18 KB | 🚨 +18 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/server
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 3 | 🚨 +3 🚨 |
Self size | 0 B | 9 KB | 🚨 +9 KB 🚨 |
Dependency size | 0 B | 716 KB | 🚨 +716 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/svelte
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 2 | 🚨 +2 🚨 |
Self size | 0 B | 48 KB | 🚨 +48 KB 🚨 |
Dependency size | 0 B | 230 KB | 🚨 +230 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/vue3
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 3 | 🚨 +3 🚨 |
Self size | 0 B | 61 KB | 🚨 +61 KB 🚨 |
Dependency size | 0 B | 211 KB | 🚨 +211 KB 🚨 |
Bundle Size Analyzer | Link | Link |
@storybook/web-components
Before | After | Difference | |
---|---|---|---|
Dependency count | 0 | 3 | 🚨 +3 🚨 |
Self size | 0 B | 43 KB | 🚨 +43 KB 🚨 |
Dependency size | 0 B | 47 KB | 🚨 +47 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:merged
orci:daily
GH 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.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 canary-release-pr.yml --field pr=<PR_NUMBER>
Greptile Summary
Updated On: 2025-09-04 12:19:39 UTC
This PR introduces a new Next.js framework variant called
nextjs-vite-rsc
that combines Next.js with Vite bundling and React Server Components (RSC) support. The new framework provides a comprehensive implementation including:Core Framework Structure:
Mock System Implementation:
Template Files and Examples:
Integration Features:
The framework follows the same architectural patterns as existing Next.js frameworks (
nextjs
andnextjs-vite
) but is specifically designed for React Server Components, which require different handling for server-side rendering, component compilation, and runtime behavior. This separation allows for RSC-specific optimizations without impacting existing framework implementations.PR Description Notes:
Confidence score: 2/5
Context used:
Context - PR titles must be in the format of 'Area: Summary', with both Area and Summary starting with a capital letter. (link)