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を切り替えてやればクライアント側で動的に変わらない。