Как включить ssg / ssr в next.js с помощью настраиваемого компонента приложения

Question

У меня есть собственный _app.js, который выглядит так:

      function MyApp({ Component, pageProps }) {
  const Layout = Component.layoutProps?.Layout || React.Fragment
  const layoutProps = Component.layoutProps?.Layout
    ? { layoutProps: Component.layoutProps }
    : {}
  const meta = Component.layoutProps?.meta || {}
  const description =
    meta.metaDescription || meta.description || 'Meta Description'
  const store = useStore(pageProps.initialReduxState)

  return (
    <QueryClientProvider client={queryClient}>
      <Provider session={pageProps.session}>
        <Title suffix="My Dynamic Site">{meta.metaTitle || meta.title}</Title>
        <Description>{description}</Description>
        <Meta />
        <ReduxProvider store={store}>
          <PersistGate persistor={store.__PERSISTOR} loading={null}>
            <CartBox />
            <Layout {...layoutProps}>
              <Component {...pageProps} />
            </Layout>
          </PersistGate>
        </ReduxProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </Provider>
    </QueryClientProvider>
  )
}

MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps }
}

export default MyApp

Теперь я хотел бы получить данные с помощью метода выборки данных ssg / ssr, чтобы помочь команде SEO для компонентов моей страницы. Но похоже, что ни один из методов не работает должным образом, ни один из них на самом деле не передает реквизиты компоненту страницы. Вот мой компонент страницы.

      const HomePage = ({ title, stars }) => {
  console.log(title, stars);  // undefined, undefined
  return (
    <div>
      <Header title={title} />
      <GhStars stars={stars} />
      <Footer />
    </div>
  )
}

export const getStaticProps = async () => {
  return {
    props: {
      title: "My Dynamic Title From getStaticProps"
    }
  }
}

// I tried both getInitialProps & getStaticProps independently.
HomePage.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default HomePage

Я наверняка что-то упускаю, чего я пока не понял. Любая помощь будет очень оценена. Спасибо.