Next.js: Add support for Next 15 #29587

yannbf · 2024-11-11T16:17:11Z

What I did

This PR introduces support for Next.js 15 (Webpack - @storybook/nextjs) by making changes to the mocks and adding a compatibility layer for Next.js 14. There will be a followup PR for experimental next vite.

It was tested in all sandboxes, as well as in portable stories.

Additionally, it revamps how the Next.js sandboxes are generated:

Removes JS sandbox
Adds a Next.js v14 sandbox

It also moves all of the Nextjs stories into a single place, so they are all tested in all the nextjs sandboxes. As a result, it also has changes in the e2e specs.

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>

name	before	after	z	%
createSize	0 B	0 B	-	-
generateSize	78.2 MB	78.2 MB	0.88	0%
initSize	143 MB	143 MB	1.43	0%
diffSize	65.2 MB	65.2 MB	1.18	0%
buildSize	6.88 MB	6.88 MB	2.3	0%
buildSbAddonsSize	1.51 MB	1.51 MB	1	0%
buildSbCommonSize	195 kB	195 kB	-	0%
buildSbManagerSize	1.9 MB	1.9 MB	2.34	0%
buildSbPreviewSize	271 kB	271 kB	-	0%
buildStaticSize	0 B	0 B	-	-
buildPrebuildSize	3.88 MB	3.88 MB	2.3	0%
buildPreviewSize	3 MB	3 MB	-	0%
testBuildSize	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	9.7s	22.8s	13s	1.11	57.1%
generateTime	21.9s	20.7s	-1s -194ms	-0.33	-5.8%
initTime	15.4s	15.3s	-150ms	-0.02	-1%
buildTime	8.5s	8.1s	-348ms	-0.73	-4.3%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.1s	4.9s	-1s -192ms	-1.53	🔰-24.1%
devManagerResponsive	3.6s	3.1s	-564ms	-1.55	🔰-18.2%
devManagerHeaderVisible	633ms	489ms	-144ms	-1.31	🔰-29.4%
devManagerIndexVisible	661ms	558ms	-103ms	-0.97	-18.5%
devStoryVisibleUncached	1.3s	809ms	-491ms	-1.25	🔰-60.7%
devStoryVisible	658ms	517ms	-141ms	-1.35	🔰-27.3%
devAutodocsVisible	603ms	430ms	-173ms	-1.29	🔰-40.2%
devMDXVisible	675ms	431ms	-244ms	-1.13	-56.6%
buildManagerHeaderVisible	642ms	477ms	-165ms	-1.37	🔰-34.6%
buildManagerIndexVisible	675ms	487ms	-188ms	-1.41	🔰-38.6%
buildStoryVisible	644ms	478ms	-166ms	-1.33	🔰-34.7%
buildAutodocsVisible	537ms	412ms	-125ms	-1.04	-30.3%
buildMDXVisible	510ms	402ms	-108ms	-0.96	-26.9%

Greptile Summary

Added support for Next.js 15 by updating webpack configuration and compatibility mappings to handle breaking changes in Next.js's internal folder structure.

Added mapping for next/dist/server/request/headers to next/dist/client/components/headers in code/frameworks/nextjs/src/compatibility/compatibility-map.ts
Updated code/frameworks/nextjs/src/export-mocks/headers/index.ts to handle async cookies/headers APIs in Next.js 15
Added support for disabling aliases via boolean values in code/frameworks/nextjs/src/export-mocks/webpack.ts
Updated peerDependencies in package.json to include Next.js 15 (^15.0.0)
Consolidated webpack configuration by moving compatibility and export mock setup into configureAliases

greptile-apps

_{36 file(s) reviewed, 10 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-11-11T16:18:21Z

code/frameworks/nextjs/src/aliases/webpack.ts

+    (warning) =>
+      warning.message.includes("export 'draftMode'") &&
+      warning.message.includes('next/dist/server/request/headers'),
+  ];


style: ignoring warnings about missing draftMode export could mask real issues if the export path changes again in future Next.js versions

greptile-apps · 2024-11-11T16:18:57Z

code/frameworks/nextjs/src/compatibility/compatibility-map.ts

  Object.entries(aliases).forEach(([name, alias]) => {
-    addScopedAlias(baseConfig, name, alias);
+    if (typeof alias === 'string') {
+      addScopedAlias(baseConfig, name, alias);
+    } else {
+      setAlias(baseConfig, name, alias);
+    }
  });


style: Consider adding error handling for unexpected alias types

greptile-apps · 2024-11-11T16:23:49Z

code/frameworks/nextjs/template/stories/Image.stories.tsx

@@ -11,24 +13,26 @@ export default {
    src: Accessibility,
    alt: 'Accessibility',
  },
-};
+} as Meta<typeof Component>;


logic: Component is not defined but used in type reference

greptile-apps · 2024-11-11T16:24:22Z

code/frameworks/nextjs/template/stories/ImageLegacy.stories.tsx

@@ -10,17 +12,19 @@ export default {
    src: Accessibility,
    alt: 'Accessibility',
  },
-};
+} as Meta<typeof Component>;


logic: 'Component' is undefined, should be 'Image' since that's the component being used in the stories

greptile-apps · 2024-11-11T16:26:59Z

code/frameworks/nextjs/template/stories/NextHeader.tsx

-            </p>
-          );
-        })}
+      {(await cookies()).getAll().map(({ name, value }) => {


style: consider extracting cookie data before mapping to avoid multiple await calls

greptile-apps · 2024-11-11T16:27:00Z

code/frameworks/nextjs/template/stories/NextHeader.tsx


      <h3>Headers:</h3>
-      {Array.from(headers().entries()).map(([name, value]: [string, string]) => {
+      {Array.from((await headers()).entries()).map(([name, value]: [string, string]) => {


style: consider extracting header entries before mapping to avoid multiple await calls

greptile-apps · 2024-11-11T16:27:39Z

code/frameworks/nextjs/template/stories/RSC.stories.tsx

@@ -10,19 +12,21 @@ export default {
      rsc: true,
    },
  },
-};
+} as Meta<typeof Component>;


logic: Component is not defined but used in type annotation. This will cause a TypeScript error. Should be RSC instead of Component

greptile-apps · 2024-11-11T16:27:39Z

code/frameworks/nextjs/template/stories/RSC.stories.tsx

-};
+} as Meta<typeof Component>;
+
+type Story = StoryObj<typeof Component>;


logic: Story type uses undefined Component type. Should be type Story = StoryObj<typeof RSC>

greptile-apps · 2024-11-11T16:31:53Z

code/frameworks/nextjs/template/stories/server-actions.tsx

@@ -5,7 +5,7 @@ import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';

 export async function accessRoute() {
-  const user = cookies().get('user');
+  const user = (await cookies()).get('user');


style: Consider adding error handling around the await in case cookies() rejects

greptile-apps · 2024-11-11T16:36:02Z

test-storybooks/portable-stories-kitchen-sink/nextjs/stories/StyledJsx.stories.tsx

@@ -15,6 +15,6 @@ const Component = () => (

 export default {
  component: Component,
-};
+} as Meta<typeof Component>;

 export const Default = {};


syntax: Missing type annotation for Default story export. Should be typed as StoryObj for proper type checking.

valentinpalkovic · 2024-11-11T21:39:35Z

@yannbf Does this also fix #29582 (comment)?

nx-cloud · 2024-11-12T06:26:57Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4d3c6d9. 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 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

yannbf · 2024-11-12T09:14:52Z

@yannbf Does this also fix #29582 (comment)?

Yes it should!

shilman

Only did a cursory review to get this merged. @valentinpalkovic can you please re-review once you have time?

Next.js: Add support for Next 15 (cherry picked from commit fa138f6)

Nextjs: Add support for Next 15

59df579

yannbf added feature request nextjs ci:merged Run the CI jobs that normally run when merged. labels Nov 11, 2024

greptile-apps bot reviewed Nov 11, 2024

View reviewed changes

Move nextjs stories to common template directory, add Nextjs 14 sandbox

a2b9245

yannbf force-pushed the yann/next-15-support branch from 06607c2 to a2b9245 Compare November 12, 2024 06:22

fix

7cde000

yannbf force-pushed the yann/next-15-support branch from 213ff3b to 7cde000 Compare November 12, 2024 06:50

yannbf added 6 commits November 12, 2024 08:03

fix e2e

800cefb

fix parallelism

6117c7c

rework compatibility for draft-mode

104bfcc

Merge branch 'next' into yann/next-15-support

ac53a56

fix types

2ac6955

fix types

4d3c6d9

shilman approved these changes Nov 12, 2024

View reviewed changes

shilman added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Nov 12, 2024

shilman changed the title ~~Nextjs: Add support for Next 15~~ Next.js: Add support for Next 15 Nov 12, 2024

shilman added maintenance User-facing maintenance tasks and removed feature request labels Nov 12, 2024

shilman merged commit fa138f6 into next Nov 12, 2024
76 of 80 checks passed

shilman deleted the yann/next-15-support branch November 12, 2024 09:20

This was referenced Nov 12, 2024

Release: Patch 8.4.3 #29590

Merged

Release: Prerelease 8.5.0-alpha.4 #29585

Merged

valentinpalkovic pushed a commit that referenced this pull request Nov 12, 2024

Merge pull request #29587 from storybookjs/yann/next-15-support

3f8947a

Next.js: Add support for Next 15 (cherry picked from commit fa138f6)

yannbf pushed a commit that referenced this pull request Nov 12, 2024

Merge pull request #29587 from storybookjs/yann/next-15-support

3edc23b

Next.js: Add support for Next 15 (cherry picked from commit fa138f6)

yannbf pushed a commit that referenced this pull request Nov 13, 2024

Merge pull request #29587 from storybookjs/yann/next-15-support

b8c7ccf

Next.js: Add support for Next 15 (cherry picked from commit fa138f6)

github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Nov 13, 2024

timheerwagen mentioned this pull request Nov 13, 2024

Storybook Issues with v2 47ng/nuqs#757

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js: Add support for Next 15 #29587

Next.js: Add support for Next 15 #29587

yannbf commented Nov 11, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

greptile-apps bot Nov 11, 2024

valentinpalkovic commented Nov 11, 2024

nx-cloud bot commented Nov 12, 2024 •

edited

Loading

yannbf commented Nov 12, 2024

shilman left a comment

Next.js: Add support for Next 15 #29587

Next.js: Add support for Next 15 #29587

Conversation

yannbf commented Nov 11, 2024 • edited Loading

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

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 11, 2024

Choose a reason for hiding this comment

valentinpalkovic commented Nov 11, 2024

nx-cloud bot commented Nov 12, 2024 • edited Loading

☁️ Nx Cloud Report

yannbf commented Nov 12, 2024

shilman left a comment

Choose a reason for hiding this comment

yannbf commented Nov 11, 2024 •

edited

Loading

nx-cloud bot commented Nov 12, 2024 •

edited

Loading