How to fix You can not use getInitialProps with getStaticProps in React

What this error means

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.

Typical symptoms

• Build fails with error message about getInitialProps and getStaticProps conflict
• Data from getInitialProps in _app.js not appearing in page props when getStaticProps is used
• Pages with getStaticProps not rendering correctly when custom App uses getInitialProps
• Static optimization warnings in Next.js build output
• Runtime errors about missing props that should come from getInitialProps

Common causes

1. Using getInitialProps in custom _app.js while pages use getStaticProps
2. Migrating from older Next.js versions without updating data fetching patterns
3. Adding getStaticProps to pages in an app that already has getInitialProps in _app.js
4. Using third-party libraries that inject getInitialProps into _app.js
5. Attempting to share global data via getInitialProps while also using static generation

How to fix "You can not use getInitialProps with getStaticProps"

// pages/_app.js
MyApp.getInitialProps = async (appContext) => {
  // This is causing the conflict
  const appProps = await App.getInitialProps(appContext);
  return { ...appProps };
};

// 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 } };
}

// 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;

// Use middleware or getServerSideProps per page
export async function getServerSideProps(context) {
  const session = await getSession(context);
  const pageData = await fetchData();

  return {
    props: {
      session,
      pageData,
    },
  };
}

export async function getStaticProps() {
  const data = await fetchData();

  return {
    props: { data },
    revalidate: 60, // Regenerate page every 60 seconds
  };
}

// 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;

Advanced notes

Frequently asked questions

What does "You can not use getInitialProps with getStaticProps" mean?

js application uses both getInitialProps and getStaticProps data fetching methods simultaneously. js file while individual pages use getStaticProps. The conflict arises from fundamental differences in how these methods work.

How do I fix "You can not use getInitialProps with getStaticProps"?

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.

What causes "You can not use getInitialProps with getStaticProps"?

Using getInitialProps in custom _app.js while pages use getStaticProps Migrating from older Next.js versions without updating data fetching patterns Adding getStaticProps to pages in an app that already has getInitialProps in _app.js

Is the "You can not use getInitialProps with getStaticProps" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Warning: React Hook was called conditionally. React Hooks must be called in the exact same order in every component render.

  React Hook was called conditionally

  MEDIUM

• Generic type "T" is not constrained, consider using extends

  Generic type is not constrained in TypeScript React component

  LOW

• You attempted to use a hook in a class component

  How to fix "You attempted to use a hook in a class component" in React

  HIGH

• Cannot infer generic type parameter, specify type explicitly

  Cannot infer generic type parameter, specify type explicitly

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation