Upgarde to Next.js 15

docs/next.config.mjs → docs/next.config.ts

@@ -1,25 +1,20 @@
-// @ts-check
 import * as path from 'path';
 import * as url from 'url';
 import * as fs from 'fs';
-// eslint-disable-next-line no-restricted-imports
-import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js';
+import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra';
+import { NextConfig } from 'next';
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 const workspaceRoot = path.resolve(currentDirectory, '../');
 
-/**
- * @returns {{version: string}}
- */
-function loadPackageJson() {
+function loadPackageJson(): { version: string } {
   const pkgContent = fs.readFileSync(path.resolve(workspaceRoot, 'package.json'), 'utf8');
   return JSON.parse(pkgContent);
 }
 
 const rootPackage = loadPackageJson();
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   trailingSlash: false,
   env: {
     // docs-infra
@@ -56,15 +51,15 @@ 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,
   },
 };
 
-export default withDocsInfra(nextConfig);
+const result = withDocsInfra(nextConfig);
+// Delete deprecated options that come from `withDocsInfra()` and cause warnings
+delete result.optimizeFonts;
+
+export default result;

docs/package.json

@@ -39,14 +39,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",
@@ -70,8 +70,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:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
     "@types/unist": "^3.0.3",
     "chai": "^4.5.0",
     "framer-motion": "^11.9.0",

docs/shiki.config.ts

@@ -0,0 +1,4 @@
+export const shikiTheme = {
+  light: 'github-light-default',
+  dark: 'material-theme-ocean',
+};

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(
@@ -93,7 +90,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(

docs/src/app/(content)/getMarkdownPage.ts

@@ -12,7 +12,7 @@ import extractToc, { type Toc } from '@stefanprobst/rehype-extract-toc';
 import exportToc from '@stefanprobst/rehype-extract-toc/mdx';
 import { read as readVFile } from 'to-vfile';
 import { matter } from 'vfile-matter';
-import { config } from 'docs/config';
+import { shikiTheme } from 'docs/shiki.config';
 
 export const DATA_PATH = path.join(process.cwd(), 'data');
 
@@ -49,12 +49,7 @@ export const getMarkdownPage = async (basePath: string, slug: string) => {
   } = await evaluate(mdxSource, {
     ...jsxRuntime,
     remarkPlugins: [remarkGfm, remarkFrontmatter, remarkMdxFrontmatter],
-    rehypePlugins: [
-      [rehypePrettyCode, { theme: config.shikiThemes }],
-      rehypeSlug,
-      extractToc,
-      exportToc,
-    ],
+    rehypePlugins: [[rehypePrettyCode, { theme: shikiTheme }], rehypeSlug, extractToc, exportToc],
   });
 
   return {

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,

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,

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 {

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 {

docs/src/components/demo/loadDemo.ts

@@ -2,7 +2,7 @@ import { existsSync, statSync } from 'node:fs';
 import { readFile, readdir } from 'node:fs/promises';
 import { basename, dirname, extname, resolve } from 'node:path';
 import { codeToHtml } from 'shiki';
-import { config } from 'docs/config';
+import { shikiTheme } from 'docs/shiki.config';
 import { DemoFile, DemoVariant } from 'docs/src/blocks/Demo';
 
 const COMPONENTS_BASE_PATH = 'data/components';
@@ -66,7 +66,7 @@ async function getThemeFile(): Promise<DemoFile> {
   const content = await readFile(path, 'utf-8');
   const prettyContent = await codeToHtml(content, {
     lang: 'css',
-    themes: config.shikiThemes,
+    themes: shikiTheme,
   });
 
   return {
@@ -101,7 +101,7 @@ async function loadSimpleDemo(path: string, variantName: string): Promise<DemoVa
   const mainContent = await readFile(mainFilePath, 'utf-8');
   const mainPrettyContent = await codeToHtml(mainContent, {
     lang: `${mainFileLanguage}x`,
-    themes: config.shikiThemes,
+    themes: shikiTheme,
   });
 
   const localImports = getLocalImports(mainContent, dirname(mainFilePath));
@@ -129,7 +129,7 @@ async function loadSimpleDemo(path: string, variantName: string): Promise<DemoVa
     const jsContent = await readFile(jsFilePath, 'utf-8');
     const jsPrettyPromise = await codeToHtml(jsContent, {
       lang: 'jsx',
-      themes: config.shikiThemes,
+      themes: shikiTheme,
     });
 
     const jsLocalImports = getLocalImports(mainContent, dirname(jsFilePath));
@@ -202,7 +202,7 @@ async function getDependencyFiles(paths: string[], preferTs: boolean): Promise<D
       const content = await readFile(path, 'utf-8');
       const prettyContent = await codeToHtml(content, {
         lang: extension.slice(1),
-        themes: config.shikiThemes,
+        themes: shikiTheme,
       });
 
       const canHaveDependencies = type === 'ts' || type === 'js';

docs/tsconfig.json

@@ -1,15 +1,16 @@
 {
   "extends": "../tsconfig.base.json",
   "include": [
-    "data",
+    "data/*.tsx",
+    "data/*.ts",
     "scripts/*.mts",
     "src",
     "types.d.ts",
     "next-env.d.ts",
-    "next.config.mjs",
+    "next.config.ts",
     ".next/types/**/*.ts",
     "export/types/**/*.ts",
-    "config.ts"
+    "shiki.config.ts"
   ],
   "compilerOptions": {
     "allowJs": true,

docs/types.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="gtag.js" />
 
 declare module 'gtag.js';
-declare module '@mui/monorepo/docs/nextConfigDocsInfra.js';
+declare module '@mui/monorepo/docs/nextConfigDocsInfra';