Skip to content

Upgrade Next.js to 15, React to 19 #410

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.

Sign up for GitHub

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

Open
shilman wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Upgrade Next.js to 15, React to 19 #410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4ba7f5d
Upgrade Next.js to 15, React to 19, and related deps
shilman Apr 13, 2026
9cf807e
Move outputFileTracingIncludes out of experimental (Next.js 15)
shilman Apr 13, 2026
d3512dd
Add shiki and graphql as explicit peer dependencies
shilman Apr 13, 2026
b88e882
Upgrade other next deps
shilman Apr 13, 2026
dcd7c82
Migrate PlausibleProvider pageviewProps to init.customProperties (nex…
shilman Apr 13, 2026
c49704b
Update Plausible proxy src to site-specific script URL
shilman Apr 13, 2026
ef23b6f
Revert @next/eslint-plugin-next to ^14 (doesn't exist at v15)
shilman Apr 13, 2026
3bc211f
Make it a peer dep
shilman Apr 13, 2026
87f5d6e
Add @next/eslint-plugin-next@^14 to lockfile
shilman Apr 13, 2026
f575558
Limit concurrency on SSG
shilman Apr 13, 2026
709d4d6
Fix plausible proxy
shilman Apr 13, 2026
e7b4cae
Await async params in addon-catalog pages (Next.js 15)
shilman Apr 13, 2026
8a531f3
fix: align @next/third-parties to ^15 in addon-catalog
Copilot Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
legacy-peer-deps=true

Copilot AI Apr 13, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting legacy-peer-deps=true changes install semantics globally and can mask real peer-dependency incompatibilities (especially during CI), leading to non-deterministic runtime behavior. Prefer resolving the underlying peer conflicts (e.g., aligning Storybook/Next-related versions) and only use this as a last resort (or document/scoped usage if it must remain).

Suggested change
legacy-peer-deps=true

Copilot uses AI. Check for mistakes.
5 changes: 3 additions & 2 deletions apps/addon-catalog/app/(home)/tag/[...name]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ type GenerateMetaData = (props: {
}) => Promise<Metadata>;

interface TagDetailsProps {
params: Params;
params: Promise<Params>;
}

async function getTagFromName(
Expand Down Expand Up @@ -63,8 +63,9 @@ export const generateMetadata: GenerateMetaData = async ({ params }) => {
};

export default async function TagDetails({
params: { name },
params,
}: TagDetailsProps) {
const { name } = await params;
const data = await getCachedTagFromName(name);

if (!data || 'error' in data) return notFound();
Expand Down
5 changes: 3 additions & 2 deletions apps/addon-catalog/app/[...addonName]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ type GenerateMetaData = (props: {
}) => Promise<Metadata>;

interface AddonDetailsProps {
params: Params;
params: Promise<Params>;
}

async function getAddonFromName(
Expand Down Expand Up @@ -55,7 +55,8 @@ export const generateMetadata: GenerateMetaData = async ({ params }) => {
};

export default async function AddonDetails({ params }: AddonDetailsProps) {
const addon = await getAddonFromName(params.addonName);
const { addonName } = await params;
const addon = await getAddonFromName(addonName);

if (!addon) notFound();

Expand Down
8 changes: 1 addition & 7 deletions apps/addon-catalog/app/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,7 @@ interface ProvidersProps {

export const Providers: FC<ProvidersProps> = ({ children }) => {
return (
<PlausibleProvider
domain="storybook.js.org"
taggedEvents
pageviewProps={{
experiment: 'Grow-SB-website-acquisition:A',
}}
>
<PlausibleProvider>
<ThemeProvider attribute="class">{children}</ThemeProvider>
</PlausibleProvider>
);
Expand Down
4 changes: 3 additions & 1 deletion apps/addon-catalog/next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
/** @type {import('next').NextConfig} */
import { withPlausibleProxy } from 'next-plausible';

const nextConfig = withPlausibleProxy()({
const nextConfig = withPlausibleProxy({
src: 'https://plausible.io/js/pa-anM74fP8S5w3vipeaMMrx.js',
})({
basePath: '/addons',
images: {
unoptimized: true,
Expand Down
16 changes: 8 additions & 8 deletions apps/addon-catalog/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,23 @@
"@docsearch/css": "^3.6.0",
"@mdx-js/loader": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@next/third-parties": "^14.2.4",
"@next/third-parties": "^15",
"@radix-ui/react-slot": "^1.1.0",
"@repo/ui": "*",
"@repo/utils": "*",
"@storybook/icons": "^1.2.9",
"@types/mdx": "^2.0.13",
"copy-to-clipboard": "^3.3.3",
"framer-motion": "^11.2.12",
"framer-motion": "^12",
"graphql-request": "^7.1.0",
"human-format": "^1.2.0",
"next": "^14.2.4",
"next-plausible": "^3.12.0",
"next": "^15",
"next-plausible": "^4.0.0",
"next-themes": "^0.3.0",
Comment on lines 24 to 28

Copilot AI Apr 13, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This workspace upgrades next to ^15, but @next/third-parties remains at ^14.2.4 (see the top of the dependencies list). Please align @next/third-parties to ^15 to match the Next.js major version and reduce risk of incompatibilities.

Copilot uses AI. Check for mistakes.

@shilman shilman Apr 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot apply changes based on this feedback

Copilot AI Apr 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated @next/third-parties from ^14.2.4 to ^15 in apps/addon-catalog/package.json to align with the Next.js major version (commit 8a531f3).

"posthog-js": "^1.306.0",
"prismjs": "^1.29.0",
"react": "^18",
"react-dom": "^18",
"react": "^19",
"react-dom": "^19",
"rehype": "^13.0.1",
"rehype-stringify": "^10.0.0",
"rehype-urls": "^1.2.0",
Expand All @@ -41,8 +41,8 @@
"devDependencies": {
"@types/node": "^20",
"@types/prismjs": "^1.26.4",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^8",
"eslint-config-next": "14.2.4",

Copilot AI Apr 13, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eslint-config-next is still pinned to 14.2.4 while next is ^15. This can cause lint rule/config mismatches for Next 15 projects; update eslint-config-next (and related Next lint tooling if used) to the matching ^15 major.

Suggested change
"eslint-config-next": "14.2.4",
"eslint-config-next": "^15",

Copilot uses AI. Check for mistakes.
"postcss": "^8",
Expand Down
5 changes: 3 additions & 2 deletions apps/frontpage/app/docs/[...slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type GenerateMetaData = (props: {
}) => Promise<Metadata>;

interface PageProps {
params: Params;
params: Promise<Params>;
}

async function getPageFromSlug(
Expand Down Expand Up @@ -89,7 +89,8 @@ export const generateStaticParams = () => {
return listOfSlugs;
};

export default async function Page({ params: { slug } }: PageProps) {
export default async function Page({ params }: PageProps) {
const { slug } = await params;
const { activeVersion, page } = await getPageFromSlug(slug);
if (!page) notFound();

Expand Down
2 changes: 1 addition & 1 deletion apps/frontpage/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function RootLayout({
children,
}: {
children: React.ReactNode;
}): JSX.Element {
}) {
return (
<html lang="en" suppressHydrationWarning>
<body
Expand Down
2 changes: 1 addition & 1 deletion apps/frontpage/app/llms-full.txt/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
resolveVersionFromSlug,
} from '../../lib/resolve-doc-for-llm';
import { findDocFile } from '../../lib/get-page';
import { getLlmsBannerLines } from '../llms.txt/route';
import { getLlmsBannerLines } from '../../lib/get-llms-banner-lines';

export const dynamic = 'force-dynamic';

Expand Down
38 changes: 2 additions & 36 deletions apps/frontpage/app/llms.txt/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,14 @@
import { type NextRequest, NextResponse } from 'next/server';
import { type DocsVersion, docsVersions, latestVersion } from '@repo/utils';
import { docsVersions, latestVersion } from '@repo/utils';
import { getAllTrees } from '../../lib/get-all-trees';
import { getFlatTree } from '../../lib/get-flat-tree';
import { resolveVersionFromSlug } from '../../lib/resolve-doc-for-llm';
import { getLlmsBannerLines } from '../../lib/get-llms-banner-lines';

export const dynamic = 'force-dynamic';

const baseUrl = 'https://storybook.js.org';

export const getLlmsBannerLines = ({ version }: { version: DocsVersion }) => [
'# Storybook',
'',
'> Storybook is a frontend workshop for building UI components and pages in isolation. It helps with UI development, testing, and documentation.',
'',
`Current version: ${version.label} (${version.id})`,
'',
'## Documentation',
'',
`- [Storybook Docs](${baseUrl}/docs): Main documentation`,
`- [Full Documentation (Markdown)](${baseUrl}/llms-full.txt): Complete documentation in plain text for LLM consumption`,
'',
'## Markdown Access',
'',
'Append `.md` to any docs URL to get clean markdown with code examples:',
`- \`${baseUrl}/docs/writing-stories/decorators.md\``,
`- \`${baseUrl}/docs/9/writing-stories/decorators.md\` (Version 9)`,
'',
'### Query Parameters',
'',
'All markdown endpoints (`.md` URLs and `llms-full.txt`) support these query parameters:',
'- `renderer` - Framework filter for code snippets (default: `react`). Options: `react`, `vue`, `angular`, `svelte`, `web-components`, `solid`, `preact`, `html`, `ember`, `qwik`',
'- `language` - Language filter for code snippets (default: `ts`). Options: `ts`, `js`',
'- `codeOnly` - When `true`, returns only the code snippets without prose',
'',
'Examples:',
'- `GET /docs/writing-stories/decorators.md?renderer=vue&language=ts`',
'- `GET /docs/writing-stories/decorators.md?codeOnly=true`',
'- `GET /llms-full.txt?renderer=angular&language=js`',
'',
'### Versioned Access',
'',
'Prefix the path with a version slug for older versions:',
];

export function GET(request: NextRequest) {
const versionSlug = request.nextUrl.searchParams.get('version') ?? undefined;
const versionId = resolveVersionFromSlug(versionSlug);
Expand Down
8 changes: 1 addition & 7 deletions apps/frontpage/app/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,7 @@ export const Providers: FC<ProvidersProps> = ({ children }) => {

return (
<PHProvider client={posthog}>
<PlausibleProvider
domain="storybook.js.org"
taggedEvents
pageviewProps={{
experiment: 'Grow-SB-website-acquisition:A',
}}
>
<PlausibleProvider init={{ customProperties: { experiment: 'Grow-SB-website-acquisition:A' } }}>
<ThemeProvider attribute="class">{children}</ThemeProvider>
</PlausibleProvider>
</PHProvider>
Expand Down
5 changes: 3 additions & 2 deletions apps/frontpage/app/recipes/[...name]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ type GenerateMetaData = (props: {
}) => Promise<Metadata>;

interface RecipeDetailsProps {
params: Params;
params: Promise<Params>;
}

async function getRecipeFromName(addonName: string[]): Promise<
Expand Down Expand Up @@ -73,8 +73,9 @@ export async function generateStaticParams() {
}

export default async function RecipeDetails({ params }: RecipeDetailsProps) {
const { name } = await params;
const { number: githubCount } = await fetchGithubCount();
const recipe = await getRecipeFromName(params.name);
const recipe = await getRecipeFromName(name);

if (!recipe) notFound();

Expand Down
7 changes: 4 additions & 3 deletions apps/frontpage/app/releases/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import { getReleases } from '../../../lib/get-releases';
import { DocsMainNav } from '../../../components/docs/sidebar/docs-main-nav';

interface PageProps {
params: {
params: Promise<{
slug: string;
};
}>;
}

export const generateStaticParams = () => {
Expand All @@ -20,7 +20,8 @@ export const generateStaticParams = () => {
}));
};

export default async function Page({ params: { slug } }: PageProps) {
export default async function Page({ params }: PageProps) {
const { slug } = await params;
const releases = getReleases();
const { number: githubCount } = await fetchGithubCount();

Expand Down
7 changes: 4 additions & 3 deletions apps/frontpage/app/releases/iframe/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { getRelease } from '../../../../lib/get-release';
import { getReleases } from '../../../../lib/get-releases';

interface HomeProps {
params: {
params: Promise<{
slug: string;
};
}>;
}

export const generateStaticParams = () => {
Expand All @@ -15,7 +15,8 @@ export const generateStaticParams = () => {
}));
};

export default async function Home({ params: { slug } }: HomeProps) {
export default async function Home({ params }: HomeProps) {
const { slug } = await params;
const releases = getReleases();

// TODO: This is not really working on prod
Expand Down
2 changes: 1 addition & 1 deletion apps/frontpage/app/versions/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const log = async (searchParams: URLSearchParams) => {
return;
}

const headersList = headers();
const headersList = await headers();

logger.log('logging event');

Expand Down
2 changes: 1 addition & 1 deletion apps/frontpage/components/docs/footer/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,7 +494,7 @@ export async function sendFeedback(

const now = Date.now();

const headersList = headers();
const headersList = await headers();

try {
const ip =
Expand Down
4 changes: 2 additions & 2 deletions apps/frontpage/components/home/automate/ui-tests/ui-tests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const lineAnimationLength = 1550;
const lineAnimationDelay = 500;

interface PureUITestsProps {
forwardRef: React.RefObject<HTMLDivElement>;
forwardRef: React.RefObject<HTMLDivElement | null>;
activeIndex: number;
isAnimatingLoop: boolean;
isPaused: boolean | null;
Expand Down Expand Up @@ -173,7 +173,7 @@ export const baseWorkflows = [
];

export function UITests() {
const ref = useRef(null);
const ref = useRef<HTMLDivElement>(null);
// Pause animation if not in viewport
const isInView = useInView(ref, { once: true, amount: 'all' });
const shouldReduceMotion = useReducedMotion();
Expand Down
8 changes: 4 additions & 4 deletions apps/frontpage/components/home/develop/demo/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import type { AnimationControls, MotionProps } from 'framer-motion';
import { motion } from 'framer-motion';
import type { MotionProps } from 'framer-motion';
import { motion, useAnimation } from 'framer-motion';

interface ControlsProps extends MotionProps {
startTimeControls: AnimationControls;
endTimeControls: AnimationControls;
startTimeControls: ReturnType<typeof useAnimation>;
endTimeControls: ReturnType<typeof useAnimation>;
}

const charVariants = {
Expand Down
2 changes: 1 addition & 1 deletion apps/frontpage/components/home/share/player.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const Player: FC<PlayerProps> = ({ x, y, type, delay, count }) => (
data-chromatic="ignore"
initial="initial"
style={{ left: x, top: y }}
transition={{ type: 'pop', delay, duration: 0.4 }}
transition={{ type: 'spring', delay, duration: 0.4 }}
variants={{
initial: { scale: 0, opacity: 0 },
animate: { scale: 1, opacity: 1 },
Expand Down
38 changes: 38 additions & 0 deletions apps/frontpage/lib/get-llms-banner-lines.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { type DocsVersion } from '@repo/utils';

const baseUrl = 'https://storybook.js.org';

export const getLlmsBannerLines = ({ version }: { version: DocsVersion }) => [
'# Storybook',
'',
'> Storybook is a frontend workshop for building UI components and pages in isolation. It helps with UI development, testing, and documentation.',
'',
`Current version: ${version.label} (${version.id})`,
'',
'## Documentation',
'',
`- [Storybook Docs](${baseUrl}/docs): Main documentation`,
`- [Full Documentation (Markdown)](${baseUrl}/llms-full.txt): Complete documentation in plain text for LLM consumption`,
'',
'## Markdown Access',
'',
'Append `.md` to any docs URL to get clean markdown with code examples:',
`- \`${baseUrl}/docs/writing-stories/decorators.md\``,
`- \`${baseUrl}/docs/9/writing-stories/decorators.md\` (Version 9)`,
'',
'### Query Parameters',
'',
'All markdown endpoints (`.md` URLs and `llms-full.txt`) support these query parameters:',
'- `renderer` - Framework filter for code snippets (default: `react`). Options: `react`, `vue`, `angular`, `svelte`, `web-components`, `solid`, `preact`, `html`, `ember`, `qwik`',
'- `language` - Language filter for code snippets (default: `ts`). Options: `ts`, `js`',
'- `codeOnly` - When `true`, returns only the code snippets without prose',
'',
'Examples:',
'- `GET /docs/writing-stories/decorators.md?renderer=vue&language=ts`',
'- `GET /docs/writing-stories/decorators.md?codeOnly=true`',
'- `GET /llms-full.txt?renderer=angular&language=js`',
'',
'### Versioned Access',
'',
'Prefix the path with a version slug for older versions:',
];
3 changes: 2 additions & 1 deletion apps/frontpage/next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference path="./.next/types/routes.d.ts" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
Loading