[docs] Upgrade to Next.js 15 (#762)

vladmoroz · michaldudak · web-flow · commit 891e7c29a644 · 2024-10-31T18:22:06.000+01:00
Co-authored-by: Michał Dudak &lt;michal@mui.com&gt;
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -385,6 +385,7 @@ workflows:
           <<: *default-context
       - test_unit:
           <<: *default-context
+          name: 'JSDOM tests'
           requires:
             - checkout
       - test_lint:
@@ -397,14 +398,17 @@ workflows:
             - checkout
       - test_types:
           <<: *default-context
+          name: 'Typechecking'
           requires:
             - checkout
       - test_browser:
           <<: *default-context
+          name: 'Browser tests'
           requires:
             - checkout
       - test_regressions:
           <<: *default-context
+          name: 'Regression tests'
           requires:
             - checkout
       - test_e2e:
@@ -439,24 +443,26 @@ workflows:
       - test_regressions:
           <<: *default-context
           react-version: ^17.0.0
-  react-next:
-    triggers:
-      - schedule:
-          cron: '0 0 * * *'
-          filters:
-            branches:
-              only:
-                - master
+  react-18:
+    when:
+      equal: [pipeline, << pipeline.parameters.workflow >>]
     jobs:
       - test_unit:
           <<: *default-context
-          react-version: next
+          name: 'JSDOM tests (React 18)'
+          react-version: '^18'
       - test_browser:
           <<: *default-context
-          react-version: next
+          name: 'Browser tests (React 18)'
+          react-version: '^18'
       - test_regressions:
           <<: *default-context
-          react-version: next
+          name: 'Regression tests (React 18)'
+          react-version: '^18'
+      - test_types:
+          <<: *default-context
+          name: 'Typechecking (React 18)'
+          react-version: '^18'
   typescript-next:
     triggers:
       - schedule:
@@ -468,3 +474,4 @@ workflows:
     jobs:
       - test_types_next:
           <<: *default-context
+          name: 'Typechecking (typescript@next)'
diff --git a/docs/config.ts b/docs/config.ts
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -79,15 +79,16 @@ const nextConfig = {
   },
   distDir: 'export',
   transpilePackages: ['@mui/monorepo'],
-  ...(process.env.NODE_ENV === 'production'
-    ? {
-        output: 'export',
-      }
-    : {}),
+  ...(process.env.NODE_ENV === 'production' ? { output: 'export' } : {}),
   experimental: {
     esmExternals: true,
     workerThreads: false,
   },
+  devIndicators: {
+    appIsrStatus: false,
+  },
 };
 
-export default withDocsInfra(withMdx(nextConfig));
+// Remove deprecated options that come from `withDocsInfra()` and cause warnings
+const { optimizeFonts, ...result } = withMdx(withDocsInfra(nextConfig));
+export default result;
diff --git a/docs/package.json b/docs/package.json
@@ -27,7 +27,7 @@
     "@mdx-js/react": "^3.1.0",
     "@mui/system": "6.1.6",
     "@mui/utils": "6.1.6",
-    "@next/mdx": "^14.2.13",
+    "@next/mdx": "^15.0.1",
     "@react-spring/web": "^9.7.4",
     "@stefanprobst/rehype-extract-toc": "^2.2.0",
     "@types/mdx": "^2.0.13",
@@ -42,14 +42,14 @@
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "next": "^14.2.13",
+    "next": "15.0.1",
     "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
     "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
     "react-error-boundary": "^4.0.13",
-    "react-is": "^18.3.1",
+    "react-is": "19.0.0-rc-69d4b800-20241021",
     "react-router-dom": "^6.23.1",
     "react-runner": "^1.0.5",
     "react-simple-code-editor": "^0.13.1",
@@ -75,8 +75,8 @@
     "@types/hast": "^3.0.4",
     "@types/node": "^18.19.54",
     "@types/prop-types": "^15.7.13",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@types/unist": "^3.0.3",
     "chai": "^4.5.0",
     "framer-motion": "^11.9.0",
diff --git a/docs/src/app/(content)/components/[slug]/page.tsx b/docs/src/app/(content)/components/[slug]/page.tsx
@@ -21,20 +21,17 @@ import { getApiReferenceData } from './getApiReferenceData';
 const CATEGORY_SEGMENT = 'components';
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 function componentNameFromSlug(slug: string) {
   return slug.replace('react-', '');
 }
 
 export default async function ComponentPage(props: Props) {
-  const {
-    params: { slug },
-  } = props;
-
+  const { slug } = await props.params;
   const componentName = componentNameFromSlug(slug);
 
   const { MDXContent, metadata, tableOfContents } = await getMarkdownPage(
@@ -95,7 +92,8 @@ export async function generateStaticParams() {
   return getSlugs(`/${CATEGORY_SEGMENT}`).map((slug) => ({ slug }));
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { slug } = params;
   const componentName = componentNameFromSlug(slug);
   const { title = 'Components', description } = await getMarkdownPageMetadata(
diff --git a/docs/src/app/(content)/getting-started/[slug]/page.tsx b/docs/src/app/(content)/getting-started/[slug]/page.tsx
@@ -14,16 +14,13 @@ import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
 const CATEGORY_SEGMENT = 'getting-started';
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 export default async function DocsPage(props: Props) {
-  const {
-    params: { slug },
-  } = props;
-
+  const { slug } = await props.params;
   const { MDXContent, tableOfContents, metadata } = await getMarkdownPage(
     CATEGORY_SEGMENT,
     slug,
@@ -62,7 +59,8 @@ export async function generateStaticParams() {
   return getSlugs(`/${CATEGORY_SEGMENT}`).map((slug) => ({ slug }));
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { slug } = params;
   const { title = 'Getting started', description } = await getMarkdownPageMetadata(
     CATEGORY_SEGMENT,
diff --git a/docs/src/app/(content)/guides/[slug]/page.tsx b/docs/src/app/(content)/guides/[slug]/page.tsx
@@ -14,16 +14,13 @@ import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
 const CATEGORY_SEGMENT = 'guides';
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 export default async function DocsPage(props: Props) {
-  const {
-    params: { slug },
-  } = props;
-
+  const { slug } = await props.params;
   const { MDXContent, tableOfContents, metadata } = await getMarkdownPage(
     CATEGORY_SEGMENT,
     slug,
@@ -62,7 +59,8 @@ export async function generateStaticParams() {
   return getSlugs(`/${CATEGORY_SEGMENT}`).map((slug) => ({ slug }));
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { slug } = params;
   const { title = 'Guides', description } = await getMarkdownPageMetadata(
     CATEGORY_SEGMENT,
diff --git a/docs/src/app/experiments/[slug]/page.tsx b/docs/src/app/experiments/[slug]/page.tsx
@@ -7,15 +7,13 @@ import { readdir } from 'node:fs/promises';
 import '../../../styles/style.css';
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 export default async function Page(props: Props) {
-  const {
-    params: { slug },
-  } = props;
+  const { slug } = await props.params;
 
   try {
     const Experiment = (await import(`../${slug}.tsx`)).default;
@@ -37,7 +35,8 @@ export async function generateStaticParams() {
     .map((entry: Dirent) => ({ slug: basename(entry.name, extname(entry.name)) }));
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { slug } = params;
 
   return {
diff --git a/docs/src/app/playground/[slug]/page.tsx b/docs/src/app/playground/[slug]/page.tsx
@@ -7,17 +7,15 @@ import { readdir } from 'node:fs/promises';
 import '../../../styles/style.css';
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 const DUMMY_SLUG = '_';
 
 export default async function Page(props: Props) {
-  const {
-    params: { slug },
-  } = props;
+  const { slug } = await props.params;
 
   if (slug === DUMMY_SLUG) {
     notFound();
@@ -46,7 +44,8 @@ export async function generateStaticParams() {
   return routes;
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { slug } = params;
 
   return {
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -8,8 +8,7 @@
     "next-env.d.ts",
     "next.config.mjs",
     ".next/types/**/*.ts",
-    "export/types/**/*.ts",
-    "config.ts"
+    "export/types/**/*.ts"
   ],
   "compilerOptions": {
     "allowJs": true,
diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
     "@types/lodash": "^4.17.9",
     "@types/mocha": "^10.0.8",
     "@types/node": "^18.19.54",
-    "@types/react": "^18.3.10",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
@@ -158,9 +158,9 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
-    "react": "^18.3.1",
+    "react": "19.0.0-rc-69d4b800-20241021",
     "react-docgen": "^5.4.3",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
     "recast": "^0.23.9",
     "remark": "^15.0.1",
     "rimraf": "^5.0.10",
@@ -198,8 +198,8 @@
     "@definitelytyped/typescript-versions": "^0.1.4",
     "@definitelytyped/utils": "^0.1.7",
     "@types/node": "^18.19.54",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "18.3.0"
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   },
   "nyc": {
     "include": [
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
@@ -58,22 +58,22 @@
     "@types/chai": "^4.3.20",
     "@types/chai-dom": "^1.11.3",
     "@types/prop-types": "^15.7.13",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@types/sinon": "^17.0.3",
     "@types/use-sync-external-store": "^0.0.6",
     "chai": "^4.5.0",
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
     "sinon": "^19.0.2",
     "typescript": "^5.6.3"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0 || ^19.0.0-rc",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0 || ^19.0.0-rc"
   },
   "peerDependenciesMeta": {
     "@types/react": {
diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.tsx b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.tsx
@@ -144,7 +144,7 @@ InnerMenuCheckboxItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   typingRef: PropTypes.shape({
-    current: PropTypes.bool,
+    current: PropTypes.bool.isRequired,
   }).isRequired,
 } as any;
 
diff --git a/packages/mui-base/src/Menu/Item/MenuItem.tsx b/packages/mui-base/src/Menu/Item/MenuItem.tsx
@@ -133,7 +133,7 @@ InnerMenuItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   typingRef: PropTypes.shape({
-    current: PropTypes.bool,
+    current: PropTypes.bool.isRequired,
   }).isRequired,
 } as any;
 
diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.tsx b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.tsx
@@ -144,7 +144,7 @@ InnerMenuRadioItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   typingRef: PropTypes.shape({
-    current: PropTypes.bool,
+    current: PropTypes.bool.isRequired,
   }).isRequired,
 } as any;
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/package.json b/test/package.json
