useStateを使う問題
https://nextjs.org/docs/advanced-features/custom-app
ページ全体に共通なレイアウトはcustom-appを使って設定できる、がuseState
なんかをして動的に変更すると一瞬DefaultLayoutが表示されて、その後にLayout2に切り替わるようなことになってしまう。
雑な例
import type { AppProps } from 'next/app'
...
...
function MyApp(props: AppProps) {
const { Component, pageProps } = props
const [layoutType, ...] = useState()
...
...
const Layout = layoutType == ... ? Layout2 : DefaultLayout
return(
<>
<Layout>
<Component {...pageProps} />
</Layout>
</>
)
}
export default MyApp
解決方法
AppPropsのrouter.route
を使う。
function MyApp(props: AppProps) {
const { Component, pageProps, router: { route } } = props
console.log("route", route) // => pages直下のパスが返ってくる
このroute
のパスで、パス毎で表示に必要なLayoutを切り替えてやればクライアント側で動的に変わらない。