Q37: How do you structure pages/_app.js if you MUST use getInitialProps?
If _app.js uses getInitialProps, you must manually execute App.getInitialProps(appContext) and spread appProps.pageProps to preserve page-level data fetching.
Custom App getInitialProps Pattern
import App from 'next/app';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);
return { ...appProps };
};
export default MyApp;💡 Executes framework App.getInitialProps to gather pageProps for the active component.
Key Takeaways
- Must execute
App.getInitialProps(appContext)explicitly. - Opt-out of static optimization globally across all pages.
Knowledge Check
What is the recommended modern alternative to adding global data fetching in pages/_app.js with getInitialProps?