fix: next nextjs

Jh123x · Jan 7, 2025 · 9e4e5d2 · 9e4e5d2
1 parent be2176b
commit 9e4e5d2
Show file tree

Hide file tree

Showing 10 changed files with 279 additions and 129 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,10 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.11.4",
+    "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
+    "@mui/material-nextjs": "^6.3.1",
     "file-loader": "^6.2.0",
     "next": "^15.1.3",
     "react": "^18.3.1",

diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -4,7 +4,7 @@ import { Brightness4, Menu as MenuIcon } from "@mui/icons-material";
 import { Switch, IconButton } from "@mui/material";
 import Sidebar from "src/Components/Sidebar";
 
-export const App = ({ children }: { children: React.ReactNode }) => {
+const Nav = ({ children }: { children: React.ReactNode }) => {
     const [navToggle, setNavToggle] = React.useState(false);
     const [isDarkMode, setIsDarkMode] = React.useState(false);
 
@@ -42,4 +42,6 @@ export const App = ({ children }: { children: React.ReactNode }) => {
             {children}
         </div>
     );
-};
+};
+
+export default Nav;
diff --git a/src/app/client.tsx b/src/app/client.tsx
@@ -0,0 +1,4 @@
+'use client';
+import dynamic from 'next/dynamic'
+
+export const NoSSRNav = dynamic(() => import('./app'), { ssr: false })
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,25 +1,29 @@
 import * as React from 'react'
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
 import { Metadata } from 'next'
-import { App } from 'src/app/app';
 import GlobalStyle from 'src/styles/GlobalStyle'
+import { NoSSRNav } from './client'
 
 export const metadata: Metadata = {
     title: 'Wen Junhua',
     description: 'Jh123x Portfolio Website',
     manifest: '/manifest.json',
 }
 
-export default function RootLayout({
-    children,
-}: {
-    children: React.ReactNode
-}) {
+export default function RootLayout({ children, }: { children: React.ReactNode }) {
     return (
         <html lang="en">
-            <GlobalStyle />
             <body>
-                <App children={children} />
+                <GlobalStyle />
+                <AppRouterCacheProvider
+                    options={{ 
+                        key: 'css',
+                        enableCssLayer: true,
+                    }}
+                >
+                    <NoSSRNav children={children} />
+                </AppRouterCacheProvider>
             </body>
         </html>
     )
-}
+}
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import { MainLayout, InnerLayout } from "../../styles/Layouts";
 import Title from "../../Components/Title";

diff --git a/src/app/resume/page.tsx b/src/app/resume/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import Skills from "../../Components/Skills";
 import Resume from "../../Components/Resume";

diff --git a/src/styles/Layouts.tsx b/src/styles/Layouts.tsx
@@ -1,3 +1,4 @@
+'use client';
 import styled from "styled-components";
 
 export const MainLayout = styled.div`