Add PropTypes (Component - pageProps) to app.jsx in a nextjs app

user_12741235 0
Viewed 135

I am working on a Next.js project and I've added ESLint to it so I've to add PropTypes to each file. Here is the app.jsx component where the props are, Component, pageProps:

const App = ({ Component, pageProps: { session, ...pageProps } }) => {
    const getLayout = Component.getLayout || ((page) => page);
    return (
        <ThemeProvider theme={theme}>
          {globalStyles}
          {getLayout(<Component {...pageProps} />)}
        </ThemeProvider>
    );
};

The PropType of the Component is know but does anyone know how we can define a PropType for pageProps knowing that the project is in JavaScript not TypeScript?

react-proptypes eslint next.js reactjs
1 Answers

pageProps may change depending of what you are fetching with getServerSideProps, getStaticProps, and so on.

As per the NextJs docs:

pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods, otherwise it's an empty object.

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.shape({
    // your custom props here
  }),
};
user_137720330
Related