nextjs breaking_change ai_generated true

Error: getInitialProps is not supported in the app/ directory. Use generateMetadata, generateStaticParams, or server components instead.

ID: nextjs/app-dir-getinitialprops-legacy

Also available as: JSON · Markdown · 中文
90%Fix Rate
87%Confidence
1Evidence
2023-05-16First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Next.js 13.x active — — —
Next.js 14.x active — — —
Next.js 15.x active — — —

Root Cause

The app/ directory uses a new routing model that does not support getInitialProps, which was a legacy Pages Router feature. Developers migrating from pages/ to app/ mistakenly use getInitialProps.

generic

中文

app/ 目录使用新的路由模型，不支持 getInitialProps，这是 Pages Router 的旧功能。从 pages/ 迁移到 app/ 的开发人员错误地使用了 getInitialProps。

Official Documentation

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-getinitialprops

Workarounds

  1. 90% success Replace getInitialProps with server component data fetching: directly fetch data in the component body using async/await. For dynamic metadata, use generateMetadata. 
    Replace getInitialProps with server component data fetching: directly fetch data in the component body using async/await. For dynamic metadata, use generateMetadata.
  2. 85% success If the data is needed on every page, use a root layout with a server component that fetches data and passes it via context or props. 
    If the data is needed on every page, use a root layout with a server component that fetches data and passes it via context or props.

中文步骤

  1. Replace getInitialProps with server component data fetching: directly fetch data in the component body using async/await. For dynamic metadata, use generateMetadata.
  2. If the data is needed on every page, use a root layout with a server component that fetches data and passes it via context or props.

Dead Ends

Common approaches that don't work:

  1. 90% fail

    The app router explicitly disallows getInitialProps; it will throw this error at build or runtime.

  2. 70% fail

    Even if the component is imported, its getInitialProps will not run; the app router ignores it entirely.

  3. 60% fail

    getServerSideProps is also not supported in app/; it must be replaced with server components or fetch with cache options.