[nextjs] Add warnings to nextjs router integration (#45778)

Author: Janpot

packages/mui-material-nextjs/src/nextCompatRouter.cjs

@@ -0,0 +1 @@
+module.exports = require('next/compat/router');

packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx

@@ -2,7 +2,8 @@
 import * as React from 'react';
 import createCache, { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
 import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
-import { useServerInsertedHTML } from 'next/navigation';
+import { useServerInsertedHTML } from './nextNavigation.cjs';
+import { useRouter as usePagesRouter } from '../nextCompatRouter.cjs';
 
 export type AppRouterCacheProviderProps = {
   /**
@@ -28,6 +29,18 @@ export type AppRouterCacheProviderProps = {
  * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
  */
 export default function AppRouterCacheProvider(props: AppRouterCacheProviderProps) {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = usePagesRouter();
+    if (router) {
+      console.error(
+        [
+          'The App Router CacheProvider is not compatible with the Pages Router.',
+          'Please use the Pages Router CacheProvider from `@mui/material-ui-nextjs/vx-pagesRouter` instead.',
+        ].join('\n'),
+      );
+    }
+  }
   const { options, CacheProvider = DefaultCacheProvider, children } = props;
 
   const [registry] = React.useState(() => {

packages/mui-material-nextjs/src/v13-appRouter/nextNavigation.cjs

@@ -0,0 +1 @@
+module.exports = require('next/navigation');

packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13App.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import createEmotionCache from './createCache';
+import { useRouter as usePagesRouter } from '../nextCompatRouter.cjs';
 
 export interface EmotionCacheProviderProps {
   emotionCache?: EmotionCache;
@@ -12,5 +13,17 @@ export function AppCacheProvider({
   emotionCache = defaultEmotionCache,
   children,
 }: React.PropsWithChildren<EmotionCacheProviderProps>) {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const router = usePagesRouter();
+    if (!router) {
+      console.error(
+        [
+          'The Pages router CacheProvider is not compatible with the App router.',
+          'Please use the App Router CacheProvider from `@mui/material-ui-nextjs/vx-appRouter` instead.',
+        ].join('n'),
+      );
+    }
+  }
   return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
 }