I use NextJs 13 to build my project.
I want CustomLayout as the whole website’s Layout.
There’s no error anymore but CustomLayout doesn’t show up.
But it only show <Home/>
page.
How can let user click menu in CustomLayout, and it will only change {page}
?
app/CustomLayout.tsx
'use client'
import { useState, useRef, useEffect } from 'react'
import './globals.css'
import './index.scss'
import Menu from '@/app/components/Menu'
import PrelodingPage from '@/app/components/Preloading'
import Cursor from '@/app/components/cursor/CustomCursor'
import CursorManager from '@/app/components/cursor/CursorManager'
export default function Layout(props: any) {
const [preloading, setPreloading] = useState<boolean>(true)
const [menuToggle, setMenuToggle] = useState<boolean>(false)
const intervalRef: { current: NodeJS.Timeout | null } = useRef(null)
const clear = () => {
clearInterval(intervalRef.current as NodeJS.Timeout)
}
useEffect(() => {
const id = setInterval(() => {
setPreloading(false)
}, 3000)
intervalRef.current = id
}, [])
useEffect(() => {
if (!preloading) {
clear()
}
}, [preloading])
const classes = menuToggle ? 'menu-button active' : 'menu-button'
return (
<CursorManager>
{preloading ? (
<PrelodingPage />
) : (
<div className='main'>
<>
<button
className={classes}
onClick={() => setMenuToggle(!menuToggle)}
>
<span className='bar'></span>
</button>
<Cursor />
<Menu menuToggle={menuToggle} setMenuToggle={setMenuToggle} />
</>
</div>
)}
</CursorManager>
)
}
app/page.tsx
import type { ReactElement } from 'react'
import Layout from './layout'
import CustomLayout from './CustomLayout'
import Home from './home/page'
import type { NextPageWithLayout } from './_app'
const Page: NextPageWithLayout = () => {
return <Home />
}
Page.getLayout = function getLayout(page: ReactElement) {
return (
<Layout>
<CustomLayout>{page}</CustomLayout>
</Layout>
)
}
export default Page