This error occurs when mixing getInitialProps (often in _app.js) with getStaticProps in page components. Next.js prevents this combination because getInitialProps disables automatic static optimization and conflicts with build-time static generation.
This error appears when your Next.js application uses both `getInitialProps` and `getStaticProps` data fetching methods simultaneously. This typically happens when `getInitialProps` is defined in a custom `_app.js` file while individual pages use `getStaticProps`. The conflict arises from fundamental differences in how these methods work. `getStaticProps` runs at build time to generate static pages, while `getInitialProps` runs at runtime on both the server and client. When `getInitialProps` is present in your custom App component, it disables Next.js's Automatic Static Optimization for all pages, preventing `getStaticProps` from functioning as intended. This is a deliberate limitation in Next.js because the two data fetching paradigms are incompatible. `getInitialProps` expects runtime context (request/response objects), while `getStaticProps` operates in a build-time environment where those objects are mocked or unavailable.
Check your pages/_app.js or pages/_app.tsx file for getInitialProps:
// pages/_app.js
MyApp.getInitialProps = async (appContext) => {
// This is causing the conflict
const appProps = await App.getInitialProps(appContext);
return { ...appProps };
};Also check if any third-party libraries (like internationalization packages) are adding getInitialProps automatically.
If you need runtime data fetching, convert pages using getStaticProps to getServerSideProps:
// Before - causes conflict
export async function getStaticProps() {
const data = await fetchPageData();
return { props: { data } };
}
// After - compatible with getInitialProps in _app
export async function getServerSideProps(context) {
const data = await fetchPageData();
return { props: { data } };
}Note: This removes static optimization but resolves the conflict.
The recommended approach is to remove getInitialProps from your custom App component and use modern alternatives:
For global data (user session, theme, etc.):
// Use React Context without getInitialProps
import { createContext, useState, useEffect } from 'react';
export const AppContext = createContext({});
function MyApp({ Component, pageProps }) {
const [globalData, setGlobalData] = useState(null);
useEffect(() => {
// Fetch global data client-side
fetchGlobalData().then(setGlobalData);
}, []);
return (
<AppContext.Provider value={globalData}>
<Component {...pageProps} />
</AppContext.Provider>
);
}
export default MyApp;For authentication:
// Use middleware or getServerSideProps per page
export async function getServerSideProps(context) {
const session = await getSession(context);
const pageData = await fetchData();
return {
props: {
session,
pageData,
},
};
}If you removed getInitialProps and need static pages that update periodically:
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 60, // Regenerate page every 60 seconds
};
}This provides the benefits of static generation with periodic updates, without requiring runtime data fetching.
For new projects or major refactors, consider migrating to Next.js App Router which replaces both methods:
// app/page.tsx - Server Component by default
async function Page() {
const data = await fetchData(); // Fetches on server
return <div>{data.content}</div>;
}
export default Page;The App Router eliminates the need for getInitialProps, getStaticProps, and getServerSideProps entirely, using a simpler component-based data fetching pattern.
Understanding the Technical Conflict:
When getInitialProps is present in _app.js, Next.js must treat all pages as server-rendered because getInitialProps runs on every request. This disables the build-time execution environment that getStaticProps requires. During the build process, Next.js attempts to call getInitialProps with mocked request/response objects, which can cause your static pages to receive incorrect or incomplete data.
Third-Party Library Issues:
Some libraries add getInitialProps to your app automatically. Common culprits include:
- Older versions of next-i18next
- Some analytics packages
- Legacy authentication libraries
Check your dependencies and their documentation for migration guides to newer patterns.
Performance Implications:
Removing getInitialProps from _app.js can significantly improve performance by re-enabling Automatic Static Optimization. Pages using getStaticProps will be pre-rendered at build time, resulting in faster initial page loads and better SEO.
Partial Migration Strategy:
If you can't remove getInitialProps immediately, you can:
1. Move pages requiring static generation to a separate Next.js app
2. Use getServerSideProps for all pages temporarily
3. Gradually migrate to App Router where this limitation doesn't exist
Pages Router vs App Router:
The App Router (Next.js 13+) eliminates this entire class of errors by unifying data fetching into Server Components. If you're starting a new project or planning a major refactor, the App Router provides a cleaner mental model without the getInitialProps/getStaticProps distinction.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite