Base for new nextjs-vite-rsc framework #32411

kasperpeulen · 2025-09-04T12:16:53Z

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:23 UTC

This PR creates the foundational structure for a new @storybook/nextjs-vite-rsc framework that supports React Server Components (RSC) with Vite as the build tool. The implementation closely mirrors the existing nextjs-vite framework but establishes a separate package to handle RSC-specific requirements.

The changes include:

Core framework structure: New package configuration, TypeScript types, build config, and preset files that define the framework's integration with Storybook
RSC-specific components: Template components like RSC.tsx and NextHeader.tsx that demonstrate server components, server actions, and async functionality
Mock implementations: Complete mocking layer for Next.js server-side APIs (headers, cookies, cache, navigation, router) to enable RSC testing in Storybook
Decorators and providers: Head management, styled-jsx, routing, and image context providers that wrap stories with necessary Next.js context
Template structure: CLI templates and example stories covering various Next.js features (Image, Link, fonts, dynamic imports, server actions) adapted for RSC
Build and development setup: Vite plugin integration, ESLint configuration, and TypeScript declarations

The framework reuses significant portions of the existing nextjs-vite implementation while creating a distinct package path that allows for RSC-specific customizations. The template includes comprehensive examples demonstrating authentication flows, cookie/header management, and server component patterns that are essential for RSC development.

Confidence score: 2/5

This PR contains critical naming inconsistencies and import path errors that will cause runtime failures
Score reflects multiple framework name mismatches (using 'nextjs-vite' instead of 'nextjs-vite-rsc') and incorrect import references throughout the codebase
Pay close attention to package.json, project.json, preset.ts, portable-stories.ts, and all story files with incorrect import statements

github-actions · 2025-09-04T12:18:28Z

	Fails
🚫	PR is not labeled with one of: ["cleanup","BREAKING CHANGE","feature request","bug","documentation","maintenance","build","dependencies"]
🚫	PR is not labeled with one of: ["ci:normal","ci:merged","ci:daily","ci:docs"]
🚫	PR title must be in the format of "Area: Summary", With both Area and Summary starting with a capital letter Good examples: - "Docs: Describe Canvas Doc Block" - "Svelte: Support Svelte v4" Bad examples: - "add new api docs" - "fix: Svelte 4 support" - "Vue: improve docs"

Generated by 🚫 dangerJS against 4483a66

greptile-apps

_{69 files reviewed, 45 comments}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps · 2025-09-04T12:17:31Z

code/frameworks/nextjs-vite-rsc/template/stories/RSC.tsx

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


style: Consider using a more specific type instead of any for children prop. Could use React.ReactNode for better type safety.

Suggested change

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

export const Nested = async ({ children }: { children: React.ReactNode }) => <>Nested {children}</>;

greptile-apps · 2025-09-04T12:17:32Z

code/frameworks/nextjs-vite-rsc/template/stories/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Rubik Filtered Project Authors (https://https://github.com/NaN-xyz/Rubik-Filtered)


syntax: URL has duplicate '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)

greptile-apps · 2025-09-04T12:17:36Z

code/frameworks/nextjs-vite-rsc/template/cli/ts/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';


logic: Import should be from '@storybook/nextjs-vite-rsc' to match the new framework package being created, not '@storybook/nextjs-vite'

Suggested change

import type { Meta, StoryObj } from '@storybook/nextjs-vite';

import type { Meta, StoryObj } from '@storybook/nextjs-vite-rsc';

greptile-apps · 2025-09-04T12:17:37Z

code/frameworks/nextjs-vite-rsc/src/portable-stories.ts

+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/nextjs-vite';


syntax: Package name should be '@storybook/nextjs-vite-rsc' to match the actual framework name

Suggested change

* import { setProjectAnnotations } from '@storybook/nextjs-vite';

* import { setProjectAnnotations } from '@storybook/nextjs-vite-rsc';

greptile-apps · 2025-09-04T12:17:37Z

code/frameworks/nextjs-vite-rsc/template/stories/Redirect.stories.tsx

+    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.


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.

greptile-apps · 2025-09-04T12:18:07Z

code/frameworks/nextjs-vite-rsc/template/stories/Navigation.stories.tsx

+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { getRouter } from '@storybook/nextjs-vite/navigation.mock';


logic: Import paths should reference '@storybook/nextjs-vite-rsc' instead of '@storybook/nextjs-vite' for the RSC framework

Suggested change

import type { Meta, StoryObj } from '@storybook/nextjs-vite';

import { getRouter } from '@storybook/nextjs-vite/navigation.mock';

import type { Meta, StoryObj } from '@storybook/nextjs-vite-rsc';

import { getRouter } from '@storybook/nextjs-vite-rsc/navigation.mock';

greptile-apps · 2025-09-04T12:18:08Z

code/frameworks/nextjs-vite-rsc/build-config.ts

+      {
+        exportEntries: ['./preset'],
+        entryPoint: './src/preset.ts',
+        dts: false,


logic: Missing dts: false for mock entries - mock modules in browser entries should have TypeScript declaration generation disabled to match the pattern used in the existing nextjs framework

greptile-apps · 2025-09-04T12:18:10Z

code/frameworks/nextjs-vite-rsc/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "nextjs-vite",


logic: Project name should be 'nextjs-vite-rsc' to match the directory name and avoid conflicts with existing nextjs-vite framework

Suggested change

"name": "nextjs-vite",

"name": "nextjs-vite-rsc",

greptile-apps · 2025-09-04T12:18:12Z

code/frameworks/nextjs-vite-rsc/src/head-manager/head-manager-provider.tsx

+const HeadManagerProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const headManager: HeadManagerValue = useMemo(initHeadManager, []);
+  headManager.getIsSsr = () => false;
+
+  return <HeadManagerContext.Provider value={headManager}>{children}</HeadManagerContext.Provider>;


style: This implementation is identical to the existing nextjs-vite framework. Consider extracting this into a shared utility to reduce code duplication between the two frameworks.

greptile-apps · 2025-09-04T12:18:15Z

code/frameworks/nextjs-vite-rsc/src/export-mocks/cache/index.ts

@@ -0,0 +1,22 @@
+import { fn } from 'storybook/test';
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>


style: incomplete biome-ignore comment lacks proper explanation

Suggested change

// biome-ignore lint/suspicious/noExplicitAny: <explanation>

// biome-ignore lint/suspicious/noExplicitAny: Callback function needs to accept any arguments and return any Promise for Next.js cache API compatibility

kasperpeulen added 4 commits September 4, 2025 14:13

create new rsc framework

430a357

copy nextjs-vite

a9b70c0

Merge commit '430a357549b87d54bb49cfd30ed11ed9ebeb29c0' into next

aba3fce

move back

4483a66

greptile-apps bot reviewed Sep 4, 2025

View reviewed changes

jonniebigodes assigned kasperpeulen Sep 8, 2025

jonniebigodes added the rsc label Sep 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Base for new nextjs-vite-rsc framework #32411

Base for new nextjs-vite-rsc framework #32411

Uh oh!

kasperpeulen commented Sep 4, 2025 •

edited by greptile-apps bot

Loading

Uh oh!

github-actions bot commented Sep 4, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

greptile-apps bot Sep 4, 2025

Uh oh!

Uh oh!


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

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

		@@ -0,0 +1,93 @@
		Copyright 2020 The Rubik Filtered Project Authors (https://https://github.com/NaN-xyz/Rubik-Filtered)

		@@ -0,0 +1,54 @@
		import type { Meta, StoryObj } from '@storybook/nextjs-vite';

	* import { setProjectAnnotations } from '@storybook/nextjs-vite';
	* import { setProjectAnnotations } from '@storybook/nextjs-vite-rsc';

	// 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.

		import type { Meta, StoryObj } from '@storybook/nextjs-vite';
		import { getRouter } from '@storybook/nextjs-vite/navigation.mock';

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

		// biome-ignore lint/suspicious/noExplicitAny: <explanation>

Uh oh!

Base for new nextjs-vite-rsc framework #32411

Are you sure you want to change the base?

Base for new nextjs-vite-rsc framework #32411

Uh oh!

Conversation

kasperpeulen commented Sep 4, 2025 • edited by greptile-apps bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Confidence score: 2/5

Uh oh!

github-actions bot commented Sep 4, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kasperpeulen commented Sep 4, 2025 •

edited by greptile-apps bot

Loading