diff --git a/docs/.env b/docs/.env
index e79e6f46e8e1a3..f0fe34e156684a 100644
--- a/docs/.env
+++ b/docs/.env
@@ -1,2 +1,6 @@
+BUILD_ONLY_ENGLISH_LOCALE=true
 FEEDBACK_URL=https://hgvi836wi8.execute-api.us-east-1.amazonaws.com
-NEXT_PUBLIC_MUI_CHAT_API_BASE_URL=https://chat-backend.mui.com
\ No newline at end of file
+GITHUB_TEMPLATE_DOCS_FEEDBACK=4.docs-feedback.yml
+NEXT_PUBLIC_MUI_CHAT_API_BASE_URL=https://chat-backend.mui.com
+SOURCE_CODE_REPO=https://github.com/mui/material-ui
+SOURCE_GITHUB_BRANCH=master
diff --git a/docs/README.md b/docs/README.md
index e564a475ff68fe..d9793311de3d81 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -17,7 +17,6 @@ Package managers other than pnpm (like npm or Yarn) are not supported and will n
 [You can follow this guide](https://github.com/mui/material-ui/blob/HEAD/CONTRIBUTING.md)
 on how to get started contributing to MUI.
 
-## How do I help to improve the translations?
+## Translations
 
-Please visit https://crowdin.com/project/material-ui-docs where you will be able to select a language and edit the translations.
-Please don't submit pull requests directly.
+Are currently disabled https://github.com/mui/material-ui/issues/33445
diff --git a/docs/app/appWrapper.tsx b/docs/app/appWrapper.tsx
new file mode 100644
index 00000000000000..f4c91c9b07fdf8
--- /dev/null
+++ b/docs/app/appWrapper.tsx
@@ -0,0 +1,329 @@
+'use client';
+import { CodeCopyProvider } from '@mui/docs/CodeCopy';
+import { DocsProvider } from '@mui/docs/DocsProvider';
+import { useRouter } from '@mui/docs/routing';
+import joyPkgJson from '@mui/joy/package.json';
+import materialPkgJson from '@mui/material/package.json';
+import systemPkgJson from '@mui/system/package.json';
+import { LicenseInfo } from '@mui/x-license';
+import docsInfraPages from 'docs/data/docs-infra/pages';
+import generalDocsPages from 'docs/data/docs/pages';
+import joyPages from 'docs/data/joy/pages';
+import materialPages from 'docs/data/material/pages';
+import systemPages from 'docs/data/system/pages';
+import SvgMuiLogomark, {
+  muiSvgLogoString,
+  muiSvgWordmarkString,
+} from 'docs/src/icons/SvgMuiLogomark';
+import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
+import PageContext from 'docs/src/modules/components/PageContext';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
+import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant';
+import findActivePage from 'docs/src/modules/utils/findActivePage';
+import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
+import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
+import { defaultLanguage, getTranslations } from 'docs/src/modules/utils/i18n';
+import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProviderApp';
+import { loadCSS } from 'fg-loadcss';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import * as config from '../config';
+
+interface Props {
+  children: React.ReactNode;
+  userLanguage: string;
+}
+
+// Remove the license warning from demonstration purposes
+LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE!);
+
+let reloadInterval: number;
+
+// Avoid infinite loop when "Upload on reload" is set in the Chrome sw dev tools.
+function lazyReload() {
+  window.clearInterval(reloadInterval);
+  reloadInterval = window.setInterval(() => {
+    if (document.hasFocus()) {
+      window.location.reload();
+    }
+  }, 100);
+}
+
+// Inspired by
+// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users
+function forcePageReload(registration: ServiceWorkerRegistration) {
+  if (!navigator.serviceWorker.controller) {
+    // The window client isn't currently controlled so it's a new service
+    // worker that will activate immediately.
+    return;
+  }
+
+  if (registration.waiting) {
+    // SW is waiting to activate. Can occur if multiple clients open and
+    // one of the clients is refreshed.
+    registration.waiting.postMessage('skipWaiting');
+    return;
+  }
+
+  function listenInstalledStateChange() {
+    registration.installing!.addEventListener('statechange', (event) => {
+      const target = event.target as unknown as { state: string };
+
+      if (target.state === 'installed' && registration.waiting) {
+        // A new service worker is available, inform the user
+        registration.waiting.postMessage('skipWaiting');
+      } else if (target.state === 'activated') {
+        // Force the control of the page by the activated service worker.
+        lazyReload();
+      }
+    });
+  }
+
+  if (registration.installing) {
+    listenInstalledStateChange();
+    return;
+  }
+
+  // We are currently controlled so a new SW may be found...
+  // Add a listener in case a new SW is found,
+  registration.addEventListener('updatefound', listenInstalledStateChange);
+}
+
+async function registerServiceWorker() {
+  if (
+    'serviceWorker' in navigator &&
+    process.env.NODE_ENV === 'production' &&
+    window.location.host.includes('mui.com')
+  ) {
+    // register() automatically attempts to refresh the sw.js.
+    const registration = await navigator.serviceWorker.register('/sw.js');
+    forcePageReload(registration);
+  }
+}
+
+let dependenciesLoaded = false;
+
+function loadDependencies() {
+  if (dependenciesLoaded) {
+    return;
+  }
+
+  dependenciesLoaded = true;
+
+  loadCSS(
+    'https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Two+Tone',
+    document.querySelector('#material-icon-font') as HTMLElement,
+  );
+}
+
+/**
+ * Preconnect allows the browser to setup early connections before an HTTP request
+   is actually sent to the server.
+   This includes DNS lookups, TLS negotiations, TCP handshakes.
+ */
+function preconnectResources() {
+  ReactDOM.preconnect('https://fonts.gstatic.com', { crossOrigin: 'anonymous' });
+  ReactDOM.preconnect('https://fonts.googleapis.com');
+}
+
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
+  // eslint-disable-next-line no-console
+  console.log(
+    `%c
+
+███╗   ███╗ ██╗   ██╗ ██████╗
+████╗ ████║ ██║   ██║   ██╔═╝
+██╔████╔██║ ██║   ██║   ██║
+██║╚██╔╝██║ ██║   ██║   ██║
+██║ ╚═╝ ██║ ╚██████╔╝ ██████╗
+╚═╝     ╚═╝  ╚═════╝  ╚═════╝
+
+Tip: you can access the documentation \`theme\` object directly in the console.
+`,
+    'font-family:monospace;color:#1976d2;font-size:12px;',
+  );
+}
+
+export default function AppWrapper(props: Props) {
+  const { children, userLanguage } = props;
+
+  const router = useRouter();
+  const translations = getTranslations();
+
+  // TODO move productId & productCategoryId resolution to page layout.
+  // We should use the productId field from the markdown and fallback to getProductInfoFromUrl()
+  // if not present
+  const { productId, productCategoryId } = getProductInfoFromUrl(router.pathname);
+
+  React.useEffect(() => {
+    loadDependencies();
+    registerServiceWorker();
+    preconnectResources();
+
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles) {
+      jssStyles.parentElement!.removeChild(jssStyles);
+    }
+  }, []);
+
+  const productIdentifier = React.useMemo(() => {
+    const languagePrefix = userLanguage === defaultLanguage ? '' : `/${userLanguage}`;
+
+    if (productId === 'material-ui') {
+      return {
+        metadata: '',
+        name: 'Material UI',
+        logo: SvgMuiLogomark,
+        logoSvg: muiSvgLogoString,
+        wordmarkSvg: muiSvgWordmarkString,
+        versions: [
+          { text: `v${materialPkgJson.version}`, current: true },
+          {
+            text: 'v6',
+            href: `https://v6.mui.com${languagePrefix}/material-ui/getting-started/`,
+          },
+          {
+            text: 'v5',
+            href: `https://v5.mui.com${languagePrefix}/getting-started/installation/`,
+          },
+          {
+            text: 'v4',
+            href: `https://v4.mui.com${languagePrefix}/getting-started/installation/`,
+          },
+          {
+            text: 'View all versions',
+            href: `https://mui.com${languagePrefix}/versions/`,
+          },
+        ],
+      };
+    }
+
+    if (productId === 'joy-ui') {
+      return {
+        metadata: '',
+        name: 'Joy UI',
+        logo: SvgMuiLogomark,
+        logoSvg: muiSvgLogoString,
+        wordmarkSvg: muiSvgWordmarkString,
+        versions: [{ text: `v${joyPkgJson.version}`, current: true }],
+      };
+    }
+
+    if (productId === 'system') {
+      return {
+        metadata: '',
+        name: 'MUI System',
+        logo: SvgMuiLogomark,
+        logoSvg: muiSvgLogoString,
+        wordmarkSvg: muiSvgWordmarkString,
+        versions: [
+          { text: `v${systemPkgJson.version}`, current: true },
+          { text: 'v6', href: `https://v6.mui.com${languagePrefix}/system/getting-started/` },
+          { text: 'v5', href: `https://v5.mui.com${languagePrefix}/system/getting-started/` },
+          { text: 'v4', href: `https://v4.mui.com${languagePrefix}/system/basics/` },
+          {
+            text: 'View all versions',
+            href: `https://mui.com${languagePrefix}/versions/`,
+          },
+        ],
+      };
+    }
+
+    if (productId === 'docs-infra') {
+      return {
+        metadata: '',
+        name: 'Docs-infra',
+        logo: SvgMuiLogomark,
+        logoSvg: muiSvgLogoString,
+        wordmarkSvg: muiSvgWordmarkString,
+        versions: [
+          {
+            text: 'v0.0.0',
+            href: `https://mui.com${languagePrefix}/versions/`,
+          },
+        ],
+      };
+    }
+
+    if (productId === 'docs') {
+      return {
+        metadata: '',
+        name: 'Home docs',
+        logo: SvgMuiLogomark,
+        logoSvg: muiSvgLogoString,
+        wordmarkSvg: muiSvgWordmarkString,
+        versions: [
+          {
+            text: 'v0.0.0',
+            href: `https://mui.com${languagePrefix}/versions/`,
+          },
+        ],
+      };
+    }
+
+    return null;
+  }, [userLanguage, productId]);
+
+  const pageContextValue = React.useMemo(() => {
+    let pages = generalDocsPages;
+    if (productId === 'material-ui') {
+      pages = materialPages;
+    } else if (productId === 'joy-ui') {
+      pages = joyPages;
+    } else if (productId === 'system') {
+      pages = systemPages;
+    } else if (productId === 'docs-infra') {
+      pages = docsInfraPages;
+    }
+
+    const { activePage, activePageParents } = findActivePage([...pages], router.pathname);
+
+    return {
+      activePage,
+      activePageParents,
+      pages: [...pages],
+      productIdentifier: productIdentifier!,
+      productId,
+      productCategoryId,
+    };
+  }, [productId, productCategoryId, productIdentifier, router.pathname]);
+
+  let fonts: string[] = [
+    'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap',
+  ];
+  if (pathnameToLanguage(router.pathname).canonicalAs.match(/onepirate/)) {
+    fonts = [
+      'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Work+Sans:wght@300;400&display=swap',
+    ];
+  }
+
+  return (
+    <React.Fragment>
+      {fonts.map((font) => (
+        <link rel="stylesheet" href={font} key={font} />
+      ))}
+      <meta name="mui:productId" content={productId} />
+      <meta name="mui:productCategoryId" content={productCategoryId} />
+      <DocsProvider
+        config={config}
+        adConfig={{ GADisplayRatio: 0.1 }}
+        defaultUserLanguage={userLanguage}
+        translations={translations}
+      >
+        <CodeCopyProvider>
+          <CodeVariantProvider>
+            <PageContext.Provider value={pageContextValue}>
+              <ThemeProvider>
+                <DocsStyledEngineProvider>
+                  {children}
+                  <GoogleAnalytics />
+                </DocsStyledEngineProvider>
+              </ThemeProvider>
+            </PageContext.Provider>
+          </CodeVariantProvider>
+        </CodeCopyProvider>
+      </DocsProvider>
+    </React.Fragment>
+  );
+}
diff --git a/docs/app/custom404.tsx b/docs/app/custom404.tsx
new file mode 100644
index 00000000000000..281b7df0aaf647
--- /dev/null
+++ b/docs/app/custom404.tsx
@@ -0,0 +1,21 @@
+'use client';
+import Divider from '@mui/material/Divider';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import NotFoundHero from 'docs/src/components/NotFoundHero';
+import AppFooter from 'docs/src/layouts/AppFooter';
+import AppHeader from 'docs/src/layouts/AppHeader';
+
+export default function Custom404() {
+  return (
+    <BrandingCssVarsProvider>
+      <AppHeaderBanner />
+      <AppHeader />
+      <main id="main-content">
+        <NotFoundHero />
+        <Divider />
+      </main>
+      <AppFooter />
+    </BrandingCssVarsProvider>
+  );
+}
diff --git a/docs/app/global.css b/docs/app/global.css
new file mode 100644
index 00000000000000..74d496b6e3b1c7
--- /dev/null
+++ b/docs/app/global.css
@@ -0,0 +1,133 @@
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+@config '../tailwind.config.mjs';
+
+/*
+  Loads General Sans: Regular (400), Medium (500), SemiBold (600), Bold (700)
+  Typeface documentation: https://www.fontshare.com/fonts/general-sans
+  use https://cssminifier.com/ to minify
+*/
+@font-face {
+  font-family: 'General Sans';
+  src:
+    url(/static/fonts/GeneralSans-Regular.woff2) format('woff2'),
+    url(/static/fonts/GeneralSans-Regular.ttf) format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'General Sans';
+  src:
+    url(/static/fonts/GeneralSans-Medium.woff2) format('woff2'),
+    url(/static/fonts/GeneralSans-Medium.ttf) format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'General Sans';
+  src:
+    url(/static/fonts/GeneralSans-SemiBold.woff2) format('woff2'),
+    url(/static/fonts/GeneralSans-SemiBold.ttf) format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'General Sans';
+  src:
+    url(/static/fonts/GeneralSans-Bold.woff2) format('woff2'),
+    url(/static/fonts/GeneralSans-Bold.ttf) format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/*
+  Loads IBM Plex Sans: 400,500,700 & IBM Plex Mono: 400, 600
+  use https://cssminifier.com/ to minify
+*/
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src:
+    url(/static/fonts/IBMPlexSans-Regular.woff2) format('woff2'),
+    url(/static/fonts/IBMPlexSans-Regular.woff) format('woff'),
+    url(/static/fonts/IBMPlexSans-Regular.ttf) format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src:
+    url(/static/fonts/IBMPlexSans-Medium.woff2) format('woff2'),
+    url(/static/fonts/IBMPlexSans-Medium.woff) format('woff'),
+    url(/static/fonts/IBMPlexSans-Medium.ttf) format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src:
+    url(/static/fonts/IBMPlexSans-SemiBold.woff2) format('woff2'),
+    url(/static/fonts/IBMPlexSans-SemiBold.woff) format('woff'),
+    url(/static/fonts/IBMPlexSans-SemiBold.ttf) format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src:
+    url(/static/fonts/IBMPlexSans-Bold.woff2) format('woff2'),
+    url(/static/fonts/IBMPlexSans-Bold.woff) format('woff'),
+    url(/static/fonts/IBMPlexSans-Bold.ttf) format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* First SSR paint */
+.only-light-mode {
+  display: 'block';
+}
+.only-dark-mode {
+  display: 'none';
+}
+
+/* Post SSR Hydration */
+.mode-dark .only-light-mode {
+  display: 'none';
+}
+.mode-dark .only-dark-mode {
+  display: 'block';
+}
+
+/* TODO migrate to .only-dark-mode to .only-dark-mode-v2 */
+[data-mui-color-scheme='light'] .only-dark-mode-v2 {
+  display: 'none';
+}
+[data-mui-color-scheme='dark'] .only-light-mode-v2 {
+  display: 'none';
+}
+
+.plan-pro,
+.plan-premium {
+  display: 'inline-block';
+  height: '0.9em';
+  width: '1em';
+  vertical-align: 'middle';
+  margin-left: '0.3em';
+  margin-bottom: '0.08em';
+  background-size: 'contain';
+  background-repeat: 'no-repeat';
+  flex-shrink: 0;
+}
+.plan-pro {
+  background-image: 'url(/static/x/pro.svg)';
+}
+.plan-premium {
+  background-image: 'url(/static/x/premium.svg)';
+}
diff --git a/docs/pages/index.tsx b/docs/app/home.tsx
similarity index 59%
rename from docs/pages/index.tsx
rename to docs/app/home.tsx
index 0bb1798a14d507..32342f7ea41537 100644
--- a/docs/pages/index.tsx
+++ b/docs/app/home.tsx
@@ -1,50 +1,46 @@
-import * as React from 'react';
-import NoSsr from '@mui/material/NoSsr';
+'use client';
 import Divider from '@mui/material/Divider';
-import Head from 'docs/src/modules/components/Head';
-import AppHeader from 'docs/src/layouts/AppHeader';
+import NoSsr from '@mui/material/NoSsr';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import DesignSystemComponents from 'docs/src/components/home/DesignSystemComponents';
 import Hero from 'docs/src/components/home/Hero';
-import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
+import HeroEnd from 'docs/src/components/home/HeroEnd';
+import NewsletterToast from 'docs/src/components/home/NewsletterToast';
 import ProductSuite from 'docs/src/components/home/ProductSuite';
-import ValueProposition from 'docs/src/components/home/ValueProposition';
-import DesignSystemComponents from 'docs/src/components/home/DesignSystemComponents';
-import Testimonials from 'docs/src/components/home/Testimonials';
+import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import Sponsors from 'docs/src/components/home/Sponsors';
-import HeroEnd from 'docs/src/components/home/HeroEnd';
+import Testimonials from 'docs/src/components/home/Testimonials';
+import ValueProposition from 'docs/src/components/home/ValueProposition';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
-import NewsletterToast from 'docs/src/components/home/NewsletterToast';
-import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import { Suspense } from 'react';
 
 export default function Home() {
   return (
     <BrandingCssVarsProvider>
-      <Head
-        title="MUI: The React component library you always wanted"
-        description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
-        card="/static/social-previews/home-preview.jpg"
-      >
-        <script
-          type="application/ld+json"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              '@context': 'https://schema.org',
-              '@type': 'Organization',
-              name: 'MUI',
-              url: 'https://mui.com/',
-              logo: 'https://mui.com/static/logo.png',
-              sameAs: [
-                'https://x.com/MUI_hq',
-                'https://github.com/mui/',
-                'https://opencollective.com/mui-org',
-              ],
-            }),
-          }}
-        />
-      </Head>
+      <script
+        type="application/ld+json"
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            '@context': 'https://schema.org',
+            '@type': 'Organization',
+            name: 'MUI',
+            url: 'https://mui.com/',
+            logo: 'https://mui.com/static/logo.png',
+            sameAs: [
+              'https://x.com/MUI_hq',
+              'https://github.com/mui/',
+              'https://opencollective.com/mui-org',
+            ],
+          }),
+        }}
+      />
       <NoSsr>
-        <NewsletterToast />
+        <Suspense>
+          <NewsletterToast />
+        </Suspense>
       </NoSsr>
       <AppHeaderBanner />
       <AppHeader />
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
new file mode 100644
index 00000000000000..f64df8a5726fd6
--- /dev/null
+++ b/docs/app/layout.tsx
@@ -0,0 +1,115 @@
+import 'docs/src/modules/components/bootstrap';
+// --- Post bootstrap -----
+import { getMetaThemeColor } from '@mui/docs/branding';
+import JoyInitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
+import MuiInitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+import { GenerateMetadataProps } from 'docs/src/modules/utils/createMetadata';
+import { defaultLanguage } from 'docs/src/modules/utils/i18n';
+import { Metadata, Viewport } from 'next';
+import Script from 'next/script';
+import * as React from 'react';
+import '../public/static/components-gallery/base-theme.css';
+import AppWrapper from './appWrapper';
+import './global.css';
+
+const PRODUCTION_GA =
+  process.env.NEXT_PUBLIC_DEPLOY_ENV === 'production' ||
+  process.env.NEXT_PUBLIC_DEPLOY_ENV === 'staging';
+
+const GOOGLE_ANALYTICS_ID_V4 = PRODUCTION_GA ? 'G-5NXDQLC2ZK' : 'G-XJ83JQEK7J';
+
+export const viewport: Viewport = {
+  // PWA primary color
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: getMetaThemeColor('light') },
+    { media: '(prefers-color-scheme: dark)', color: getMetaThemeColor('dark') },
+  ],
+};
+
+export async function generateMetadata(props: GenerateMetadataProps): Promise<Metadata> {
+  return {
+    icons: {
+      apple: { sizes: '180x180', url: '/static/icons/180x180.png' }, // iOS Icon
+      icon: '/static/favicon.ico',
+    },
+    /*
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    */
+    manifest: '/static/manifest.json',
+  };
+}
+
+export default async function RootLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ lang?: string }>;
+}) {
+  const { lang } = await params;
+  const userLanguage = lang ?? defaultLanguage;
+
+  return (
+    <html lang={userLanguage} suppressHydrationWarning>
+      <body>
+        {/* ========== Font preload (prevent font flash) ============= */}
+        <link
+          rel="preload"
+          // optimized for english characters (40kb -> 6kb)
+          href="/static/fonts/GeneralSans-Semibold-subset.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <style
+          // the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: `@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/GeneralSans-Semibold-subset.woff2') format('woff2');}`,
+          }}
+        />
+        <link
+          rel="preload"
+          // optimized for english characters (40kb -> 6kb)
+          href="/static/fonts/IBMPlexSans-Regular-subset.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <style
+          // the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: `@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexSans-Regular-subset.woff2') format('woff2');}`,
+          }}
+        />
+        <MuiInitColorSchemeScript defaultMode="system" />
+        <JoyInitColorSchemeScript defaultMode="system" />
+        <AppWrapper userLanguage={userLanguage}>{children}</AppWrapper>
+        <script
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+window.gtag = gtag;
+gtag('js', new Date());
+gtag('config', '${GOOGLE_ANALYTICS_ID_V4}', {
+  send_page_view: false,
+});
+        `,
+          }}
+        />
+        {/**
+         * A better alternative to <script async>, to delay its execution
+         * https://developer.chrome.com/blog/script-component/
+         */}
+        <Script
+          strategy="afterInteractive"
+          src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID_V4}`}
+        />
+      </body>
+    </html>
+  );
+}
diff --git a/docs/app/not-found.tsx b/docs/app/not-found.tsx
new file mode 100644
index 00000000000000..c1be620273f91b
--- /dev/null
+++ b/docs/app/not-found.tsx
@@ -0,0 +1,14 @@
+import createMetadata, { GenerateMetadataProps } from 'docs/src/modules/utils/createMetadata';
+import { Metadata } from 'next';
+import Custom404 from './custom404';
+
+export function generateMetadata(props: GenerateMetadataProps): Promise<Metadata> {
+  return createMetadata(props, {
+    description: '',
+    title: '404: This page could not be found - MUI',
+  });
+}
+
+export default function NotFound() {
+  return <Custom404 />;
+}
diff --git a/docs/app/page.tsx b/docs/app/page.tsx
new file mode 100644
index 00000000000000..890a6a53f2d980
--- /dev/null
+++ b/docs/app/page.tsx
@@ -0,0 +1,16 @@
+import createMetadata, { GenerateMetadataProps } from 'docs/src/modules/utils/createMetadata';
+import { Metadata } from 'next';
+import Home from './home';
+
+export function generateMetadata(props: GenerateMetadataProps): Promise<Metadata> {
+  return createMetadata(props, {
+    card: '/static/social-previews/home-preview.jpg',
+    description:
+      'MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.',
+    title: 'MUI: The React component library you always wanted',
+  });
+}
+
+export default function Page() {
+  return <Home />;
+}
diff --git a/docs/babel.config.js b/docs/babel.config.js
deleted file mode 100644
index 98e6407f1a83a2..00000000000000
--- a/docs/babel.config.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const fse = require('fs-extra');
-
-const { version: transformRuntimeVersion } = fse.readJSONSync(
-  require.resolve('@babel/runtime-corejs2/package.json'),
-);
-
-module.exports = {
-  assumptions: {
-    noDocumentAll: true,
-    setSpreadProperties: true,
-  },
-  presets: [
-    // backport of https://github.com/vercel/next.js/pull/9511
-    [
-      'next/babel',
-      {
-        'preset-react': { runtime: 'automatic' },
-        'transform-runtime': { corejs: 2, version: transformRuntimeVersion },
-      },
-    ],
-  ],
-  plugins: ['babel-plugin-optimize-clsx'],
-  ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
-  env: {
-    production: {
-      plugins: [
-        '@babel/plugin-transform-react-constant-elements',
-        ['babel-plugin-react-remove-properties'],
-        ['babel-plugin-transform-react-remove-prop-types', { mode: 'remove' }],
-      ],
-    },
-  },
-};
diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js
index 94ce2985e85c94..6af88b31caca6f 100644
--- a/docs/data/joy/getting-started/templates/TemplateCollection.js
+++ b/docs/data/joy/getting-started/templates/TemplateCollection.js
@@ -283,8 +283,8 @@ export default function TemplateCollection() {
                       .createJoyTemplate({
                         ...item,
                         title: `${startCase(template.name)} Template - Joy UI`,
-                        githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
-                          process.env.LIB_VERSION
+                        githubLocation: `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/blob/v${
+                          process.env.NEXT_PUBLIC_LIB_VERSION
                         }/docs/data/joy/templates/${template.name}/App.${
                           item.codeVariant === 'TS' ? 'tsx' : 'js'
                         }`,
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Features.js b/docs/data/material/getting-started/templates/marketing-page/components/Features.js
index 811378a5d7ee9d..1fc60b63bbb7f2 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Features.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Features.js
@@ -18,24 +18,24 @@ const items = [
     title: 'Dashboard',
     description:
       'This item could provide a snapshot of the most important metrics or data points related to the product.',
-    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-light.png")`,
-    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-dark.png")`,
+    imageLight: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-light.png")`,
+    imageDark: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-dark.png")`,
   },
   {
     icon: <EdgesensorHighRoundedIcon />,
     title: 'Mobile integration',
     description:
       'This item could provide information about the mobile app version of the product.',
-    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-light.png")`,
-    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-dark.png")`,
+    imageLight: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-light.png")`,
+    imageDark: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-dark.png")`,
   },
   {
     icon: <DevicesRoundedIcon />,
     title: 'Available on all platforms',
     description:
       'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
-    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-light.png")`,
-    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-dark.png")`,
+    imageLight: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-light.png")`,
+    imageDark: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-dark.png")`,
   },
 ];
 
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx
index 742c24a39654a3..d80069cc5ff113 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx
@@ -17,24 +17,24 @@ const items = [
     title: 'Dashboard',
     description:
       'This item could provide a snapshot of the most important metrics or data points related to the product.',
-    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-light.png")`,
-    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-dark.png")`,
+    imageLight: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-light.png")`,
+    imageDark: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-dark.png")`,
   },
   {
     icon: <EdgesensorHighRoundedIcon />,
     title: 'Mobile integration',
     description:
       'This item could provide information about the mobile app version of the product.',
-    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-light.png")`,
-    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-dark.png")`,
+    imageLight: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-light.png")`,
+    imageDark: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-dark.png")`,
   },
   {
     icon: <DevicesRoundedIcon />,
     title: 'Available on all platforms',
     description:
       'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
-    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-light.png")`,
-    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-dark.png")`,
+    imageLight: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-light.png")`,
+    imageDark: `url("${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-dark.png")`,
   },
 ];
 
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Hero.js b/docs/data/material/getting-started/templates/marketing-page/components/Hero.js
index 39242abe5d2e0b..eb9d8b130de7c6 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Hero.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Hero.js
@@ -21,7 +21,7 @@ const StyledBox = styled('div')(({ theme }) => ({
   border: '1px solid',
   borderColor: (theme.vars || theme).palette.grey[200],
   boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)',
-  backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
+  backgroundImage: `url(${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
   backgroundSize: 'cover',
   [theme.breakpoints.up('sm')]: {
     marginTop: theme.spacing(10),
@@ -29,7 +29,7 @@ const StyledBox = styled('div')(({ theme }) => ({
   },
   ...theme.applyStyles('dark', {
     boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
-    backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
+    backgroundImage: `url(${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
     outlineColor: 'hsla(220, 20%, 42%, 0.1)',
     borderColor: (theme.vars || theme).palette.grey[700],
   }),
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx
index 687eaa8eef5437..de88445a0abc32 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx
@@ -21,7 +21,7 @@ const StyledBox = styled('div')(({ theme }) => ({
   border: '1px solid',
   borderColor: (theme.vars || theme).palette.grey[200],
   boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)',
-  backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
+  backgroundImage: `url(${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
   backgroundSize: 'cover',
   [theme.breakpoints.up('sm')]: {
     marginTop: theme.spacing(10),
@@ -29,7 +29,7 @@ const StyledBox = styled('div')(({ theme }) => ({
   },
   ...theme.applyStyles('dark', {
     boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
-    backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
+    backgroundImage: `url(${process.env.NEXT_PUBLIC_TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
     outlineColor: 'hsla(220, 20%, 42%, 0.1)',
     borderColor: (theme.vars || theme).palette.grey[700],
   }),
diff --git a/docs/middleware.ts b/docs/middleware.ts
new file mode 100644
index 00000000000000..155d92837018bc
--- /dev/null
+++ b/docs/middleware.ts
@@ -0,0 +1,16 @@
+import { NextResponse, NextRequest } from 'next/server';
+
+/**
+ * Hide experiments in production
+ */
+export function middleware(request: NextRequest) {
+  if (process.env.NODE_ENV === 'production') {
+    return NextResponse.rewrite(new URL('/404', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: '/experiments/:path*',
+};
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
index 52e831b4342482..3cd7048ed9471e 100644
--- a/docs/next-env.d.ts
+++ b/docs/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/docs/next.config.ts b/docs/next.config.ts
index e8a43b3562a494..dbfa1d6fa38c03 100644
--- a/docs/next.config.ts
+++ b/docs/next.config.ts
@@ -1,19 +1,16 @@
 // @ts-check
-import * as path from 'path';
-import * as url from 'url';
 import * as fs from 'fs';
-// @ts-ignore
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { createRequire } from 'module';
 import { NextConfig } from 'next';
-import { findPages } from './src/modules/utils/find';
-import { LANGUAGES, LANGUAGES_SSR, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config';
+import * as path from 'path';
+import * as url from 'url';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { LANGUAGES, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config';
+import { withDocsInfra } from './nextConfigDocsInfra';
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 const require = createRequire(import.meta.url);
 
-const withDocsInfra = require('./nextConfigDocsInfra');
-
 const workspaceRoot = path.join(currentDirectory, '../');
 
 const l10nPRInNetlify = /^l10n_/.test(process.env.HEAD || '') && process.env.NETLIFY === 'true';
@@ -78,7 +75,9 @@ export default withDocsInfra({
 
     // @ts-ignore
     config.module.rules.forEach((rule) => {
-      rule.resourceQuery = { not: [/raw/] };
+      if (!rule.resourceQuery) {
+        rule.resourceQuery = { not: [/raw/] };
+      }
     });
 
     return {
@@ -144,8 +143,8 @@ export default withDocsInfra({
                         },
                       ],
                       env: {
-                        SOURCE_CODE_REPO: options.config.env.SOURCE_CODE_REPO,
-                        LIB_VERSION: options.config.env.LIB_VERSION,
+                        SOURCE_CODE_REPO: process.env.SOURCE_CODE_REPO ?? null,
+                        LIB_VERSION: pkg.version,
                       },
                     },
                   },
@@ -157,14 +156,6 @@ export default withDocsInfra({
               },
             ],
           },
-          // required to transpile ../packages/
-          {
-            test: /\.(js|mjs|tsx|ts)$/,
-            resourceQuery: { not: [/raw/] },
-            include: [workspaceRoot],
-            exclude: /(node_modules|mui-icons-material)/,
-            use: options.defaultLoaders.babel,
-          },
           {
             resourceQuery: /raw/,
             type: 'asset/source',
@@ -173,79 +164,20 @@ export default withDocsInfra({
       },
     };
   },
-  env: {
-    // docs-infra
-    LIB_VERSION: pkg.version,
-    SOURCE_CODE_REPO: 'https://github.com/mui/material-ui',
-    SOURCE_GITHUB_BRANCH: 'master', // #target-branch-reference
-    GITHUB_TEMPLATE_DOCS_FEEDBACK: '4.docs-feedback.yml',
+  // Ensure CSS from the Data Grid packages is included in the build:
+  // https://github.com/mui/mui-x/issues/17427#issuecomment-2813967605
+  transpilePackages: ['@mui/x-data-grid', '@mui/x-data-grid-pro', '@mui/x-data-grid-premium'],
+  compiler: {
+    reactRemoveProperties: process.env.NODE_ENV === 'production',
+  },
+  distDir: 'export',
+  envPlugin: {
     BUILD_ONLY_ENGLISH_LOCALE: String(buildOnlyEnglishLocale),
     // MUI Core related
     GITHUB_AUTH: process.env.GITHUB_AUTH
       ? `Basic ${Buffer.from(process.env.GITHUB_AUTH).toString('base64')}`
       : '',
-  },
-  // Ensure CSS from the Data Grid packages is included in the build:
-  // https://github.com/mui/mui-x/issues/17427#issuecomment-2813967605
-  transpilePackages: ['@mui/x-data-grid', '@mui/x-data-grid-pro', '@mui/x-data-grid-premium'],
-  distDir: 'export',
-  // Next.js provides a `defaultPathMap` argument, we could simplify the logic.
-  // However, we don't in order to prevent any regression in the `findPages()` method.
-  // @ts-ignore
-  exportPathMap: () => {
-    const pages = findPages();
-    const map = {};
-
-    // @ts-ignore
-    function traverse(pages2, userLanguage) {
-      const prefix = userLanguage === 'en' ? '' : `/${userLanguage}`;
-
-      // @ts-ignore
-      pages2.forEach((page) => {
-        // The experiments pages are only meant for experiments, they shouldn't leak to production.
-        if (
-          (page.pathname.startsWith('/experiments/') || page.pathname === '/experiments') &&
-          process.env.DEPLOY_ENV === 'production'
-        ) {
-          return;
-        }
-        // The blog is not translated
-        if (userLanguage !== 'en' && LANGUAGES_IGNORE_PAGES(page.pathname)) {
-          return;
-        }
-        if (!page.children) {
-          // map api-docs to api
-          // i: /api-docs/* > /api/* (old structure)
-          // ii: /*/api-docs/* > /*/api/* (for new structure)
-          // @ts-ignore
-          map[`${prefix}${page.pathname.replace(/^(\/[^/]+)?\/api-docs\/(.*)/, '$1/api/$2')}`] = {
-            page: page.pathname,
-            query: {
-              userLanguage,
-            },
-          };
-          return;
-        }
-
-        traverse(page.children, userLanguage);
-      });
-    }
-
-    // We want to speed-up the build of pull requests.
-    // For this, consider only English language on deploy previews, except for crowdin PRs.
-    if (buildOnlyEnglishLocale) {
-      // eslint-disable-next-line no-console
-      console.log('Considering only English for SSR');
-      traverse(pages, 'en');
-    } else {
-      // eslint-disable-next-line no-console
-      console.log('Considering various locales for SSR');
-      LANGUAGES_SSR.forEach((userLanguage) => {
-        traverse(pages, userLanguage);
-      });
-    }
-
-    return map;
+    NEXT_PUBLIC_LIB_VERSION: pkg.version,
   },
   redirects: async () => {
     return [
diff --git a/docs/nextConfigDocsInfra.js b/docs/nextConfigDocsInfra.js
deleted file mode 100644
index 4ae298ff72cb3b..00000000000000
--- a/docs/nextConfigDocsInfra.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * See the docs of the Netlify environment variables:
- * https://docs.netlify.com/configure-builds/environment-variables/#build-metadata.
- *
- * A few comments:
- * - process.env.CONTEXT === 'production' means that the branch in Netlify was configured as production.
- *   For example, the `master` branch of the Core team is considered a `production` build on Netlify based
- *   on https://app.netlify.com/sites/material-ui/settings/deploys#branches.
- * - Each team has different site https://app.netlify.com/teams/mui/sites.
- *   The following logic must be compatible with all of them.
- */
-let DEPLOY_ENV = 'development';
-
-// Same as process.env.PULL_REQUEST_ID
-if (process.env.CONTEXT === 'deploy-preview') {
-  DEPLOY_ENV = 'pull-request';
-}
-
-if (process.env.CONTEXT === 'production' || process.env.CONTEXT === 'branch-deploy') {
-  DEPLOY_ENV = 'production';
-}
-
-// The 'master' and 'next' branches are NEVER a production environment. We use these branches for staging.
-if (
-  (process.env.CONTEXT === 'production' || process.env.CONTEXT === 'branch-deploy') &&
-  (process.env.HEAD === 'master' || process.env.HEAD === 'next')
-) {
-  DEPLOY_ENV = 'staging';
-}
-/**
- * ====================================================================================
- */
-
-process.env.DEPLOY_ENV = DEPLOY_ENV;
-
-/**
- * @typedef {import('next').NextConfig} NextConfig
- * @typedef {NextConfig['env']} NextConfigEnv
- * @typedef {{env : {
- *  LIB_VERSION: string;
- *  SOURCE_CODE_REPO: string;
- *  SOURCE_GITHUB_BRANCH: string;
- *  GITHUB_TEMPLATE_DOCS_FEEDBACK: string;
- * }} & NextConfig} NextConfigInput
-
- * @param {NextConfigInput} nextConfig
- * @returns {NextConfig}
- */
-function withDocsInfra(nextConfig) {
-  return {
-    trailingSlash: true,
-    reactStrictMode: true,
-    ...nextConfig,
-    env: {
-      BUILD_ONLY_ENGLISH_LOCALE: 'true', // disable translations by default
-      // production | staging | pull-request | development
-      DEPLOY_ENV,
-      FEEDBACK_URL: process.env.FEEDBACK_URL,
-      ...nextConfig.env,
-      // https://docs.netlify.com/configure-builds/environment-variables/#git-metadata
-      // reference ID (also known as "SHA" or "hash") of the commit we're building.
-      COMMIT_REF: process.env.COMMIT_REF,
-      // ID of the PR and the Deploy Preview it generated (for example, 1211)
-      PULL_REQUEST_ID: process.env.REVIEW_ID,
-      // This can be set manually in the .env to see the ads in dev mode.
-      ENABLE_AD_IN_DEV_MODE: process.env.ENABLE_AD_IN_DEV_MODE,
-      // URL representing the unique URL for an individual deploy, e.g.
-      // https://5b243e66dd6a547b4fee73ae--petsof.netlify.app
-      NETLIFY_DEPLOY_URL: process.env.DEPLOY_URL,
-      // Name of the site, its Netlify subdomain; for example, material-ui-docs
-      NETLIFY_SITE_NAME: process.env.SITE_NAME,
-      // For template images
-      TEMPLATE_IMAGE_URL: '',
-    },
-    experimental: {
-      scrollRestoration: true,
-      workerThreads: false,
-      cpus: 3,
-      ...nextConfig.experimental,
-    },
-    eslint: {
-      ignoreDuringBuilds: true,
-      ...nextConfig.eslint,
-    },
-    typescript: {
-      // Motivated by https://github.com/vercel/next.js/issues/7687
-      ignoreBuildErrors: true,
-      ...nextConfig.typescript,
-    },
-  };
-}
-
-module.exports = withDocsInfra;
diff --git a/docs/nextConfigDocsInfra.ts b/docs/nextConfigDocsInfra.ts
new file mode 100644
index 00000000000000..7158807a7c98c8
--- /dev/null
+++ b/docs/nextConfigDocsInfra.ts
@@ -0,0 +1,93 @@
+/**
+ * See the docs of the Netlify environment variables:
+ * https://docs.netlify.com/configure-builds/environment-variables/#build-metadata.
+ *
+ * A few comments:
+ * - process.env.CONTEXT === 'production' means that the branch in Netlify was configured as production.
+ *   For example, the `master` branch of the Core team is considered a `production` build on Netlify based
+ *   on https://app.netlify.com/sites/material-ui/settings/deploys#branches.
+ * - Each team has different site https://app.netlify.com/teams/mui/sites.
+ *   The following logic must be compatible with all of them.
+ */
+import { NextConfig } from 'next';
+import { EnvironmentPlugin } from 'webpack';
+
+let DEPLOY_ENV = 'development';
+
+// Same as process.env.PULL_REQUEST_ID
+if (process.env.CONTEXT === 'deploy-preview') {
+  DEPLOY_ENV = 'pull-request';
+}
+
+if (process.env.CONTEXT === 'production' || process.env.CONTEXT === 'branch-deploy') {
+  DEPLOY_ENV = 'production';
+}
+
+// The 'master' and 'next' branches are NEVER a production environment. We use these branches for staging.
+if (
+  (process.env.CONTEXT === 'production' || process.env.CONTEXT === 'branch-deploy') &&
+  (process.env.HEAD === 'master' || process.env.HEAD === 'next')
+) {
+  DEPLOY_ENV = 'staging';
+}
+/**
+ * ====================================================================================
+ */
+
+process.env.DEPLOY_ENV = DEPLOY_ENV;
+
+export function withDocsInfra(nextConfig: NextConfig): NextConfig {
+  const { envPlugin, eslint, experimental, typescript, webpack, ...otherConfig } = nextConfig;
+
+  return {
+    trailingSlash: true,
+    reactStrictMode: true,
+    ...otherConfig,
+    experimental: {
+      scrollRestoration: true,
+      workerThreads: false,
+      cpus: 3,
+      ...experimental,
+    },
+    eslint: {
+      ignoreDuringBuilds: true,
+      ...eslint,
+    },
+    typescript: {
+      // Motivated by https://github.com/vercel/next.js/issues/7687
+      ignoreBuildErrors: true,
+      ...typescript,
+    },
+    webpack: (config, options) => {
+      const plugins = [
+        new EnvironmentPlugin({
+          ...envPlugin,
+          // production | staging | pull-request | development
+          NEXT_PUBLIC_DEPLOY_ENV: DEPLOY_ENV,
+          NEXT_PUBLIC_FEEDBACK_URL: process.env.FEEDBACK_URL ?? null,
+          // https://docs.netlify.com/configure-builds/environment-variables/#git-metadata
+          // reference ID (also known as "SHA" or "hash") of the commit we're building.
+          NEXT_PUBLIC_COMMIT_REF: process.env.COMMIT_REF ?? null,
+          // ID of the PR and the Deploy Preview it generated (for example, 1211)
+          NEXT_PUBLIC_PULL_REQUEST_ID: process.env.REVIEW_ID ?? null,
+          // This can be set manually in the .env to see the ads in dev mode.
+          NEXT_PUBLIC_ENABLE_AD_IN_DEV_MODE: process.env.ENABLE_AD_IN_DEV_MODE ?? null,
+          // URL representing the unique URL for an individual deploy, e.g.
+          // https://5b243e66dd6a547b4fee73ae--petsof.netlify.app
+          NEXT_PUBLIC_NETLIFY_DEPLOY_URL: process.env.DEPLOY_URL ?? null,
+          // Name of the site, its Netlify subdomain; for example, material-ui-docs
+          NEXT_PUBLIC_NETLIFY_SITE_NAME: process.env.SITE_NAME ?? null,
+          // For template images
+          NEXT_PUBLIC_TEMPLATE_IMAGE_URL: '',
+          NEXT_PUBLIC_GITHUB_TEMPLATE_DOCS_FEEDBACK: process.env.GITHUB_TEMPLATE_DOCS_FEEDBACK ?? null,
+          NEXT_PUBLIC_SOURCE_CODE_REPO: process.env.SOURCE_CODE_REPO ?? null,
+          NEXT_PUBLIC_SOURCE_GITHUB_BRANCH: process.env.SOURCE_GITHUB_BRANCH ?? null,
+        }),
+      ];
+
+      config.plugins = [...config.plugins, ...plugins];
+
+      return webpack ? webpack(config, options) : { plugins };
+    },
+  };
+}
diff --git a/docs/package.json b/docs/package.json
index cf255e3ac8a5c0..7ee8c078a07763 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -37,10 +37,10 @@
     "@mui/material": "workspace:^",
     "@mui/styled-engine": "workspace:^",
     "@mui/styled-engine-sc": "workspace:^",
+    "@mui/stylis-plugin-rtl": "workspace:^",
     "@mui/system": "workspace:^",
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@mui/stylis-plugin-rtl": "workspace:^",
     "@mui/x-charts": "8.5.3",
     "@mui/x-data-grid": "8.5.3",
     "@mui/x-data-grid-generator": "8.5.3",
@@ -83,7 +83,6 @@
     "material-ui-popup-state": "^5.3.6",
     "next": "^15.3.4",
     "notistack": "3.0.2",
-    "nprogress": "^0.2.0",
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "prop-types": "^15.8.1",
@@ -116,6 +115,7 @@
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-scripts": "workspace:^",
     "@mui/internal-test-utils": "workspace:^",
+    "@playwright/test": "^1.53.1",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/chai": "^4.3.20",
     "@types/chance": "^1.1.6",
@@ -124,7 +124,6 @@
     "@types/gtag.js": "^0.0.20",
     "@types/json2mq": "^0.2.2",
     "@types/node": "^20.19.1",
-    "@types/nprogress": "^0.2.3",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
@@ -132,11 +131,12 @@
     "@types/react-transition-group": "^4.4.12",
     "@types/react-window": "^1.8.8",
     "@types/stylis": "^4.2.0",
+    "@types/webpack-bundle-analyzer": "^4.7.0",
+    "@types/webpack-env": "^1.18.8",
     "chai": "^4.5.0",
     "cross-fetch": "^4.1.0",
     "gm": "^1.25.1",
     "marked": "^15.0.12",
-    "@playwright/test": "^1.53.1",
     "prettier": "^3.5.3",
     "tailwindcss": "^4.1.10",
     "yargs": "^17.7.2"
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index b8f93f556b1017..f817a0b0f498d0 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -372,7 +372,7 @@ MyApp.getInitialProps = async ({ ctx, Component }) => {
 
   return {
     pageProps: {
-      userLanguage: ctx.query.userLanguage || 'en',
+      userLanguage: 'en',
       translations,
       ...pageProps,
     },
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 4899191841ba80..6153dd59253173 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -11,7 +11,8 @@ import createEmotionCache from 'docs/src/createEmotionCache';
 import { getMetaThemeColor } from '@mui/docs/branding';
 
 const PRODUCTION_GA =
-  process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging';
+  process.env.NEXT_PUBLIC_DEPLOY_ENV === 'production' ||
+  process.env.NEXT_PUBLIC_DEPLOY_ENV === 'staging';
 
 const GOOGLE_ANALYTICS_ID_V4 = PRODUCTION_GA ? 'G-5NXDQLC2ZK' : 'G-XJ83JQEK7J';
 
@@ -227,7 +228,7 @@ MyDocument.getInitialProps = async (ctx) => {
     return {
       ...finalProps,
       canonicalAsServer: pathnameToLanguage(url).canonicalAsServer,
-      userLanguage: ctx.query.userLanguage || 'en',
+      userLanguage: 'en',
       styles: [
         <style id="material-icon-font" key="material-icon-font" />,
         <style id="font-awesome-css" key="font-awesome-css" />,
diff --git a/docs/pages/joy-ui/getting-started/templates/email.js b/docs/pages/joy-ui/getting-started/templates/email.js
index 33226473d008b9..cb1565840cc291 100644
--- a/docs/pages/joy-ui/getting-started/templates/email.js
+++ b/docs/pages/joy-ui/getting-started/templates/email.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import EmailApp from 'docs/data/joy/getting-started/templates/email/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function Email() {
   return (
@@ -15,8 +15,9 @@ export default function Email() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <EmailApp />
+      <NextBProgressProvider>
+        <EmailApp />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/joy-ui/getting-started/templates/files.js b/docs/pages/joy-ui/getting-started/templates/files.js
index b5bbb6174b2f06..8c602e558bb5d3 100644
--- a/docs/pages/joy-ui/getting-started/templates/files.js
+++ b/docs/pages/joy-ui/getting-started/templates/files.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import FilesApp from 'docs/data/joy/getting-started/templates/files/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function Files() {
   return (
@@ -15,8 +15,9 @@ export default function Files() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <FilesApp />
+      <NextBProgressProvider>
+        <FilesApp />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/joy-ui/getting-started/templates/framesx-web-blocks.js b/docs/pages/joy-ui/getting-started/templates/framesx-web-blocks.js
index 5af83fcada9e29..ae103e585d1e8e 100644
--- a/docs/pages/joy-ui/getting-started/templates/framesx-web-blocks.js
+++ b/docs/pages/joy-ui/getting-started/templates/framesx-web-blocks.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import TeamApp from 'docs/data/joy/getting-started/templates/framesx-web-blocks/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function Team() {
   return (
@@ -15,8 +15,9 @@ export default function Team() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <TeamApp />
+      <NextBProgressProvider>
+        <TeamApp />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/joy-ui/getting-started/templates/messages.js b/docs/pages/joy-ui/getting-started/templates/messages.js
index 5999366592d307..94edf112be8168 100644
--- a/docs/pages/joy-ui/getting-started/templates/messages.js
+++ b/docs/pages/joy-ui/getting-started/templates/messages.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import MessagesTemplate from 'docs/data/joy/getting-started/templates/messages/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function Messages() {
   return (
@@ -16,8 +16,9 @@ export default function Messages() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <MessagesTemplate />
+      <NextBProgressProvider>
+        <MessagesTemplate />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/joy-ui/getting-started/templates/order-dashboard.js b/docs/pages/joy-ui/getting-started/templates/order-dashboard.js
index b08a7d50f37837..769d5fd8be10a9 100644
--- a/docs/pages/joy-ui/getting-started/templates/order-dashboard.js
+++ b/docs/pages/joy-ui/getting-started/templates/order-dashboard.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import OrderDashboardTemplate from 'docs/data/joy/getting-started/templates/order-dashboard/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function OrderDashboard() {
   return (
@@ -16,8 +16,9 @@ export default function OrderDashboard() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <OrderDashboardTemplate />
+      <NextBProgressProvider>
+        <OrderDashboardTemplate />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/joy-ui/getting-started/templates/profile-dashboard.js b/docs/pages/joy-ui/getting-started/templates/profile-dashboard.js
index 8d37bd264d5dcf..1e3aa98ad22857 100644
--- a/docs/pages/joy-ui/getting-started/templates/profile-dashboard.js
+++ b/docs/pages/joy-ui/getting-started/templates/profile-dashboard.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import ProfileDashboardTemplate from 'docs/data/joy/getting-started/templates/profile-dashboard/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function OrderDashboard() {
   return (
@@ -16,8 +16,9 @@ export default function OrderDashboard() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <ProfileDashboardTemplate />
+      <NextBProgressProvider>
+        <ProfileDashboardTemplate />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/joy-ui/getting-started/templates/rental-dashboard.js b/docs/pages/joy-ui/getting-started/templates/rental-dashboard.js
index bc1a7db4285802..cc323a8f720bb2 100644
--- a/docs/pages/joy-ui/getting-started/templates/rental-dashboard.js
+++ b/docs/pages/joy-ui/getting-started/templates/rental-dashboard.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import RentalDashboardTemplate from 'docs/data/joy/getting-started/templates/rental-dashboard/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function RentalDashboard() {
   return (
@@ -16,8 +16,9 @@ export default function RentalDashboard() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <RentalDashboardTemplate />
+      <NextBProgressProvider>
+        <RentalDashboardTemplate />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/joy-ui/getting-started/templates/sign-in-side.js b/docs/pages/joy-ui/getting-started/templates/sign-in-side.js
index cc942d15566b1a..f785ce7ee619b2 100644
--- a/docs/pages/joy-ui/getting-started/templates/sign-in-side.js
+++ b/docs/pages/joy-ui/getting-started/templates/sign-in-side.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import SignInSideTemplate from 'docs/data/joy/getting-started/templates/sign-in-side/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function SignInSide() {
   return (
@@ -16,8 +16,9 @@ export default function SignInSide() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <SignInSideTemplate />
+      <NextBProgressProvider>
+        <SignInSideTemplate />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/joy-ui/getting-started/templates/team.js b/docs/pages/joy-ui/getting-started/templates/team.js
index a5c0fd7666f554..f1f7c5cf2c937b 100644
--- a/docs/pages/joy-ui/getting-started/templates/team.js
+++ b/docs/pages/joy-ui/getting-started/templates/team.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import TeamApp from 'docs/data/joy/getting-started/templates/team/App';
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 
 export default function Team() {
   return (
@@ -15,8 +15,9 @@ export default function Team() {
           rel="stylesheet"
         />
       </Head>
-      <NextNProgressBar />
-      <TeamApp />
+      <NextBProgressProvider>
+        <TeamApp />
+      </NextBProgressProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/versions.js b/docs/pages/versions.js
index a4addeda6a4e50..2805e6fcf89622 100644
--- a/docs/pages/versions.js
+++ b/docs/pages/versions.js
@@ -56,7 +56,7 @@ Page.getInitialProps = async () => {
   });
   // Current version.
   versions.push({
-    version: `v${process.env.LIB_VERSION}`,
+    version: `v${process.env.NEXT_PUBLIC_LIB_VERSION}`,
     url: 'https://mui.com',
   });
   // Legacy documentation.
diff --git a/docs/scripts/reportBrokenLinksLib.js b/docs/scripts/reportBrokenLinksLib.js
index efc832eb33c4ae..274afba1fb28e9 100644
--- a/docs/scripts/reportBrokenLinksLib.js
+++ b/docs/scripts/reportBrokenLinksLib.js
@@ -95,7 +95,7 @@ function getLinksAndAnchors(fileName) {
     options: {
       ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
       env: {
-        SOURCE_CODE_REPO: '',
+        NEXT_PUBLIC_SOURCE_CODE_REPO: '',
       },
     },
   });
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
index cb5e731d886cde..9ba071201cf669 100644
--- a/docs/src/BrandingCssVarsProvider.tsx
+++ b/docs/src/BrandingCssVarsProvider.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
+import { useRouter } from '@mui/docs/routing';
 import { deepmerge } from '@mui/utils';
 import { ThemeProvider, createTheme, PaletteColorOptions } from '@mui/material/styles';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -7,7 +7,7 @@ import { colorChannel, getContrastRatio, lighten, darken } from '@mui/system/col
 import CssBaseline from '@mui/material/CssBaseline';
 import { getCookie, pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 // @ts-ignore to bypass type checking in MUI X repo
-import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { NextBProgressProvider } from '@mui/docs/BProgressBar';
 import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
 import SkipLink from 'docs/src/modules/components/SkipLink';
 // @ts-ignore to bypass type checking in MUI X repo
@@ -132,8 +132,8 @@ export default function BrandingCssVarsProvider(props: {
   direction?: 'ltr' | 'rtl';
 }) {
   const { direction = 'ltr', children } = props;
-  const { asPath } = useRouter();
-  const { canonicalAs } = pathnameToLanguage(asPath);
+  const { pathname } = useRouter();
+  const { canonicalAs } = pathnameToLanguage(pathname);
   const theme = React.useMemo(() => {
     return createTheme({
       cssVariables: {
@@ -170,11 +170,10 @@ export default function BrandingCssVarsProvider(props: {
       // TODO: remove `forceThemeRerender` once custom theme on some demos rely on CSS variables instead of `theme.palette.mode`
       forceThemeRerender={canonicalAs.startsWith('/x/') || canonicalAs.startsWith('/toolpad/')}
     >
-      <NextNProgressBar />
       <CssBaseline />
       <SkipLink />
       <MarkdownLinks />
-      {children}
+      <NextBProgressProvider>{children}</NextBProgressProvider>
     </ThemeProvider>
   );
 }
diff --git a/docs/src/components/careers/CareersFaq.tsx b/docs/src/components/careers/CareersFaq.tsx
index bf8f06d05f70de..fda5aa3c8bc498 100644
--- a/docs/src/components/careers/CareersFaq.tsx
+++ b/docs/src/components/careers/CareersFaq.tsx
@@ -131,7 +131,7 @@ However, we allow candidates to use AI tools when applied to solve problems they
 const render = createRender({
   options: {
     env: {
-      SOURCE_CODE_REPO: '',
+      NEXT_PUBLIC_SOURCE_CODE_REPO: '',
     },
   },
 });
diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
index 9f6be3d3014335..790c36cff0bd09 100644
--- a/docs/src/components/footer/EmailSubscribe.tsx
+++ b/docs/src/components/footer/EmailSubscribe.tsx
@@ -10,7 +10,7 @@ import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
 import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
 
 const NEWSLETTER_SUBSCRIBE_URL =
-  process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging'
+  process.env.NEXT_PUBLIC_DEPLOY_ENV === 'production' || process.env.NEXT_PUBLIC_DEPLOY_ENV === 'staging'
     ? 'https://f0433e60.sibforms.com/serve/MUIEAHEhgYhMvLAw0tycwk1BQaIB-q0akob3JdtDBmHLhSR-jLheJ2T44LFCz27alz9wq_Nkdz9EK7Y8hzM1vQND9kTFyKkkhTIbEzXaH5d-_S9Fw4PXS1zAK8efPY6nhCdoAop1SKTeZ_GAPW5S0xBFQRLUGYbvvRgE4Q2Ki_f1KjbiCqaRuzmj_I3SD1r0CoR4INmK3CLtF4kF'
     : 'https://f0433e60.sibforms.com/serve/MUIEAE9LexIU5u5hYkoDJ-Mc379-irLHNIlGEgCm5njkAwg6OYFfNQTd25n4SO6vJom9WvQ89GJ0sYBzFYswLRewcOvD_dRtoFycXIObP8SMm-kNO1CdXKaWEZutrfqMKygHb1Je1QBGrMUnJg8J5qVeCwa7rSPBN0A1_6Ug3SiGjgIlbiCcMVA4KbhaYTiBvKkaejlCjgZcLHBT';
 
diff --git a/docs/src/components/home/NewsletterToast.tsx b/docs/src/components/home/NewsletterToast.tsx
index 1b6fb2eee8d72e..0f67eca5fb6b7e 100644
--- a/docs/src/components/home/NewsletterToast.tsx
+++ b/docs/src/components/home/NewsletterToast.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
+import { useRouter, useSearchParams } from '@mui/docs/routing';
 import Slide from '@mui/material/Slide';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -10,13 +10,16 @@ import MarkEmailReadTwoTone from '@mui/icons-material/MarkEmailReadTwoTone';
 
 export default function NewsletterToast() {
   const router = useRouter();
-  const [hidden, setHidden] = React.useState(router.query.newsletter !== 'subscribed');
+  const newsletterQuery = useSearchParams().getSearchParam('newsletter');
+  const [hidden, setHidden] = React.useState(newsletterQuery !== 'subscribed');
+
   React.useEffect(() => {
-    if (router.query.newsletter === 'subscribed') {
+    if (newsletterQuery === 'subscribed') {
       setHidden(false);
       router.replace(router.pathname);
     }
-  }, [router.query.newsletter, router]);
+  }, [newsletterQuery, router]);
+
   React.useEffect(() => {
     const time = setTimeout(() => {
       if (!hidden) {
@@ -27,6 +30,7 @@ export default function NewsletterToast() {
       clearTimeout(time);
     };
   }, [hidden]);
+  
   return (
     <Slide in={!hidden} timeout={400} direction="down">
       <Box sx={{ position: 'fixed', zIndex: 1300, top: 80, left: 0, width: '100%' }}>
diff --git a/docs/src/modules/components/ApiPage.tsx b/docs/src/modules/components/ApiPage.tsx
index d586d32744b938..04e594bfb4e875 100644
--- a/docs/src/modules/components/ApiPage.tsx
+++ b/docs/src/modules/components/ApiPage.tsx
@@ -368,7 +368,7 @@ export default function ApiPage(props: ApiPageProps) {
             dangerouslySetInnerHTML={{
               __html: t('api-docs.seeSourceCode').replace(
                 '{{href}}',
-                `${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}${pageContent.filename}`,
+                `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/blob/v${process.env.NEXT_PUBLIC_LIB_VERSION}${pageContent.filename}`,
               ),
             }}
           />
diff --git a/docs/src/modules/components/AppFrame.tsx b/docs/src/modules/components/AppFrame.tsx
index ce4b9442f422f3..e40e3d8aedea2a 100644
--- a/docs/src/modules/components/AppFrame.tsx
+++ b/docs/src/modules/components/AppFrame.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useRouter } from 'next/router';
+import { useRouter } from '@mui/docs/routing';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { styled, alpha } from '@mui/material/styles';
-import NProgress from 'nprogress';
 import AppBar from '@mui/material/AppBar';
 import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
@@ -11,8 +10,6 @@ import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
 import SettingsIcon from '@mui/icons-material/SettingsOutlined';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import NProgressBar from '@mui/docs/NProgressBar';
-import { debounce } from '@mui/material/utils';
 import SvgHamburgerMenu from 'docs/src/icons/SvgHamburgerMenu';
 import AppNavDrawer from 'docs/src/modules/components/AppNavDrawer';
 import AppSettingsDrawer from 'docs/src/modules/components/AppSettingsDrawer';
@@ -25,43 +22,6 @@ import { DemoPageThemeProvider } from 'docs/src/theming';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import SearchButton from './SearchButton';
 
-const nProgressStart = debounce(() => {
-  NProgress.start();
-}, 200);
-
-function nProgressDone() {
-  nProgressStart.clear();
-  NProgress.done();
-}
-
-export function NextNProgressBar() {
-  const router = useRouter();
-  React.useEffect(() => {
-    const handleRouteChangeStart = (url: string, { shallow }: { shallow: boolean }) => {
-      if (!shallow) {
-        nProgressStart();
-      }
-    };
-
-    const handleRouteChangeDone = (url: string, { shallow }: { shallow: boolean }) => {
-      if (!shallow) {
-        nProgressDone();
-      }
-    };
-
-    router.events.on('routeChangeStart', handleRouteChangeStart);
-    router.events.on('routeChangeComplete', handleRouteChangeDone);
-    router.events.on('routeChangeError', handleRouteChangeDone);
-    return () => {
-      router.events.off('routeChangeStart', handleRouteChangeStart);
-      router.events.off('routeChangeComplete', handleRouteChangeDone);
-      router.events.off('routeChangeError', handleRouteChangeDone);
-    };
-  }, [router]);
-
-  return <NProgressBar />;
-}
-
 const sx = { minWidth: { sm: 160 } };
 
 const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch'));
@@ -165,7 +125,7 @@ export default function AppFrame(props: AppFrameProps) {
   const { children, disableDrawer = false, className, BannerComponent = AppFrameBanner } = props;
   const t = useTranslate();
   const router = useRouter();
-  const { canonicalAs } = pathnameToLanguage(router.asPath);
+  const { canonicalAs } = pathnameToLanguage(router.pathname);
 
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const [settingsOpen, setSettingsOpen] = React.useState(false);
@@ -220,7 +180,7 @@ export default function AppFrame(props: AppFrameProps) {
                   component="a"
                   color="primary"
                   size="small"
-                  href={process.env.SOURCE_CODE_REPO}
+                  href={process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}
                   data-ga-event-category="header"
                   data-ga-event-action="github"
                 >
diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
index 3afbd22db7b00a..d07658e6444a27 100644
--- a/docs/src/modules/components/AppLayoutDocsFooter.js
+++ b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -83,9 +83,9 @@ function orderedPages(pages, current = []) {
 }
 
 async function postFeedback(data) {
-  const env = process.env.DEPLOY_ENV === 'production' ? 'prod' : 'dev';
+  const env = process.env.NEXT_PUBLIC_DEPLOY_ENV === 'production' ? 'prod' : 'dev';
   try {
-    const response = await fetch(`${process.env.FEEDBACK_URL}/${env}/feedback`, {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_FEEDBACK_URL}/${env}/feedback`, {
       method: 'POST',
       referrerPolicy: 'origin',
       headers: { 'Content-Type': 'application/json' },
@@ -108,7 +108,7 @@ async function postFeedbackOnSlack(data) {
     currentLocationURL: window.location.href,
     commentSectionURL: `${window.location.origin}${window.location.pathname}#${commentedSection.hash}`,
     commentSectionTitle: commentedSection.text,
-    githubRepo: process.env.SOURCE_CODE_REPO,
+    githubRepo: process.env.NEXT_PUBLIC_SOURCE_CODE_REPO,
     productId,
   };
   if (!comment || comment.length < 10) {
@@ -176,7 +176,7 @@ async function postFeedbackOnSlack(data) {
 
 async function getUserFeedback(id) {
   const env = location.hostname === 'mui.com' ? 'prod' : 'dev';
-  const URL = `${process.env.FEEDBACK_URL}/${env}/feedback/${id}`;
+  const URL = `${process.env.NEXT_PUBLIC_FEEDBACK_URL}/${env}/feedback/${id}`;
 
   try {
     const response = await fetch(URL, {
@@ -200,7 +200,7 @@ async function submitFeedback(page, rating, comment, language, commentedSection,
       page,
       rating,
       comment,
-      version: process.env.LIB_VERSION,
+      version: process.env.NEXT_PUBLIC_LIB_VERSION,
       language,
     });
     if (resultVote) {
@@ -479,7 +479,7 @@ export default function AppLayoutDocsFooter(props) {
                     <Typography id="feedback-description">
                       {t('feedbackMessageToGitHub.usecases')}{' '}
                       <Link
-                        href={`${process.env.SOURCE_CODE_REPO}/issues/new?template=${process.env.GITHUB_TEMPLATE_DOCS_FEEDBACK}&page-url=${window.location.href}`}
+                        href={`${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/issues/new?template=${process.env.NEXT_PUBLIC_GITHUB_TEMPLATE_DOCS_FEEDBACK}&page-url=${window.location.href}`}
                         target="_blank"
                         underline="always"
                         sx={{ fontWeight: 'semiBold' }}
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index b4a8c79ca2391b..40e5d6b4fc2ed6 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
 import * as ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import NextLink from 'next/link';
-import { useRouter } from 'next/router';
+import { useRouter } from '@mui/docs/routing';
 import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
 import Chip from '@mui/material/Chip';
 import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
diff --git a/docs/src/modules/components/DemoErrorBoundary.js b/docs/src/modules/components/DemoErrorBoundary.js
index 77fa3ef00c12ec..9e9381691456f6 100644
--- a/docs/src/modules/components/DemoErrorBoundary.js
+++ b/docs/src/modules/components/DemoErrorBoundary.js
@@ -9,7 +9,7 @@ import Button from '@mui/material/Button';
  * with node 8 + IE11 support i.e. not using URL (URLSearchParams.set replaced with Map.set)
  */
 function newGitHubIssueUrl(options) {
-  const url = `${process.env.SOURCE_CODE_REPO}/issues/new`;
+  const url = `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/issues/new`;
 
   const query = Object.keys(options)
     .map((type) => {
@@ -43,7 +43,7 @@ export default class DemoErrorBoundary extends React.Component {
 <!-- Please make sure you have fulfilled the following items before submitting -->
 <!-- Checked checkbox should look like this: [x] -->
 - [ ] I have [searched for similar issues](${
-          process.env.SOURCE_CODE_REPO
+          process.env.NEXT_PUBLIC_SOURCE_CODE_REPO
         }/issues?q=${searchQuery}) in this repository and believe that this is not a duplicate.
 
 ## Steps to reproduce
@@ -54,8 +54,8 @@ export default class DemoErrorBoundary extends React.Component {
 ## Your environment
 | Tech         | Version |
 |--------------|---------|
-| Version  | v${process.env.LIB_VERSION}  |
-| Netlify deploy | ${process.env.NETLIFY_DEPLOY_URL} |
+| Version  | v${process.env.NEXT_PUBLIC_LIB_VERSION}  |
+| Netlify deploy | ${process.env.NEXT_PUBLIC_NETLIFY_DEPLOY_URL} |
 | Browser      | ${
           typeof window !== 'undefined' && window.navigator
             ? window.navigator.userAgent
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index 4f67cd2d50ce31..5474408c3d4ac8 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -368,13 +368,13 @@ export default function DemoToolbar(props) {
   });
 
   const devMenuItems = [];
-  if (process.env.DEPLOY_ENV === 'staging' || process.env.DEPLOY_ENV === 'pull-request') {
+  if (process.env.NEXT_PUBLIC_DEPLOY_ENV === 'staging' || process.env.NEXT_PUBLIC_DEPLOY_ENV === 'pull-request') {
     /* eslint-disable material-ui/no-hardcoded-labels -- staging only */
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- valid reason to disable rules of hooks
     // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
     const router = useRouter();
 
-    if (process.env.PULL_REQUEST_ID) {
+    if (process.env.NEXT_PUBLIC_PULL_REQUEST_ID) {
       devMenuItems.push(
         <MenuItem
           key="link-deploy-preview"
@@ -382,12 +382,12 @@ export default function DemoToolbar(props) {
           data-ga-event-label={demo.gaLabel}
           data-ga-event-action="link-deploy-preview"
           component="a"
-          href={`https://deploy-preview-${process.env.PULL_REQUEST_ID}--${process.env.NETLIFY_SITE_NAME}.netlify.app${router.route}/#${demoName}`}
+          href={`https://deploy-preview-${process.env.NEXT_PUBLIC_PULL_REQUEST_ID}--${process.env.NEXT_PUBLIC_NETLIFY_SITE_NAME}.netlify.app${router.route}/#${demoName}`}
           target="_blank"
           rel="noopener nofollow"
           onClick={handleMoreClose}
         >
-          demo on PR #{process.env.PULL_REQUEST_ID}
+          demo on PR #{process.env.NEXT_PUBLIC_PULL_REQUEST_ID}
         </MenuItem>,
       );
     }
@@ -399,7 +399,7 @@ export default function DemoToolbar(props) {
         data-ga-event-label={demo.gaLabel}
         data-ga-event-action="link-next"
         component="a"
-        href={`https://next--${process.env.NETLIFY_SITE_NAME}.netlify.app${router.route}/#${demoName}`}
+        href={`https://next--${process.env.NEXT_PUBLIC_NETLIFY_SITE_NAME}.netlify.app${router.route}/#${demoName}`}
         target="_blank"
         rel="noopener nofollow"
         onClick={handleMoreClose}
@@ -412,7 +412,7 @@ export default function DemoToolbar(props) {
         data-ga-event-label={demo.gaLabel}
         data-ga-event-action="permalink"
         component="a"
-        href={`${process.env.NETLIFY_DEPLOY_URL}${router.route}#${demoName}`}
+        href={`${process.env.NEXT_PUBLIC_NETLIFY_DEPLOY_URL}${router.route}#${demoName}`}
         target="_blank"
         rel="noopener nofollow"
         onClick={handleMoreClose}
@@ -425,7 +425,7 @@ export default function DemoToolbar(props) {
         data-ga-event-label={demo.gaLabel}
         data-ga-event-action="link-master"
         component="a"
-        href={`https://master--${process.env.NETLIFY_SITE_NAME}.netlify.app${router.route}/#${demoName}`}
+        href={`https://master--${process.env.NEXT_PUBLIC_NETLIFY_SITE_NAME}.netlify.app${router.route}/#${demoName}`}
         target="_blank"
         rel="noopener nofollow"
         onClick={handleMoreClose}
diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
index 09a70b698e78dc..e1f336cdf647ba 100644
--- a/docs/src/modules/components/EditPage.js
+++ b/docs/src/modules/components/EditPage.js
@@ -29,7 +29,7 @@ export default function EditPage(props) {
       startIcon={<GitHubIcon sx={{ mr: 0.5 }} />}
       href={
         userLanguage === 'en'
-          ? `${process.env.SOURCE_CODE_REPO}/edit/${process.env.SOURCE_GITHUB_BRANCH}${sourceLocation}`
+          ? `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/edit/${process.env.NEXT_PUBLIC_SOURCE_GITHUB_BRANCH}${sourceLocation}`
           : `${CROWDIN_ROOT_URL}${crowdInLocale}#/${process.env.SOURCE_CODE_ROOT_URL.replace(
               'https://github.com/mui/',
               '',
diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js
index 8f8f6c5bc1bdef..29f785b33fd2b0 100644
--- a/docs/src/modules/components/GoogleAnalytics.js
+++ b/docs/src/modules/components/GoogleAnalytics.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useRouter } from 'next/router';
+import { useRouter } from '@mui/docs/routing';
 import { useNoSsrCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { useUserLanguage } from '@mui/docs/i18n';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
@@ -71,7 +71,7 @@ function GoogleAnalytics() {
         productCategoryId: document.querySelector('meta[name="mui:productCategoryId"]').content,
       });
     });
-  }, [router.route]);
+  }, [router.pathname]);
 
   const codeVariant = useNoSsrCodeVariant();
   React.useEffect(() => {
diff --git a/docs/src/modules/components/Head.tsx b/docs/src/modules/components/Head.tsx
index ff4c97c425b5ae..c8ea92fc4e2828 100644
--- a/docs/src/modules/components/Head.tsx
+++ b/docs/src/modules/components/Head.tsx
@@ -6,8 +6,8 @@ import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 
 // #host-reference
-const HOST = process.env.PULL_REQUEST_ID
-  ? `https://deploy-preview-${process.env.PULL_REQUEST_ID}--${process.env.NETLIFY_SITE_NAME}.netlify.app`
+const HOST = process.env.NEXT_PUBLIC_PULL_REQUEST_ID
+  ? `https://deploy-preview-${process.env.NEXT_PUBLIC_PULL_REQUEST_ID}--${process.env.NEXT_PUBLIC_NETLIFY_SITE_NAME}.netlify.app`
   : 'https://mui.com';
 
 interface HeadProps {
diff --git a/docs/src/modules/components/MarkdownLinks.ts b/docs/src/modules/components/MarkdownLinks.ts
index 55db7b7fd56cab..ab001a07cf6491 100644
--- a/docs/src/modules/components/MarkdownLinks.ts
+++ b/docs/src/modules/components/MarkdownLinks.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Router from 'next/router';
+import { useRouter } from '@mui/docs/routing';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 
 export function samePageLinkNavigation(event: MouseEvent) {
@@ -36,66 +36,69 @@ function isLink(event: MouseEvent): HTMLElement | null {
   return activeElement;
 }
 
-/**
- * @param {MouseEvent} event
- */
-function handleClick(event: MouseEvent) {
-  // Ignore click events meant for native link handling, for example open in new tab
-  if (samePageLinkNavigation(event)) {
-    return;
-  }
+export default function MarkdownLinks() {
+  const router = useRouter();
 
-  const activeElement = isLink(event);
-  if (activeElement === null) {
-    return;
-  }
+  React.useEffect(() => {
+    /**
+     * @param {MouseEvent} event
+     */
+    function handleClick(event: MouseEvent) {
+      // Ignore click events meant for native link handling, for example open in new tab
+      if (samePageLinkNavigation(event)) {
+        return;
+      }
 
-  event.preventDefault();
-  const as = activeElement.getAttribute('href');
-  if (as === null) {
-    return;
-  }
-  const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
-  Router.push(canonicalPathname, as);
-}
+      const activeElement = isLink(event);
+      if (activeElement === null) {
+        return;
+      }
 
-/**
- * Source copied from https://github.com/vercel/next.js/blob/ebc4eaaa2564b4283711646079d68e430496c88b/packages/next/src/client/link.tsx
- */
-function handleMouseOver(event: MouseEvent) {
-  const activeElement = isLink(event);
-  if (activeElement === null) {
-    return;
-  }
+      event.preventDefault();
+      const as = activeElement.getAttribute('href');
+      if (as === null) {
+        return;
+      }
+      const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
+      router.push(canonicalPathname, as);
+    }
 
-  const as = activeElement.getAttribute('href');
-  if (as === null) {
-    return;
-  }
-  const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
+    /**
+     * Source copied from https://github.com/vercel/next.js/blob/ebc4eaaa2564b4283711646079d68e430496c88b/packages/next/src/client/link.tsx
+     */
+    function handleMouseOver(event: MouseEvent) {
+      const activeElement = isLink(event);
+      if (activeElement === null) {
+        return;
+      }
+
+      const as = activeElement.getAttribute('href');
+      if (as === null) {
+        return;
+      }
+      const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
 
-  const prefetchPromise = Router.prefetch(canonicalPathname, as, { priority: true });
-  // Prefetch the JSON page if asked (only in the client)
-  // We need to handle a prefetch error here since we may be
-  // loading with priority which can reject but we don't
-  // want to force navigation since this is only a prefetch
-  Promise.resolve(prefetchPromise).catch((err) => {
-    if (process.env.NODE_ENV !== 'production') {
-      // rethrow to show invalid URL errors
-      throw err;
+      const prefetchPromise = router.prefetch(canonicalPathname, as, { priority: true });
+      // Prefetch the JSON page if asked (only in the client)
+      // We need to handle a prefetch error here since we may be
+      // loading with priority which can reject but we don't
+      // want to force navigation since this is only a prefetch
+      Promise.resolve(prefetchPromise).catch((err) => {
+        if (process.env.NODE_ENV !== 'production') {
+          // rethrow to show invalid URL errors
+          throw err;
+        }
+      });
     }
-  });
-}
 
-export default function MarkdownLinks() {
-  React.useEffect(() => {
     document.addEventListener('click', handleClick);
     document.addEventListener('mouseover', handleMouseOver);
+    
     return () => {
       document.removeEventListener('click', handleClick);
       document.removeEventListener('mouseover', handleMouseOver);
     };
-  }, []);
+  }, [router]);
 
   return null;
 }
diff --git a/docs/src/modules/components/MaterialFreeTemplatesCollection.js b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
index 52d29d0134c457..0aac9cfafacea2 100644
--- a/docs/src/modules/components/MaterialFreeTemplatesCollection.js
+++ b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
@@ -18,7 +18,7 @@ import sourceMaterialTemplates from 'docs/src/modules/material/sourceMaterialTem
 import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
 import stackBlitz from 'docs/src/modules/sandbox/StackBlitz';
 
-const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`;
+const sourcePrefix = `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/tree/v${process.env.NEXT_PUBLIC_LIB_VERSION}`;
 
 function layouts(translation) {
   return [
@@ -187,8 +187,8 @@ export default function MaterialFreeTemplatesCollection() {
                             ...item,
                             files: { ...item.files, ...materialTemplates.sharedTheme?.files },
                             title: `${templateName} Template - Material UI`,
-                            githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
-                              process.env.LIB_VERSION
+                            githubLocation: `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/blob/v${
+                              process.env.NEXT_PUBLIC_LIB_VERSION
                             }/docs/data/material/templates/${templateId}/${templateName}.${
                               item.codeVariant === 'TS' ? 'tsx' : 'js'
                             }`,
@@ -223,8 +223,8 @@ export default function MaterialFreeTemplatesCollection() {
                             ...item,
                             files: { ...item.files, ...materialTemplates.sharedTheme?.files },
                             title: `${templateName} Template - Material UI`,
-                            githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
-                              process.env.LIB_VERSION
+                            githubLocation: `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/blob/v${
+                              process.env.NEXT_PUBLIC_LIB_VERSION
                             }/docs/data/material/templates/${templateId}/${templateName}.${
                               item.codeVariant === 'TS' ? 'tsx' : 'js'
                             }`,
diff --git a/docs/src/modules/components/PageContext.tsx b/docs/src/modules/components/PageContext.tsx
index 953b98519ed4e7..1d7a22e58b2e93 100644
--- a/docs/src/modules/components/PageContext.tsx
+++ b/docs/src/modules/components/PageContext.tsx
@@ -5,8 +5,8 @@ import { RootSvgProps } from 'docs/src/icons/RootSvg';
 
 export interface ProductVersion {
   text: string;
-  current: boolean;
-  href?: undefined;
+  current?: boolean;
+  href?: string;
 }
 
 export interface ProductInfo {
diff --git a/docs/src/modules/components/RichMarkdownElement.js b/docs/src/modules/components/RichMarkdownElement.js
index c07eccf2384749..f835fac083c9be 100644
--- a/docs/src/modules/components/RichMarkdownElement.js
+++ b/docs/src/modules/components/RichMarkdownElement.js
@@ -114,7 +114,7 @@ export default function RichMarkdownElement(props) {
       }}
       disableAd={disableAd}
       demoOptions={renderedMarkdownOrDemo}
-      githubLocation={`${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}${fileNameWithLocation}`}
+      githubLocation={`${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/blob/v${process.env.NEXT_PUBLIC_LIB_VERSION}${fileNameWithLocation}`}
     />
   );
 }
diff --git a/docs/src/modules/components/TemplateFrame.js b/docs/src/modules/components/TemplateFrame.js
index 2abc7cfd30c6bb..3441b3684a3ba2 100644
--- a/docs/src/modules/components/TemplateFrame.js
+++ b/docs/src/modules/components/TemplateFrame.js
@@ -287,8 +287,8 @@ export default function TemplateFrame({ children }) {
                             ...item,
                             files: { ...item.files, ...materialTemplates.sharedTheme?.files },
                             title: `${templateName} Template - Material UI`,
-                            githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
-                              process.env.LIB_VERSION
+                            githubLocation: `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/blob/v${
+                              process.env.NEXT_PUBLIC_LIB_VERSION
                             }/docs/data/material/templates/${templateId}/${templateName}.${
                               item.codeVariant === 'TS' ? 'tsx' : 'js'
                             }`,
@@ -325,8 +325,8 @@ export default function TemplateFrame({ children }) {
                             ...item,
                             files: { ...item.files, ...materialTemplates.sharedTheme?.files },
                             title: `${templateName} Template - Material UI`,
-                            githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
-                              process.env.LIB_VERSION
+                            githubLocation: `${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/blob/v${
+                              process.env.NEXT_PUBLIC_LIB_VERSION
                             }/docs/data/material/templates/${templateId}/${templateName}.${
                               item.codeVariant === 'TS' ? 'tsx' : 'js'
                             }`,
diff --git a/docs/src/modules/sandbox/CodeSandbox.ts b/docs/src/modules/sandbox/CodeSandbox.ts
index 0aa582a07b2a9b..9ad9886019ffe9 100644
--- a/docs/src/modules/sandbox/CodeSandbox.ts
+++ b/docs/src/modules/sandbox/CodeSandbox.ts
@@ -74,7 +74,9 @@ function createReactApp(demoData: DemoData) {
   };
 
   const { dependencies, devDependencies } = SandboxDependencies(demoData, {
-    commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
+    commitRef: process.env.NEXT_PUBLIC_PULL_REQUEST_ID
+      ? process.env.NEXT_PUBLIC_COMMIT_REF
+      : undefined,
     devDeps: CSB_DEV_DEPENDENCIES,
   });
 
@@ -165,7 +167,9 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
       productId: 'joy-ui',
     },
     {
-      commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
+      commitRef: process.env.NEXT_PUBLIC_PULL_REQUEST_ID
+        ? process.env.NEXT_PUBLIC_COMMIT_REF
+        : undefined,
       devDeps: CSB_DEV_DEPENDENCIES,
     },
   );
@@ -251,7 +255,9 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
       productId: 'material-ui',
     },
     {
-      commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
+      commitRef: process.env.NEXT_PUBLIC_PULL_REQUEST_ID
+        ? process.env.NEXT_PUBLIC_COMMIT_REF
+        : undefined,
       devDeps: CSB_DEV_DEPENDENCIES,
     },
   );
diff --git a/docs/src/modules/sandbox/Dependencies.test.js b/docs/src/modules/sandbox/Dependencies.test.js
index 00a4100cdba248..570eca3dd68bf4 100644
--- a/docs/src/modules/sandbox/Dependencies.test.js
+++ b/docs/src/modules/sandbox/Dependencies.test.js
@@ -3,11 +3,11 @@ import SandboxDependencies from './Dependencies';
 
 describe('Dependencies', () => {
   before(() => {
-    process.env.SOURCE_CODE_REPO = 'https://github.com/mui/material-ui';
+    process.env.NEXT_PUBLIC_SOURCE_CODE_REPO = 'https://github.com/mui/material-ui';
   });
 
   after(() => {
-    delete process.env.SOURCE_CODE_REPO;
+    delete process.env.NEXT_PUBLIC_SOURCE_CODE_REPO;
   });
 
   const s1 = `
diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts
index e3b76448c9520a..7f4cd7ef883490 100644
--- a/docs/src/modules/sandbox/Dependencies.ts
+++ b/docs/src/modules/sandbox/Dependencies.ts
@@ -52,7 +52,7 @@ export default function SandboxDependencies(
   function getMuiPackageVersion(packageName: string): string {
     if (
       commitRef === undefined ||
-      process.env.SOURCE_CODE_REPO !== 'https://github.com/mui/material-ui'
+      process.env.NEXT_PUBLIC_SOURCE_CODE_REPO !== 'https://github.com/mui/material-ui'
     ) {
       if (['joy', 'base'].includes(packageName)) {
         return 'latest';
diff --git a/docs/src/modules/sandbox/StackBlitz.ts b/docs/src/modules/sandbox/StackBlitz.ts
index 893e9c3b4fe6f8..c5f3b7bf063466 100644
--- a/docs/src/modules/sandbox/StackBlitz.ts
+++ b/docs/src/modules/sandbox/StackBlitz.ts
@@ -144,7 +144,9 @@ function createJoyTemplate(templateData: {
 
   // Get dependencies
   const { dependencies, devDependencies } = SandboxDependencies(demoData, {
-    commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
+    commitRef: process.env.NEXT_PUBLIC_PULL_REQUEST_ID
+      ? process.env.NEXT_PUBLIC_COMMIT_REF
+      : undefined,
     devDeps: VITE_DEV_DEPENDENCIES,
   });
 
@@ -223,7 +225,9 @@ function createMaterialTemplate(templateData: {
 
   // Get dependencies
   const { dependencies, devDependencies } = SandboxDependencies(demoData, {
-    commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
+    commitRef: process.env.NEXT_PUBLIC_PULL_REQUEST_ID
+      ? process.env.NEXT_PUBLIC_COMMIT_REF
+      : undefined,
     devDeps: VITE_DEV_DEPENDENCIES,
   });
 
@@ -291,7 +295,9 @@ function createReactApp(demoData: DemoData) {
 
   // Get dependencies
   const { dependencies, devDependencies } = SandboxDependencies(demoData, {
-    commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
+    commitRef: process.env.NEXT_PUBLIC_PULL_REQUEST_ID
+      ? process.env.NEXT_PUBLIC_COMMIT_REF
+      : undefined,
     devDeps: VITE_DEV_DEPENDENCIES,
   });
 
diff --git a/docs/src/modules/utils/StyledEngineProviderApp.tsx b/docs/src/modules/utils/StyledEngineProviderApp.tsx
new file mode 100644
index 00000000000000..f0d88ffbded459
--- /dev/null
+++ b/docs/src/modules/utils/StyledEngineProviderApp.tsx
@@ -0,0 +1,41 @@
+import { StylisPlugin } from '@emotion/cache';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
+import { ThemeOptionsContext } from 'docs/src/modules/components/ThemeContext';
+import * as React from 'react';
+import { StyleSheetManager } from 'styled-components';
+import { prefixer } from 'stylis';
+import globalSelector from './globalSelector';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function StyledEngineProviderApp(props: Props) {
+  const { children } = props;
+  const { direction } = React.useContext(ThemeOptionsContext);
+
+  const rtl = direction === 'rtl';
+
+  const plugins: StylisPlugin[] = [prefixer, globalSelector];
+  if (direction === 'rtl') {
+    plugins.push(rtlPlugin);
+  }
+
+  return (
+    <StyleSheetManager stylisPlugins={rtl ? [rtlPlugin] : []}>
+      <AppRouterCacheProvider
+        options={{
+          key: direction,
+          prepend: true,
+          enableCssLayer: true,
+          stylisPlugins: plugins,
+        }}
+      >
+        <GlobalStyles styles="@layer theme, docsearch, mui, utilities;" />
+        {children}
+      </AppRouterCacheProvider>
+    </StyleSheetManager>
+  );
+}
diff --git a/docs/src/modules/utils/createMetadata.ts b/docs/src/modules/utils/createMetadata.ts
new file mode 100644
index 00000000000000..57752c0b4c599b
--- /dev/null
+++ b/docs/src/modules/utils/createMetadata.ts
@@ -0,0 +1,68 @@
+import { translate } from '@mui/docs/i18n/utils';
+import { deepmerge } from '@mui/utils';
+import { Metadata } from 'next';
+import { defaultLanguage, getTranslations } from './i18n';
+
+export interface GenerateMetadataProps<T = unknown> {
+  params: Promise<{ lang?: string } & T>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+// #host-reference
+const HOST = process.env.NEXT_PUBLIC_PULL_REQUEST_ID
+  ? `https://deploy-preview-${process.env.NEXT_PUBLIC_PULL_REQUEST_ID}--${process.env.NEXT_PUBLIC_NETLIFY_SITE_NAME}.netlify.app`
+  : 'https://mui.com';
+
+export default async function createMetadata(
+  generateProps: GenerateMetadataProps,
+  options: {
+    card?: string;
+    disableAlternateLocale?: boolean;
+    largeCard?: boolean;
+    type?: 'website';
+  } & Metadata,
+): Promise<Metadata> {
+  const userLanguage = (await generateProps.params).lang ?? defaultLanguage;
+  const translations = getTranslations();
+
+  const {
+    card = '/static/social-previews/home-preview.jpg',
+    description = translate('strapline', translations, userLanguage),
+    disableAlternateLocale = false,
+    largeCard = true,
+    title = translate('headTitle', translations, userLanguage),
+    type = 'website',
+    ...otherMetadata
+  } = options;
+
+  const preview = card.startsWith('http') ? card : `${HOST}${card}`;
+
+  const metadata = {
+    description: description,
+    metadataBase: new URL(HOST),
+    // facebook
+    openGraph: {
+      description: description!,
+      images: [preview],
+      title: title!,
+      ttl: 604800,
+      type: type,
+      url: `./`,
+    },
+    other: {
+      'docsearch:language': userLanguage, // Algolia
+      'docsearch:version': 'master', // #host-reference
+    },
+    title: title,
+    // X
+    twitter: {
+      card: largeCard ? 'summary_large_image' : 'summary',
+      description: description!,
+      images: [preview],
+      site: '@MUI_hq', // https://x.com/MUI_hq
+      title: title!,
+    },
+  };
+
+  return deepmerge(metadata, otherMetadata);
+}
diff --git a/docs/src/modules/utils/find.ts b/docs/src/modules/utils/find.ts
deleted file mode 100644
index 2443570ffec0ad..00000000000000
--- a/docs/src/modules/utils/find.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as fs from 'fs';
-import * as url from 'url';
-import * as path from 'path';
-
-const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
-
-const pageRegex = /(\.js|\.tsx)$/;
-const blackList = ['/.eslintrc', '/_document', '/_app'];
-
-interface NextJSPage {
-  pathname: string;
-  children?: NextJSPage[];
-}
-
-interface FindPagesOptions {
-  front?: boolean;
-}
-
-/**
- * Returns the Next.js pages available in a nested format.
- * The output is in the next.js format.
- * Each pathname is a route you can navigate to.
- */
-// eslint-disable-next-line import/prefer-default-export
-export function findPages(
-  options: FindPagesOptions = {},
-  directory: string = path.resolve(currentDirectory, '../../../pages'),
-  pages: NextJSPage[] = [],
-): NextJSPage[] {
-  fs.readdirSync(directory).forEach((item) => {
-    const itemPath = path.resolve(directory, item);
-    const pathname = itemPath
-      .replace(new RegExp(`\\${path.sep}`, 'g'), '/')
-      .replace(/^.*\/pages/, '')
-      .replace('.js', '')
-      .replace('.tsx', '')
-      .replace(/^\/index$/, '/') // Replace `index` by `/`.
-      .replace(/\/index$/, '');
-
-    if (pathname.includes('.eslintrc')) {
-      return;
-    }
-
-    if (options.front && !pathname.includes('/components') && !pathname.includes('/api-docs')) {
-      return;
-    }
-
-    if (fs.statSync(itemPath).isDirectory()) {
-      const children: NextJSPage[] = [];
-      pages.push({
-        pathname,
-        children,
-      });
-      findPages(options, itemPath, children);
-      return;
-    }
-
-    if (!pageRegex.test(item) || blackList.includes(pathname)) {
-      return;
-    }
-
-    pages.push({
-      pathname,
-    });
-  });
-
-  // sort by pathnames without '-' so that e.g. card comes before card-action
-  pages.sort((a, b) => {
-    const pathnameA = a.pathname.replace(/-/g, '');
-    const pathnameB = b.pathname.replace(/-/g, '');
-    if (pathnameA < pathnameB) {
-      return -1;
-    }
-    if (pathnameA > pathnameB) {
-      return 1;
-    }
-    return 0;
-  });
-
-  return pages;
-}
diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js
index aae6b739b0111b..bf6581965d7609 100644
--- a/docs/src/modules/utils/helpers.test.js
+++ b/docs/src/modules/utils/helpers.test.js
@@ -3,11 +3,11 @@ import { pageToTitle } from './helpers';
 
 describe('docs getDependencies helpers', () => {
   before(() => {
-    process.env.SOURCE_CODE_REPO = 'https://github.com/mui/material-ui';
+    process.env.NEXT_PUBLIC_SOURCE_CODE_REPO = 'https://github.com/mui/material-ui';
   });
 
   after(() => {
-    delete process.env.SOURCE_CODE_REPO;
+    delete process.env.NEXT_PUBLIC_SOURCE_CODE_REPO;
   });
 
   it('should return correct title', () => {
diff --git a/docs/src/modules/utils/i18n.ts b/docs/src/modules/utils/i18n.ts
new file mode 100644
index 00000000000000..b41ef4adb4be4d
--- /dev/null
+++ b/docs/src/modules/utils/i18n.ts
@@ -0,0 +1,8 @@
+import { mapTranslations } from '@mui/docs/i18n/utils';
+
+export const defaultLanguage = 'en';
+
+export function getTranslations() {
+  const req = require.context('docs/translations', false, /\.\/translations.*\.json$/);
+  return mapTranslations(req);
+}
diff --git a/docs/src/modules/utils/mapApiPageTranslations.js b/docs/src/modules/utils/mapApiPageTranslations.js
index 321b74a3d5f456..de2fb3efe7bed8 100644
--- a/docs/src/modules/utils/mapApiPageTranslations.js
+++ b/docs/src/modules/utils/mapApiPageTranslations.js
@@ -33,7 +33,7 @@ export default function mapApiPageTranslations(req) {
         options: {
           ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
           env: {
-            SOURCE_CODE_REPO: '',
+            NEXT_PUBLIC_SOURCE_CODE_REPO: '',
           },
         },
       });
diff --git a/docs/src/pages/versions/ReleasedVersions.js b/docs/src/pages/versions/ReleasedVersions.js
index ede4cedc2c2833..a695d0d856763c 100644
--- a/docs/src/pages/versions/ReleasedVersions.js
+++ b/docs/src/pages/versions/ReleasedVersions.js
@@ -22,7 +22,7 @@ function ReleasedVersions() {
               <TableCell>
                 <Typography variant="body2">
                   {doc.version}
-                  {doc.version === `v${process.env.LIB_VERSION}` ? ' ✓' : ''}
+                  {doc.version === `v${process.env.NEXT_PUBLIC_LIB_VERSION}` ? ' ✓' : ''}
                 </Typography>
               </TableCell>
               <TableCell>
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index ce441d911c8339..8b4dd25666ecfc 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -11,8 +11,20 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "incremental": true
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "types": ["@types/webpack-env"]
   },
-  "include": ["next-env.d.ts", "next.config.ts", "types", "src", "pages", "data"],
+  "include": [
+    "app",
+    "data",
+    "export/types/**/*.ts",
+    "next-env.d.ts",
+    "next.config.ts",
+    "pages",
+    "src",
+    "types",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["docs/.next", "docs/export", "node_modules"]
 }
diff --git a/docs/types/env.d.ts b/docs/types/env.d.ts
new file mode 100644
index 00000000000000..56b716b884f80c
--- /dev/null
+++ b/docs/types/env.d.ts
@@ -0,0 +1,15 @@
+namespace NodeJS {
+  interface ProcessEnv {
+    BUILD_ONLY_ENGLISH_LOCALE: string;
+    GITHUB_AUTH: string;
+    NEXT_PUBLIC_COMMIT_REF: string;
+    NEXT_PUBLIC_FEEDBACK_URL: string;
+    NEXT_PUBLIC_GITHUB_TEMPLATE_DOCS_FEEDBACK: string;
+    NEXT_PUBLIC_LIB_VERSION: string;
+    NEXT_PUBLIC_NETLIFY_SITE_NAME: string;
+    NEXT_PUBLIC_PULL_REQUEST_ID: string;
+    NEXT_PUBLIC_SOURCE_CODE_REPO: string;
+    NEXT_PUBLIC_SOURCE_GITHUB_BRANCH: string;
+    NEXT_PUBLIC_TEMPLATE_IMAGE_URL: string;
+  }
+}
diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
index bc19585ef83d82..df405c71c3a715 100644
--- a/packages/mui-docs/package.json
+++ b/packages/mui-docs/package.json
@@ -34,10 +34,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
+    "@bprogress/next": "^3.2.12",
     "@mui/internal-markdown": "workspace:^",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
-    "nprogress": "^0.2.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
diff --git a/packages/mui-docs/src/Ad/Ad.tsx b/packages/mui-docs/src/Ad/Ad.tsx
index 243cbefce0d426..c41d8f4c7cfcb7 100644
--- a/packages/mui-docs/src/Ad/Ad.tsx
+++ b/packages/mui-docs/src/Ad/Ad.tsx
@@ -34,7 +34,7 @@ function PleaseDisableAdblock() {
 }
 
 const disableAd =
-  process.env.NODE_ENV !== 'production' && process.env.ENABLE_AD_IN_DEV_MODE !== 'true';
+  process.env.NODE_ENV !== 'production' && process.env.NEXT_PUBLIC_ENABLE_AD_IN_DEV_MODE !== 'true';
 const inHouseAds = [
   {
     name: 'templates',
diff --git a/packages/mui-docs/src/BProgressBar/NextBProgressProvider.tsx b/packages/mui-docs/src/BProgressBar/NextBProgressProvider.tsx
new file mode 100644
index 00000000000000..ad5001c083243b
--- /dev/null
+++ b/packages/mui-docs/src/BProgressBar/NextBProgressProvider.tsx
@@ -0,0 +1,108 @@
+import { AppProgressProvider, PagesProgressProvider, Progress, useProgress } from '@bprogress/next';
+import { NoSsr } from '@mui/base/NoSsr';
+import { keyframes, styled } from '@mui/material/styles';
+import { useRouter as useCompatRouter } from 'next/compat/router';
+import * as React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const pulse = keyframes`
+  30% {
+    opacity: 0.6;
+  }
+  60% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.6;
+  }
+`;
+
+const CustomProgress = styled(Progress)(({ theme }) => ({
+  direction: 'ltr',
+  pointerEvents: 'none',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 2,
+  zIndex: (theme.vars || theme).zIndex.tooltip,
+  backgroundColor: (theme.vars || theme).palette.primary[200],
+  ...theme.applyStyles('dark', {
+    backgroundColor: (theme.vars || theme).palette.primary[700],
+  }),
+  '& .bar': {
+    position: 'fixed',
+    backgroundColor: (theme.vars || theme).palette.primary.main,
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 2,
+  },
+  '& .bar > div': {
+    position: 'absolute',
+    top: 0,
+    height: 2,
+    boxShadow: `${(theme.vars || theme).palette.primary.main} 1px 0 6px 1px`,
+    borderRadius: '100%',
+    animation: `${pulse} 2s ease-out 0s infinite`,
+  },
+  '& .bar > div:first-of-type': {
+    opacity: 0.6,
+    width: 20,
+    right: 0,
+    clip: 'rect(-6px,22px,14px,10px)',
+  },
+  '& .bar > div:last-of-type': {
+    opacity: 0.6,
+    width: 180,
+    right: -80,
+    clip: 'rect(-6px,90px,14px,-6px)',
+  },
+}));
+
+function StopOnUnmount() {
+  const progress = useProgress();
+
+  React.useEffect(() => {
+    return () => progress.stop();
+  }, []);
+
+  return null;
+}
+
+export function NextBProgressProvider(props: Props) {
+  const compatRouter = useCompatRouter();
+
+  const commonProviderProps = {
+    delay: 200,
+    disableStyle: true,
+    height: '2px',
+    options: { showSpinner: false, template: null },
+    shallowRouting: true,
+  };
+
+  if (compatRouter) {
+    return (
+      <NoSsr>
+        <PagesProgressProvider {...commonProviderProps}>
+          <CustomProgress />
+          <StopOnUnmount />
+          {props.children}
+        </PagesProgressProvider>
+      </NoSsr>
+    );
+  }
+
+  return (
+    <NoSsr>
+      <AppProgressProvider {...commonProviderProps}>
+        <CustomProgress />
+        <StopOnUnmount />
+        {props.children}
+      </AppProgressProvider>
+    </NoSsr>
+  );
+}
diff --git a/packages/mui-docs/src/BProgressBar/index.ts b/packages/mui-docs/src/BProgressBar/index.ts
new file mode 100644
index 00000000000000..5b51887c052ab5
--- /dev/null
+++ b/packages/mui-docs/src/BProgressBar/index.ts
@@ -0,0 +1 @@
+export * from './NextBProgressProvider';
diff --git a/packages/mui-docs/src/CodeCopy/CodeCopy.tsx b/packages/mui-docs/src/CodeCopy/CodeCopy.tsx
index 7ef5bdcde9c60d..9ffabcdc4ddc84 100644
--- a/packages/mui-docs/src/CodeCopy/CodeCopy.tsx
+++ b/packages/mui-docs/src/CodeCopy/CodeCopy.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
+import { useRouter } from '../routing';
 import clipboardCopy from 'clipboard-copy';
 
 const CodeBlockContext = React.createContext<React.MutableRefObject<HTMLDivElement | null>>({
diff --git a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
index 17fd57002f03b4..a301cce3f89da7 100644
--- a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
+++ b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
@@ -67,7 +67,7 @@ export function ComponentLinkHeader(props: ComponentLinkHeaderProps) {
             size="small"
             variant="outlined"
             rel="nofollow"
-            href={`${process.env.SOURCE_CODE_REPO}/labels/${encodeURIComponent(
+            href={`${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/labels/${encodeURIComponent(
               headers.githubLabel,
             )}`}
             icon={<ChatRounded color="primary" />}
@@ -107,7 +107,7 @@ export function ComponentLinkHeader(props: ComponentLinkHeaderProps) {
             size="small"
             variant="outlined"
             rel="nofollow"
-            href={`${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}/${headers.githubSource}`}
+            href={`${process.env.NEXT_PUBLIC_SOURCE_CODE_REPO}/tree/v${process.env.NEXT_PUBLIC_LIB_VERSION}/${headers.githubSource}`}
             icon={<GitHubIcon />}
             data-ga-event-category="ComponentLinkHeader"
             data-ga-event-action="click"
diff --git a/packages/mui-docs/src/DocsProvider/DocsProvider.tsx b/packages/mui-docs/src/DocsProvider/DocsProvider.tsx
index 4cefa6b1e3d7fc..024d1686fc5ec9 100644
--- a/packages/mui-docs/src/DocsProvider/DocsProvider.tsx
+++ b/packages/mui-docs/src/DocsProvider/DocsProvider.tsx
@@ -16,7 +16,7 @@ export interface DocsProviderProps {
   adConfig?: Partial<AdConfig>;
   defaultUserLanguage: string;
   children?: React.ReactNode;
-  translations?: Translations;
+  translations?: Record<string, Translations>;
 }
 
 export function DocsProvider({
diff --git a/packages/mui-docs/src/Link/Link.tsx b/packages/mui-docs/src/Link/Link.tsx
index a33cc0246f7f37..6b119815523262 100644
--- a/packages/mui-docs/src/Link/Link.tsx
+++ b/packages/mui-docs/src/Link/Link.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { useRouter } from 'next/router';
+import { useRouter } from '../routing/useRouter';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
 import { useUserLanguage } from '../i18n';
diff --git a/packages/mui-docs/src/NProgressBar/NProgressBar.d.ts b/packages/mui-docs/src/NProgressBar/NProgressBar.d.ts
deleted file mode 100644
index 6cf8621b1bdf38..00000000000000
--- a/packages/mui-docs/src/NProgressBar/NProgressBar.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-export interface NProgressBarProps {
-  children?: React.ReactNode;
-}
-
-declare const NProgressBar: React.FunctionComponent<NProgressBarProps>;
-export default NProgressBar;
diff --git a/packages/mui-docs/src/NProgressBar/NProgressBar.js b/packages/mui-docs/src/NProgressBar/NProgressBar.js
deleted file mode 100644
index 17bd4a3975e9d0..00000000000000
--- a/packages/mui-docs/src/NProgressBar/NProgressBar.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import NProgress from 'nprogress';
-import { NoSsr } from '@mui/base/NoSsr';
-import exactProp from '@mui/utils/exactProp';
-import GlobalStyles from '@mui/material/GlobalStyles';
-import { keyframes } from '@mui/material/styles';
-
-NProgress.configure({
-  barSelector: '.nprogress-bar',
-  template: `
-    <div class="nprogress-bar">
-      <div></div>
-      <div></div>
-    </div>
-  `,
-});
-
-const muiNProgressPulse = keyframes`
-  30% {
-    opacity: 0.6;
-  }
-
-  60% {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 0.6;
-  }
-`;
-
-/**
- * Elegant and ready-to-use wrapper on top of https://github.com/rstacruz/nprogress/.
- * The implementation is highly inspired by the YouTube one.
- */
-function NProgressBar(props) {
-  return (
-    <NoSsr>
-      {props.children}
-      <GlobalStyles
-        styles={(theme) => ({
-          '#nprogress': {
-            direction: 'ltr',
-            pointerEvents: 'none',
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            height: 2,
-            zIndex: (theme.vars || theme).zIndex.tooltip,
-            backgroundColor: (theme.vars || theme).palette.primary[200],
-            ...theme.applyStyles('dark', {
-              backgroundColor: (theme.vars || theme).palette.primary[700],
-            }),
-            '& .nprogress-bar': {
-              position: 'fixed',
-              backgroundColor: (theme.vars || theme).palette.primary.main,
-              top: 0,
-              left: 0,
-              right: 0,
-              height: 2,
-            },
-            '& .nprogress-bar > div': {
-              position: 'absolute',
-              top: 0,
-              height: 2,
-              boxShadow: `${(theme.vars || theme).palette.primary.main} 1px 0 6px 1px`,
-              borderRadius: '100%',
-              animation: `${muiNProgressPulse} 2s ease-out 0s infinite`,
-            },
-            '& .nprogress-bar > div:first-of-type': {
-              opacity: 0.6,
-              width: 20,
-              right: 0,
-              clip: 'rect(-6px,22px,14px,10px)',
-            },
-            '& .nprogress-bar > div:last-of-type': {
-              opacity: 0.6,
-              width: 180,
-              right: -80,
-              clip: 'rect(-6px,90px,14px,-6px)',
-            },
-          },
-        })}
-      />
-    </NoSsr>
-  );
-}
-
-NProgressBar.propTypes = {
-  children: PropTypes.node,
-};
-
-if (process.env.NODE_ENV !== 'production') {
-  NProgressBar.propTypes = exactProp(NProgressBar.propTypes);
-}
-
-export default NProgressBar;
diff --git a/packages/mui-docs/src/NProgressBar/index.d.ts b/packages/mui-docs/src/NProgressBar/index.d.ts
deleted file mode 100644
index bd37cf71068daf..00000000000000
--- a/packages/mui-docs/src/NProgressBar/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './NProgressBar';
-export * from './NProgressBar';
diff --git a/packages/mui-docs/src/NProgressBar/index.js b/packages/mui-docs/src/NProgressBar/index.js
deleted file mode 100644
index a5a8dc076fe7f9..00000000000000
--- a/packages/mui-docs/src/NProgressBar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './NProgressBar';
diff --git a/packages/mui-docs/src/i18n/hooks.tsx b/packages/mui-docs/src/i18n/hooks.tsx
new file mode 100644
index 00000000000000..7b187ed4d4def7
--- /dev/null
+++ b/packages/mui-docs/src/i18n/hooks.tsx
@@ -0,0 +1,81 @@
+import deepmerge from '@mui/utils/deepmerge';
+import * as React from 'react';
+import defaultTranslations from '../translations';
+import { translate, Translate, TranslateOptions, Translations } from './utils';
+
+const TranslationsContext = React.createContext(defaultTranslations);
+
+interface TranslationsProviderProps {
+  translations?: Record<string, Translations>;
+  children: React.ReactNode;
+}
+
+function TranslationsProvider({ translations = {}, children }: TranslationsProviderProps) {
+  const currentTranslations = React.useContext(TranslationsContext);
+  const mergedTranslations = React.useMemo(
+    () => deepmerge(currentTranslations, translations),
+    [currentTranslations, translations],
+  );
+
+  return (
+    <TranslationsContext.Provider value={mergedTranslations}>
+      {children}
+    </TranslationsContext.Provider>
+  );
+}
+
+interface UserLanguageContextValue {
+  userLanguage: string;
+  setUserLanguage: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const UserLanguageContext = React.createContext<UserLanguageContextValue>({
+  userLanguage: '',
+  setUserLanguage: () => {},
+});
+if (process.env.NODE_ENV !== 'production') {
+  UserLanguageContext.displayName = 'UserLanguage';
+}
+
+export interface UserLanguageProviderProps {
+  children: React.ReactNode;
+  translations?: Record<string, Translations>;
+  defaultUserLanguage: string;
+}
+
+export function UserLanguageProvider(props: UserLanguageProviderProps) {
+  const { children, translations, defaultUserLanguage } = props;
+
+  const [userLanguage, setUserLanguage] = React.useState(defaultUserLanguage);
+
+  const contextValue = React.useMemo(() => {
+    return { userLanguage, setUserLanguage };
+  }, [userLanguage]);
+
+  return (
+    <TranslationsProvider translations={translations}>
+      <UserLanguageContext.Provider value={contextValue}>{children}</UserLanguageContext.Provider>
+    </TranslationsProvider>
+  );
+}
+
+export function useUserLanguage() {
+  return React.useContext(UserLanguageContext).userLanguage;
+}
+
+export function useSetUserLanguage() {
+  return React.useContext(UserLanguageContext).setUserLanguage;
+}
+
+export function useTranslate(): Translate {
+  const userLanguage = useUserLanguage();
+
+  const translations = React.useContext(TranslationsContext);
+
+  return React.useMemo(
+    () =>
+      (key: string, options: TranslateOptions = {}) =>
+        translate(key, translations, userLanguage, options),
+    [userLanguage, translations],
+  );
+}
diff --git a/packages/mui-docs/src/i18n/i18n.tsx b/packages/mui-docs/src/i18n/i18n.tsx
deleted file mode 100644
index f49df2559c98a9..00000000000000
--- a/packages/mui-docs/src/i18n/i18n.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import deepmerge from '@mui/utils/deepmerge';
-import defaultTranslations from '../translations';
-
-const TranslationsContext = React.createContext(defaultTranslations);
-
-interface TranslationsProviderProps {
-  translations?: Translations;
-  children: React.ReactNode;
-}
-
-function TranslationsProvider({ translations = {}, children }: TranslationsProviderProps) {
-  const currentTranslations = React.useContext(TranslationsContext);
-  const mergedTranslations = React.useMemo(
-    () => deepmerge(currentTranslations, translations),
-    [currentTranslations, translations],
-  );
-  return (
-    <TranslationsContext.Provider value={mergedTranslations}>
-      {children}
-    </TranslationsContext.Provider>
-  );
-}
-
-function getPath(obj: Translations, path: string): string | null {
-  if (!path || typeof path !== 'string') {
-    return null;
-  }
-
-  const translation = path
-    .split('.')
-    .reduce(
-      (acc: Translations | string | null, item) =>
-        (acc && typeof acc === 'object' && acc[item]) || null,
-      obj,
-    );
-
-  if (typeof translation === 'object') {
-    return null;
-  }
-  return translation;
-}
-
-interface UserLanguageContextValue {
-  userLanguage: string;
-  setUserLanguage: React.Dispatch<React.SetStateAction<string>>;
-}
-
-const UserLanguageContext = React.createContext<UserLanguageContextValue>({
-  userLanguage: '',
-  setUserLanguage: () => {},
-});
-if (process.env.NODE_ENV !== 'production') {
-  UserLanguageContext.displayName = 'UserLanguage';
-}
-
-export interface UserLanguageProviderProps {
-  children: React.ReactNode;
-  translations?: Translations;
-  defaultUserLanguage: string;
-}
-
-export function UserLanguageProvider(props: UserLanguageProviderProps) {
-  const { children, translations, defaultUserLanguage } = props;
-
-  const [userLanguage, setUserLanguage] = React.useState(defaultUserLanguage);
-
-  const contextValue = React.useMemo(() => {
-    return { userLanguage, setUserLanguage };
-  }, [userLanguage]);
-
-  return (
-    <TranslationsProvider translations={translations}>
-      <UserLanguageContext.Provider value={contextValue}>{children}</UserLanguageContext.Provider>
-    </TranslationsProvider>
-  );
-}
-
-UserLanguageProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  defaultUserLanguage: PropTypes.string,
-};
-
-export function useUserLanguage() {
-  return React.useContext(UserLanguageContext).userLanguage;
-}
-
-export function useSetUserLanguage() {
-  return React.useContext(UserLanguageContext).setUserLanguage;
-}
-
-const warnedOnce: Record<string, boolean> = {};
-
-// TODO, migrate to use warnOnce() helper
-const warn = (userLanguage: string, key: string, ignoreWarning: boolean) => {
-  const fullKey = `${userLanguage}:${key}`;
-  // No warnings in CI env
-  if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
-    console.warn(`Missing translation for ${fullKey}`);
-
-    warnedOnce[fullKey] = true;
-  }
-};
-
-export interface TranslateOptions {
-  ignoreWarning?: boolean;
-}
-
-export type Translate = (key: string, options?: TranslateOptions) => any;
-
-export function useTranslate(): Translate {
-  const userLanguage = useUserLanguage();
-
-  const translations = React.useContext(TranslationsContext);
-
-  return React.useMemo(
-    () =>
-      function translate(key: string, options: TranslateOptions = {}) {
-        const { ignoreWarning = false } = options;
-        const wordings = translations[userLanguage];
-
-        if (!wordings) {
-          console.error(`Missing language: ${userLanguage}.`);
-          return '…';
-        }
-
-        const translation = getPath(wordings, key);
-
-        if (!translation) {
-          warn(userLanguage, key, ignoreWarning);
-
-          const enTranslation = getPath(translations.en, key);
-          return enTranslation ?? null;
-        }
-
-        return translation;
-      },
-    [userLanguage, translations],
-  );
-}
-
-export type Translations = { [key in string]?: string | Translations };
-
-export interface RequireContext {
-  (req: string): string;
-  keys: () => string[];
-}
-
-export function mapTranslations(req: RequireContext): Translations {
-  const result: Translations = {};
-  req.keys().forEach((filename) => {
-    const match = filename.match(/-([a-z]{2}).json$/);
-
-    if (match) {
-      result[match[1]] = req(filename);
-    } else {
-      result.en = req(filename);
-    }
-  });
-  return result;
-}
diff --git a/packages/mui-docs/src/i18n/index.ts b/packages/mui-docs/src/i18n/index.ts
index e82230f1bf136f..fd70c425092c5f 100644
--- a/packages/mui-docs/src/i18n/index.ts
+++ b/packages/mui-docs/src/i18n/index.ts
@@ -1 +1,2 @@
-export * from './i18n';
+export * from './hooks';
+export * from './utils';
diff --git a/packages/mui-docs/src/i18n/utils.tsx b/packages/mui-docs/src/i18n/utils.tsx
new file mode 100644
index 00000000000000..26b59723b38bdb
--- /dev/null
+++ b/packages/mui-docs/src/i18n/utils.tsx
@@ -0,0 +1,84 @@
+export interface TranslateOptions {
+  ignoreWarning?: boolean;
+}
+
+export type Translate = (key: string, options?: TranslateOptions) => any;
+
+export type Translations = { [key in string]?: string | Translations };
+
+export interface RequireContext {
+  (req: string): Translations;
+  keys: () => string[];
+}
+
+const warnedOnce: Record<string, boolean> = {};
+
+function getPath(obj: Translations, path: string): string | null {
+  if (!path || typeof path !== 'string') {
+    return null;
+  }
+
+  const translation = path
+    .split('.')
+    .reduce(
+      (acc: Translations | string | null, item) =>
+        (acc && typeof acc === 'object' && acc[item]) || null,
+      obj,
+    );
+
+  if (typeof translation === 'object') {
+    return null;
+  }
+  return translation;
+}
+
+// TODO, migrate to use warnOnce() helper
+function warn(userLanguage: string, key: string, ignoreWarning: boolean) {
+  const fullKey = `${userLanguage}:${key}`;
+  // No warnings in CI env
+  if (!ignoreWarning && !warnedOnce[fullKey] && typeof window !== 'undefined') {
+    console.warn(`Missing translation for ${fullKey}`);
+
+    warnedOnce[fullKey] = true;
+  }
+}
+
+export function mapTranslations(req: RequireContext): Record<string, Translations> {
+  const result: Record<string, Translations> = {};
+  req.keys().forEach((filename) => {
+    const match = filename.match(/-([a-z]{2}).json$/);
+
+    if (match) {
+      result[match[1]] = req(filename);
+    } else {
+      result.en = req(filename);
+    }
+  });
+  return result;
+}
+
+export function translate(
+  key: string,
+  translations: Record<string, Translations>,
+  userLanguage: string,
+  options: TranslateOptions = {},
+): string {
+  const { ignoreWarning = false } = options;
+  const wordings = translations[userLanguage];
+
+  if (!wordings) {
+    console.error(`Missing language: ${userLanguage}.`);
+    return '…';
+  }
+
+  const translation = getPath(wordings, key);
+
+  if (!translation) {
+    warn(userLanguage, key, ignoreWarning);
+
+    const enTranslation = getPath(translations.en, key);
+    return enTranslation ?? '';
+  }
+
+  return translation;
+}
diff --git a/packages/mui-docs/src/routing/index.ts b/packages/mui-docs/src/routing/index.ts
new file mode 100644
index 00000000000000..9aecb518789469
--- /dev/null
+++ b/packages/mui-docs/src/routing/index.ts
@@ -0,0 +1,2 @@
+export * from './useRouter';
+export * from './useSearchParams';
diff --git a/packages/mui-docs/src/routing/useRouter.ts b/packages/mui-docs/src/routing/useRouter.ts
new file mode 100644
index 00000000000000..151bc6b4c189e8
--- /dev/null
+++ b/packages/mui-docs/src/routing/useRouter.ts
@@ -0,0 +1,51 @@
+import { useRouter as useCompatRouter } from 'next/compat/router';
+import { PrefetchOptions } from 'next/dist/shared/lib/router/router';
+import { useRouter as useNavRouter, usePathname } from 'next/navigation';
+
+interface TransitionOptions {
+  locale?: string | false;
+  scroll?: boolean;
+  shallow?: boolean;
+  unstable_skipClientCache?: boolean;
+}
+
+export interface Router {
+  pathname: string;
+  prefetch: (url: string, asPath?: string, options?: PrefetchOptions) => void;
+  push: (url: string, asPath?: string, options?: TransitionOptions) => void;
+  replace: (url: string, asPath?: string, options?: TransitionOptions) => void;
+}
+
+/**
+ * Router that works in both the pages & app folders
+ */
+export function useRouter(): Router {
+  const compatRouter = useCompatRouter();
+  const navRouter = useNavRouter();
+  const pathname = usePathname();
+
+  return {
+    pathname: (compatRouter?.asPath ?? pathname!).replace(/\/$/, ''),
+    prefetch: (url: string, asPath?: string, options?: PrefetchOptions) => {
+      if (compatRouter) {
+        compatRouter.prefetch(url, asPath, options);
+      } else {
+        navRouter.prefetch(url);
+      }
+    },
+    push: (url: string, asPath?: string, options?: TransitionOptions) => {
+      if (compatRouter) {
+        compatRouter.push(url, asPath, options);
+      } else {
+        navRouter.push(url);
+      }
+    },
+    replace: (url: string, asPath?: string, options?: TransitionOptions) => {
+      if (compatRouter) {
+        compatRouter.replace(url, asPath, options);
+      } else {
+        navRouter.replace(url);
+      }
+    },
+  };
+}
diff --git a/packages/mui-docs/src/routing/useSearchParams.ts b/packages/mui-docs/src/routing/useSearchParams.ts
new file mode 100644
index 00000000000000..9953bf9863f7a1
--- /dev/null
+++ b/packages/mui-docs/src/routing/useSearchParams.ts
@@ -0,0 +1,21 @@
+import { useRouter as useCompatRouter } from 'next/compat/router';
+import { useSearchParams as useSearchParamsNext } from 'next/navigation';
+
+/**
+ * Search params that works in both the pages & app folders
+ */
+export function useSearchParams() {
+  const compatRouter = useCompatRouter();
+  const searchParams = useSearchParamsNext();
+
+  return {
+    getSearchParam: (name: string) => {
+      if (compatRouter) {
+        const result = compatRouter.query[name];
+        return Array.isArray(result) ? result[0] : result;
+      }
+
+      return searchParams.get(name);
+    },
+  };
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a4b86aed18936..799255937a0f94 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -336,7 +336,7 @@ importers:
         version: 37.0.0(stylelint@16.21.0(typescript@5.8.3))
       terser-webpack-plugin:
         specifier: ^5.3.14
-        version: 5.3.14(webpack@5.99.9(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9)))
+        version: 5.3.14(webpack@5.99.9)
       tsconfig-paths-webpack-plugin:
         specifier: ^4.2.0
         version: 4.2.0
@@ -763,9 +763,6 @@ importers:
       notistack:
         specifier: 3.0.2
         version: 3.0.2(csstype@3.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      nprogress:
-        specifier: ^0.2.0
-        version: 0.2.0
       postcss:
         specifier: ^8.5.6
         version: 8.5.6
@@ -884,9 +881,6 @@ importers:
       '@types/node':
         specifier: ^20.19.1
         version: 20.19.1
-      '@types/nprogress':
-        specifier: ^0.2.3
-        version: 0.2.3
       '@types/prop-types':
         specifier: ^15.7.15
         version: 15.7.15
@@ -908,6 +902,12 @@ importers:
       '@types/stylis':
         specifier: ^4.2.0
         version: 4.2.7
+      '@types/webpack-bundle-analyzer':
+        specifier: ^4.7.0
+        version: 4.7.0(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9))
+      '@types/webpack-env':
+        specifier: ^1.18.8
+        version: 1.18.8
       chai:
         specifier: ^4.5.0
         version: 4.5.0
@@ -1332,6 +1332,9 @@ importers:
       '@babel/runtime':
         specifier: ^7.27.6
         version: 7.27.6
+      '@bprogress/next':
+        specifier: ^3.2.12
+        version: 3.2.12(next@15.3.4(@babel/core@7.27.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.53.1)(babel-plugin-macros@3.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@mui/base':
         specifier: '*'
         version: 5.0.0-beta.70(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1353,9 +1356,6 @@ importers:
       csstype:
         specifier: ^3.1.3
         version: 3.1.3
-      nprogress:
-        specifier: ^0.2.0
-        version: 0.2.0
       prop-types:
         specifier: ^15.8.1
         version: 15.8.1
@@ -3189,6 +3189,22 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@bprogress/core@1.3.4':
+    resolution: {integrity: sha512-q/AqpurI/1uJzOrQROuZWixn/+ARekh+uvJGwLCP6HQ/EqAX4SkvNf618tSBxL4NysC0MwqAppb/mRw6Tzi61w==}
+
+  '@bprogress/next@3.2.12':
+    resolution: {integrity: sha512-/ZvNwbAd0ty9QiQwCfT2AfwWVdAaEyCPx5RUz3CfiiJS/OLBohhDz/IC/srhwK9GnXeXavvtiUrpKzN5GJDwlw==}
+    peerDependencies:
+      next: '>=13.0.0'
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
+  '@bprogress/react@1.2.7':
+    resolution: {integrity: sha512-MqJfHW+R5CQeWqyqrLxUjdBRHk24Xl63OkBLo5DMWqUqocUikRTfCIc/jtQQbPk7BRfdr5OP3Lx7YlfQ9QOZMQ==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
   '@braidai/lang@1.1.0':
     resolution: {integrity: sha512-xyJYkiyNQtTyCLeHxZmOs7rnB94D+N1IjKNArQIh8+8lTBOY7TFgwEV+Ow5a1uaBi5j2w9fLbWcJFTWLDItl5g==}
 
@@ -5990,9 +6006,6 @@ packages:
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
-  '@types/nprogress@0.2.3':
-    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
-
   '@types/parse-json@4.0.0':
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
 
@@ -6083,6 +6096,12 @@ packages:
   '@types/webfontloader@1.6.38':
     resolution: {integrity: sha512-kUaF72Fv202suFx6yBrwXqeVRMx7hGtJTesyESZgn9sEPCUeDXm2p0SiyS1MTqW74nQP4p7JyrOCwZ7pNFns4w==}
 
+  '@types/webpack-bundle-analyzer@4.7.0':
+    resolution: {integrity: sha512-c5i2ThslSNSG8W891BRvOd/RoCjI2zwph8maD22b1adtSns20j+0azDDMCK06DiVrzTgnwiDl5Ntmu1YRJw8Sg==}
+
+  '@types/webpack-env@1.18.8':
+    resolution: {integrity: sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A==}
+
   '@types/webxr@0.5.22':
     resolution: {integrity: sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==}
 
@@ -11277,9 +11296,6 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
-  nprogress@0.2.0:
-    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
-
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
@@ -15995,6 +16011,22 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@bprogress/core@1.3.4': {}
+
+  '@bprogress/next@3.2.12(next@15.3.4(@babel/core@7.27.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.53.1)(babel-plugin-macros@3.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@bprogress/core': 1.3.4
+      '@bprogress/react': 1.2.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      next: 15.3.4(@babel/core@7.27.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.53.1)(babel-plugin-macros@3.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@bprogress/react@1.2.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@bprogress/core': 1.3.4
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   '@braidai/lang@1.1.0': {}
 
   '@bundled-es-modules/cookie@2.0.1':
@@ -16998,7 +17030,7 @@ snapshots:
       micromatch: 4.0.8
       piscina: 4.9.2
       rollup-plugin-visualizer: 6.0.1(rollup@4.40.0)
-      terser-webpack-plugin: 5.3.14(webpack@5.99.9(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9)))
+      terser-webpack-plugin: 5.3.14(webpack@5.99.9)
       vite: 6.3.5(@types/node@20.19.1)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.0)(tsx@4.20.3)(yaml@2.7.1)
       webpack: 5.99.9(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9))
       webpack-bundle-analyzer: 4.10.2
@@ -19270,8 +19302,6 @@ snapshots:
 
   '@types/normalize-package-data@2.4.4': {}
 
-  '@types/nprogress@0.2.3': {}
-
   '@types/parse-json@4.0.0': {}
 
   '@types/parse-path@7.0.3': {}
@@ -19355,6 +19385,19 @@ snapshots:
 
   '@types/webfontloader@1.6.38': {}
 
+  '@types/webpack-bundle-analyzer@4.7.0(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9))':
+    dependencies:
+      '@types/node': 20.19.1
+      tapable: 2.2.1
+      webpack: 5.99.9(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9))
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+      - webpack-cli
+
+  '@types/webpack-env@1.18.8': {}
+
   '@types/webxr@0.5.22': {}
 
   '@types/ws@8.5.13':
@@ -25889,8 +25932,6 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
-  nprogress@0.2.0: {}
-
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
@@ -28406,7 +28447,7 @@ snapshots:
     dependencies:
       rimraf: 2.6.3
 
-  terser-webpack-plugin@5.3.14(webpack@5.99.9(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9))):
+  terser-webpack-plugin@5.3.14(webpack@5.99.9):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -29147,7 +29188,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.2
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.14(webpack@5.99.9(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9)))
+      terser-webpack-plugin: 5.3.14(webpack@5.99.9)
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     optionalDependencies: