nextjs migration_error ai_generated true

Error: 'getServerSideProps' is not supported in app/ directory

ID: nextjs/getserversideprops-export

Also available as: JSON · Markdown
92%Fix Rate
92%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

Pages Router API used in App Router. getServerSideProps doesn't exist in app/ directory.

generic

Workarounds

  1. 95% success In App Router, make the component async and fetch data directly at the top level 
    export default async function Page() {
  const data = await fetch('...');
  return <div>{data}</div>;
}

    Sources: https://nextjs.org/docs/app/building-your-application/data-fetching

  2. 88% success Use generateMetadata for metadata and generateStaticParams for static paths 
    Use generateMetadata for metadata and generateStaticParams for static paths

    Sources: https://nextjs.org/docs/app/api-reference/functions/generate-metadata

Dead Ends

Common approaches that don't work:

  1. Move the file back to pages/ directory 60% fail

    Defeats the purpose of migrating to App Router

  2. Rename getServerSideProps to something else 85% fail

    It's the function pattern that's unsupported, not just the name

Error Chain

Frequently confused with: