Use separately for each page instead of _app

[fairhat]

Hey,

is it possible to use withLayout for each page?

My setup currently:

export const authenticated = (Component) => {
  return withLayout(<AuthGuard><BaseLayout /></AuthGuard>)(Component)
}

export const public = (Component) => {
  return withLayout(<BaseLayout />)(Component)
}

in each page i then use either authenticated(Component) or public(Component)

AuthGuard:

const AuthCheck = ({ children }) => {
  const [isChecking, setChecking] = React.useState(true)
  const router = useRouter()
  const actions = useActions()
  const state = useState()

  React.useEffect(() => {
    tryAuth()
  }, [])

  React.useEffect(() => {
    if (state.authenticationCheckFailed) {
      redirect()
    }
  }, [state.authenticationCheckFailed])

  React.useEffect(() => {
    if (state.authenticationCheckTried && state.isAuthenticated) {
      setChecking(false)
    }
  }, [state.authenticationCheckTried])

  const redirect = async () => {
    const r = router.pathname.slice(1)
    const redirectTo = r === 'login' ? '/' : '/' + r
    router.push(`/login?r=${redirectTo}`)
    // setChecking(false)
  }

  const tryAuth = async () => {
    await actions.checkAuth(null)
  }

  if (isChecking) {
    return (
      <Centered>
        <LoadingSpinner $style={{ borderTopColor: theme.colors.primary }} />
      </Centered>
    )
  }

  return children
}

export default AuthCheck

however this doesn't seem to work with SSR, it still is rendering my page Component first, then it renders my <AuthGuard />, even though it should not render any page component until (isChecking) is set to false (which happens if the user was authenticated)