getStaticProps not working with HOC

[gauravkrp]

I have a next.js (9.3.5) application and I'm using a HOC for page layouts. But on pages where I need to prefetch data, getStaticProps is not working with HOC exported pages.

Steps To Reproduce

1. Create a HOC for layout structure. In my case I hava HOC named as withLayout which takes Page component and renders Header, Page and Footer.
2. On a page, try to fetch some initial data using getStaticProps and export that page wrapped in withLayout HOC
3. No fetched data is passed to this page as props.

Expected behavior

Prefetched data must be passed to the page as props while using HOC.
I have plans to use more HOC from redux and router in future so this stays a big concern for me.

[Twansparant]

Why did you close this? I have the same issue!
Adding this in my HOC logs absolutely nothing?

export const getStaticProps = async (context) => {
	console.log(`HOC context: ${context}`);
}

Thanks

[gauravkrp]

Why did you close this? I have the same issue!
Adding this in my HOC logs absolutely nothing?

export const getStaticProps = async (context) => {
	console.log(`HOC context: ${context}`);
}

Thanks

Hi Toine, I've reopened the issue.
Earlier I had closed as my issue was resolved by changing functional HOC to class based HOC.

[AliObaji]

Can you please show us an example ?

[Pasquariello]

Ive had a similar issue for a few days now and would love an example.
Thank you

[Twansparant]

Do you have an example of this maybe?
Because you can't export the getStaticProps function inside the class right?

[gauravkrp]

Below is my working solution for this issue.
My HOC -
//../layout.js
`import React, { Component } from 'react';
import Header from './navbar'
import Footer from './footer'

export default function withLayout (PageComponent, headerBgColor) {
return class LayoutWrapped extends Component {
constructor(props) {
super(props)
}

componentDidMount() {
  console.log('Wrapped Component')
}
render() {
  return(
    <>
    <Header bg={headerBgColor} />
    <PageComponent {...this.props} {...this.state} />
    <Footer />
    </>
  )
}

}
}`

Using getStaticProps in a functional page component -
// pages/index.js

`import React from 'react'
import withLayout from '../../components/layout'

// This gets called at build time
export async function getStaticProps() {
...
return {
props: {
data
}
}

}

const Index= (props) => {...}
export default withLayout(Index, 'white')
`