chore: add mui AppRouter provider

pooriaset · pooriaset · commit 8b4b1db92886 · 2024-04-22T09:11:38.000+03:30
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,6 +12,7 @@
     "deepmerge",
     "iranyekanwebboldfanum",
     "muirtl",
+    "nextjs",
     "Parens",
     "prefixer",
     "stylis",
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
+    "@mui/material-nextjs": "^5.15.11",
     "deepmerge": "^4.3.1",
     "graphql": "^16.8.1",
     "next": "14.2.2",
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -13,13 +13,14 @@ import type { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { userAgent } from 'next/server';
 import { PropsWithChildren } from 'react';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
 
 export type LocaleLayoutParams = { params: { locale: Locale } };
 type LocaleLayoutProperties = PropsWithChildren<LocaleLayoutParams>;
 
 export const metadata: Metadata = {
-  title: 'Shop app',
-  description: 'Shop app',
+  title: 'NextJs Woo',
+  description: 'NextJs Woo',
 };
 
 export default async function LocaleLayout({
@@ -36,17 +37,19 @@ export default async function LocaleLayout({
   return (
     <html lang={locale} dir={languages?.[locale]?.direction}>
       <body>
-        <ThemeProvider theme={themes[locale] ?? defaultTheme}>
-          <AppProvider userAgent={reqUserAgent}>
-            <CssBaseline />
-            <GlobalStyles styles={globalStyles} />
-            <RTLProvider>
-              <I18nProvider locale={locale}>
-                <ApolloProvider>{children}</ApolloProvider>
-              </I18nProvider>
-            </RTLProvider>
-          </AppProvider>
-        </ThemeProvider>
+        <AppRouterCacheProvider>
+          <ThemeProvider theme={themes[locale] ?? defaultTheme}>
+            <AppProvider userAgent={reqUserAgent}>
+              <CssBaseline />
+              <GlobalStyles styles={globalStyles} />
+              <RTLProvider>
+                <I18nProvider locale={locale}>
+                  <ApolloProvider>{children}</ApolloProvider>
+                </I18nProvider>
+              </RTLProvider>
+            </AppProvider>
+          </ThemeProvider>
+        </AppRouterCacheProvider>
       </body>
     </html>
   );
diff --git a/yarn.lock b/yarn.lock
@@ -2381,6 +2381,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/material-nextjs@npm:^5.15.11":
+  version: 5.15.11
+  resolution: "@mui/material-nextjs@npm:5.15.11"
+  dependencies:
+    "@babel/runtime": "npm:^7.23.9"
+  peerDependencies:
+    "@emotion/cache": ^11.11.0
+    "@emotion/server": ^11.11.0
+    "@mui/material": ^5.0.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    next: ^13.0.0 || ^14.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/cache":
+      optional: true
+    "@emotion/server":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 10c0/1d01366b6a9501785571082dd2e5e5dc449ffb7ea95fa65f80508a763e716817f4832575b2f97f7b4749f1ea990ffd1b6b95aa7945ed7d0e6bb83d58be85d22f
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.15.14":
   version: 5.15.15
   resolution: "@mui/material@npm:5.15.15"
@@ -8100,6 +8123,7 @@ __metadata:
     "@graphql-typed-document-node/core": "npm:^3.2.0"
     "@mui/icons-material": "npm:^5.15.14"
     "@mui/material": "npm:^5.15.14"
+    "@mui/material-nextjs": "npm:^5.15.11"
     "@types/jest": "npm:^29.5.12"
     "@types/node": "npm:^20"
     "@types/react": "npm:^18"
