Skip to content

Conversation

kasperpeulen
Copy link
Contributor

@kasperpeulen kasperpeulen commented Sep 4, 2025

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/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:

  • Complete framework setup with TypeScript configuration, build configs, and package definitions
  • Preview configuration with decorators for styling, images, routing, and head management
  • Portable stories functionality for testing outside Storybook UI
  • Error handling for async client component errors specific to RSC

Mock System Implementation:

  • Comprehensive mocking for Next.js APIs including headers, cookies, cache utilities, and navigation
  • Router mocking with support for both App Router and Pages Router patterns
  • Server actions mocking for RSC functionality
  • Singleton pattern implementation for consistent mock state

Template Files and Examples:

  • CLI templates in both JavaScript and TypeScript variants (Button, Header, Page components)
  • Comprehensive story examples covering Next.js features: Image optimization, Font handling, Dynamic imports, RSC components, Server actions, Navigation, Styling (styled-jsx), and Redirect functionality
  • RSC-specific components demonstrating async server components and server-side API usage

Integration Features:

  • Vite plugin integration for Next.js compatibility
  • Support for both Next.js App Directory and Pages Directory routing
  • Image optimization with Next.js Image component support
  • Font optimization with Google Fonts and local font examples

The framework follows the same architectural patterns as existing Next.js frameworks (nextjs and nextjs-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:

  • Missing description of what was implemented
  • All testing checkboxes are unchecked
  • No manual testing instructions provided
  • Missing documentation updates

Confidence score: 2/5

  • This PR has critical naming conflicts and configuration errors that will cause immediate build and publishing issues
  • Score reflects multiple package.json naming conflicts, incorrect import paths, and missing project configuration updates
  • Pay close attention to package.json files, project.json, and all import statements throughout the framework

Context used:

Context - PR titles must be in the format of 'Area: Summary', with both Area and Summary starting with a capital letter. (link)

Copy link
Contributor

@greptile-apps greptile-apps bot left a 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

Edit Code Review Bot Settings | Greptile


export const RSC = async ({ label }: { label: string }) => <>RSC {label}</>;

export const Nested = async ({ children }: any) => <>Nested {children}</>;
Copy link
Contributor

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 }

Suggested change
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)
Copy link
Contributor

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

Suggested change
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';
Copy link
Contributor

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

Suggested change
import React, { useRef, useState } from 'react';
import React, { useState } from 'react';

Comment on lines 32 to 36
<style jsx>{`
button {
background-color: ${backgroundColor};
}
`}</style>
Copy link
Contributor

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) {
Copy link
Contributor

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

Suggested change
if (key in routerEvents) {
if (key in overrides.events) {

@@ -0,0 +1,22 @@
import { fn } from 'storybook/test';

// biome-ignore lint/suspicious/noExplicitAny: <explanation>
Copy link
Contributor

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'

Suggested change
// 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",
Copy link
Contributor

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

Suggested change
"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.
Copy link
Contributor

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'

Suggested change
// 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 }) => {
Copy link
Contributor

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

Comment on lines 73 to 76
{Object.entries(params).map(([key, value]) => (
<li key={key}>
{key}: {value}
</li>
Copy link
Contributor

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

@kasperpeulen kasperpeulen changed the base branch from next to kasper/nextjs-vite-rsc-base September 4, 2025 12:29
Copy link

nx-cloud bot commented Sep 4, 2025

View your CI Pipeline Execution ↗ for commit 5972849

Command Status Duration Result
nx run-many -t build --parallel=3 ✅ Succeeded 44s View ↗

☁️ Nx Cloud last updated this comment at 2025-09-05 16:02:08 UTC

@storybook-pr-benchmarking
Copy link

Package Benchmarks

Commit: b36accd, ran on 4 September 2025 at 15:26:10 UTC

The following packages have significant changes to their size or dependencies:

@storybook/addon-a11y

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant