App router migration material UI configuration (#1122)

* Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Remove non required file * Create theme registry component * Add ThemeRegistry to root layout * Make theme client component * Install mui for app router --------- Co-authored-by: eleanorreem <[email protected]>
chaynHQ · Oct 22, 2024 · 0d31d06 · 0d31d06
1 parent e8150bc
commit 0d31d06
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 1 deletion.
diff --git a/app/ThemeRegistry.tsx b/app/ThemeRegistry.tsx
@@ -0,0 +1,17 @@
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../styles/theme';
+
+// This implementation is from mui integrations with nextjs app router
+// see https://mui.com/material-ui/integrations/nextjs/#app-router
+export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
+  return (
+    <AppRouterCacheProvider>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </AppRouterCacheProvider>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,8 @@ import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
 import ErrorBoundary from '../components/layout/ErrorBoundary';
 import rootMetadata from './rootMetadata';
 import RollbarScript from '../components/head/RollbarScript';
+import ThemeRegistry from './ThemeRegistry';
+import rootMetadata from './rootMetadata';
 
 export const metadata = rootMetadata;
 
@@ -21,7 +23,9 @@ export default function RootLayout({
         */}
         <GoogleTagManagerScript />
         <RollbarScript />
-        <ErrorBoundary>{children}</ErrorBoundary>
+        <ErrorBoundary>
+          <ThemeRegistry>{children}</ThemeRegistry>
+        </ErrorBoundary>
       </body>
     </html>
   );

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/lab": "^5.0.0-alpha.171",
     "@mui/material": "^5.16.1",
+    "@mui/material-nextjs": "^6.0.2",
     "@newrelic/next": "^0.10.0",
     "@reduxjs/toolkit": "^2.2.7",
     "@storyblok/react": "^3.0.0",

diff --git a/styles/theme.ts b/styles/theme.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createTheme, lighten, responsiveFontSizes } from '@mui/material/styles';
 import { PRIMARY_MAIN_COLOR } from '../constants/common';
 

diff --git a/yarn.lock b/yarn.lock
@@ -1098,6 +1098,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.25.0":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.24.7", "@babel/template@^7.3.3":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315"
@@ -1280,6 +1287,17 @@
     "@emotion/weak-memoize" "^0.4.0"
     stylis "4.2.0"
 
+"@emotion/cache@^11.13.1":
+  version "11.13.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
+  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
+
 "@emotion/hash@^0.9.1":
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
@@ -1342,6 +1360,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
   integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
 "@emotion/styled@^11.11.5":
   version "11.11.5"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.5.tgz#0c5c8febef9d86e8a926e663b2e5488705545dfb"
@@ -1369,6 +1392,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.0.tgz#262f1d02aaedb2ec91c83a0955dd47822ad5fbdd"
   integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
 
+"@emotion/utils@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.0.tgz#262f1d02aaedb2ec91c83a0955dd47822ad5fbdd"
+  integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
+
 "@emotion/weak-memoize@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
@@ -2233,6 +2261,13 @@
     clsx "^2.1.0"
     prop-types "^15.8.1"
 
+"@mui/material-nextjs@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/material-nextjs/-/material-nextjs-6.0.2.tgz#db2d27963803f905f10a6810915eca9aaf354e67"
+  integrity sha512-P5ZZ6P2UXstuW746J9uLkwAHIB/HKnjWcn4I4kF8uFinGpIbEt8BC58BCSqlfesB/pHNxJqaSPWDB4wBBFc42g==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+
 "@mui/material@^5.16.1":
   version "5.16.1"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.16.1.tgz#6fcef9b5709df5864cf0b0bc0ea7b453a9d9e420"