Skip to content

Upgrade Next.js to 15, React to 19, and related deps #409

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

Closed
shilman wants to merge 2 commits into from
Closed

Upgrade Next.js to 15, React to 19, and related deps #409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07fcdd7
Upgrade Next.js to 15, React to 19, and related deps
shilman Apr 13, 2026
749237b
Move outputFileTracingIncludes out of experimental (Next.js 15)
shilman Apr 13, 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
Copy link

Copilot AI Apr 13, 2026

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 repo-wide disables peer dependency resolution errors for all installs, which can mask real version incompatibilities (especially during a major Next/React upgrade) and make runtime issues harder to diagnose. Prefer resolving peer conflicts directly (align @next/*/Storybook versions, use npm overrides, etc.) or scope this to CI/workarounds with clear justification.

Suggested change
legacy-peer-deps=true

Copilot uses AI. Check for mistakes.
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
14 changes: 7 additions & 7 deletions apps/addon-catalog/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@
"@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
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

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

With next upgraded to ^15, this app still has @next/third-parties pinned to ^14.2.4 (earlier in this file). @next/* packages generally track Next’s major version and may enforce it via peer deps; consider bumping @next/third-parties to ^15 to keep the Next toolchain consistent.

Copilot uses AI. Check for mistakes.
"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",
Copy link

Copilot AI Apr 13, 2026

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 has been upgraded to ^15. This can cause peer dependency conflicts and mismatched lint rules; consider upgrading eslint-config-next to the matching 15.x version (or switching to @next/eslint-plugin-next consistently) so linting aligns with the installed Next version.

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>
<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);
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

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

useRef<HTMLDivElement>(null) is incompatible with strictNullChecks (null isn’t assignable to HTMLDivElement) and will fail typecheck. Use useRef<HTMLDivElement | null>(null) (or useRef<HTMLDivElement>(null!) if you truly never expect null) to match the RefObject<HTMLDivElement | null> prop type and useInView usage.

Suggested change
const ref = useRef<HTMLDivElement>(null);
const ref = useRef<HTMLDivElement | null>(null);

Copilot uses AI. Check for mistakes.
// 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.
18 changes: 8 additions & 10 deletions apps/frontpage/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const HISTORICAL_VERSIONS = [

/** @type {import('next').NextConfig} */
module.exports = withBundleAnalyzer(
withPlausibleProxy()({
withPlausibleProxy({ src: 'https://plausible.io/js/script.js' })({
images: {
unoptimized: true,
remotePatterns: [
Expand Down Expand Up @@ -98,15 +98,13 @@ module.exports = withBundleAnalyzer(
return config;
},
transpilePackages: ['@repo/ui', '@repo/utils'],
experimental: {
/**
* This ensures that we can read files from these directories when deployed
* https://vercel.com/guides/how-can-i-use-files-in-serverless-functions#using-next.js
*/
outputFileTracingIncludes: {
'/docs/**': ['./content/docs/**'],
'/md-api/**': ['./content/docs/**', './content/snippets/**'],
},
/**
* This ensures that we can read files from these directories when deployed
* https://vercel.com/guides/how-can-i-use-files-in-serverless-functions#using-next.js
*/
outputFileTracingIncludes: {
'/docs/**': ['./content/docs/**'],
'/md-api/**': ['./content/docs/**', './content/snippets/**'],
},
skipTrailingSlashRedirect: true,
async rewrites() {
Expand Down
Loading
Loading